Our offline mapping solution for N4 delivers high-quality maps from a locally stored file, so you can navigate and explore even without connectivity.
Using a simple JSON configuration file, you can define markers, links, display point values, and customize your map experience. With no need for external network access, it’s easier than ever to showcase maps and markers securely and seamlessly.
The widget has a number of configurable properties that can be used to modify look, feel, and functionality.
Are you looking for a cost effective way to manage and visualize data for all your customers? Why not have a look at View Builder?
Before you start. Download the modules from our portal (see your order confirmation, which also explains licensing). Copy the modules file to your modules directory. Update licenses AND certs on your system. Restart BOTH station and Workbench.
1. Copy the offlineMapsWithValues-ux.jar, insightsDataProvider-rt.jar, insightsDataProvider-wb.jar files to your modules directory.
2. Open the module from your palette file.
3. Drag and drop the widget from the palette onto your px view.
The widget has a number of configurable properties that can be used to modify look, feel, and functionality. Change the properties as required:
File Config
A JSON config for map markers. See below for setup.
You can point the menu to a file that exists on the station.
Valid values are ords e.g.:
file:^openMapsFolder/config.txt
If you do not specify a file reference, an message will show up.
Verify all point exist in your config.
Heres a sample config to help you get started.
Download
Latitude/Longitude
The map will display at this location when initialised.
Theme
There are a few different styles you can display.
light, dark, white, grayscale, or black
Default (light):
Dark:
White:
Greyscale:
Black:
Clustering
The map markers cluster together at high zoom levels. Change the maxZoomLevel property to how far you want to zoom in.
Search Box
Search markers, click on search results and the map automically pans/zooms to the marker location
The marker config is in JSON format. You can customise as needed. Special characters should be avoided. Heres a sample config to help you get started. Download
If no link is specified, the marker, label, and tooltip will be shown. For links to navigate correctly in Workbench, and if you're running 4.3 or above, there should be a "toggle preview" button at the end of the toolbar when looking at a Px graphic. This will show you your Px page rendered in a browser and the links will work correctly
{
"markers": [
{
"lat": "51.508682",
"long": "-0.1323335",
"link": "/ord/file:%5Etemplates/viewBuilder/Niagara411_12_13_14/index.html%7Cview:web:FileDownloadView#/charts7?ord=station:|slot:/Drivers/Sites&displayName=Sites",
"linkTarget": "top",
"label": "North Building",
"defaultMarker": "/module/offlineMapsWithValues/rc/images/marker-icon.png",
"ord": "station:|slot:/Drivers/Sites/Overview/Comfort",
"ord1": "station:|slot:/Drivers/Sites/Overview/Humidity",
"ord2": "station:|slot:/Drivers/Sites/Overview/Temperature",
"ord3": "station:|slot:/Drivers/Sites/Overview/TotalAlarms",
"ord4": "station:|slot:/Drivers/Sites/Overview/InAlarm"
},
{
"lat": "51.5063802",
"long": "-0.1396422",
"link": "/ord/station:|slot:/Drivers/Sites",
"linkTarget": "parent",
"label": "West Building",
"defaultMarker": "/module/offlineMapsWithValues/rc/images/marker-icon-gold.png",
"ord": "station:|slot:/Drivers/Sites/Overview/COMeasurement1",
"ord2": "station:|slot:/Drivers/Sites/Overview/Temperature1",
"ord3": "station:|slot:/Drivers/Sites/Overview/TotalAlarms1",
"ord4": "station:|slot:/Drivers/Sites/Overview/InAlarm1"
},
{
"lat": "51.507351",
"long": "-0.127758",
"link": "",
"linkTarget": "parent",
"label": "East Building",
"defaultMarker": "/module/offlineMapsWithValues/rc/images/marker-icon-green.png",
"ord": "station:|slot:/Drivers/Sites/Overview/COMeasurement2",
"ord1": "station:|slot:/Drivers/Sites/Overview/Humidity2",
"ord2": "station:|slot:/Drivers/Sites/Overview/Temperature2",
"ord3": "station:|slot:/Drivers/Sites/Overview/TotalAlarms2",
"ord4": "station:|slot:/Drivers/Sites/Overview/InAlarm2"
},
{
"lat": "51.5063802",
"long": "-0.1496422",
"link": "/ord/station:|slot:/Drivers/Sites",
"linkTarget": "parent",
"label": "New Building",
"defaultMarker": "/module/offlineMapsWithValues/rc/images/marker-icon-black.png",
"ord": "station:|slot:/Drivers/Sites/Overview/COMeasurement1",
"ord1": "station:|slot:/Drivers/Sites/Overview/Humidity1",
"ord2": "station:|slot:/Drivers/Sites/Overview/Temperature1",
"ord3": "station:|slot:/Drivers/Sites/Overview/TotalAlarms1",
"ord4": "station:|slot:/Drivers/Sites/Overview/InAlarm1"
},
{
"lat": "51.5163802",
"long": "-0.1396422",
"link": "/ord/station:|slot:/Drivers/Sites",
"linkTarget": "parent",
"label": "North West Building",
"defaultMarker": "/module/offlineMapsWithValues/rc/images/marker-icon-red.png",
"ord": "station:|slot:/Drivers/Sites/Overview/COMeasurement1",
"ord1": "station:|slot:/Drivers/Sites/Overview/Humidity1",
"ord2": "station:|slot:/Drivers/Sites/Overview/Temperature1",
"ord3": "station:|slot:/Drivers/Sites/Overview/TotalAlarms1",
"ord4": "station:|slot:/Drivers/Sites/Overview/InAlarm1"
}
]
}
JSON Values Explained:
lat- geo coordinate.
long- geo coordinate.
link- link to when clicked on tooltip label.
linkTarget- link to target window. Default is parent. Possible values: blank, self, parent, or top.
label- label to show on map and tooltip.
defaultMarker- default icon file. see below
ord- ord value for tooltip data. Absolute ord e.g. station:|slot:/Drivers/Sites/Overview/COMeasurement
ord1- ord value 1 for tooltip data.
ord2- ord 2 value.
ord3- ord 3 value.
ord4- ord 4
Default icons:
Default: /module/offlineMapsWithValues/rc/images/marker-icon.png
Gold: /module/offlineMapsWithValues/rc/images/marker-icon-gold.png
Red: /module/offlineMapsWithValues/rc/images/marker-icon-red.png
Black: /module/offlineMapsWithValues/rc/images/marker-icon-black.png
Green: /module/offlineMapsWithValues/rc/images/marker-icon-green.png
Grey: /module/offlineMapsWithValues/rc/images/marker-icon-grey.png
Orange: /module/offlineMapsWithValues/rc/images/marker-icon-orange.png
Violet: /module/offlineMapsWithValues/rc/images/marker-icon-violet.png
Yellow: /module/offlineMapsWithValues/rc/images/marker-icon-yellow.png
Custom Icon
Use a custom icon 42x42 pixels is recommended with a transparent background. Simply place the file in your stations shared folder and update the defaultMarker json prop:
"defaultMarker":
"/ord/file:%5Ehome1-sm.png%7Cview:web:FileDownloadView",
JSON Editing
To help build your menu configuration use an online JSON editor like:
https://jsoneditoronline.org/
Offline Map Tiles File:
We will generate and send you the map files for the area you wish to show on the map. These files can be quite large.
We need the bounding box of the area which consists of 4 coordinates.
1. Go to http://bboxfinder.com/
2. On the map find the area you want map tiles for
3. Send us the map box coordinates. Example:
-0.560989,51.358705,0.093040,51.553594 and what you would like to name the file.
Alternatively you use a polygon geojson file. To generate this go to https://geojson.io/
Use the polygon tool to draw a polygon and send us the json and we can use that to generate the file.
4. You have 2 options to serve up the map file:
a. Place the file in your stations shared directory. Add our free IDP service to your station (included in download), then specify the url of the map file:
// Strict syntax. Here there is a folder name offlineMaps
// in the stations shared folder. Specify your folder as required:
http://localhost/idp/file:^offlineMaps/london1.pmtiles
b. The generated map file can served via a hosted service, such as IIS, Nginx, Apache, Jetty, Node, or a Python script. All are very light weight and easy to install.
5. On the widget property sheet enter the url from step 4: mapTilesFile property:
// Using Niagara Station:
http://localhost/idp/file:^offlineMaps/london1.pmtiles
// Using a web service:
http://localhost/maps/southeast.pmtiles
Heres is a sample to help you get started:
Download
If you do use localhost web server like IIS, then you need to update the web service content security policy. Simply add http://localhost to connect-src property. Additionally set the x-frame option to same origin or any if its not on the same machine.
Note: that we are working with Tridium to allow you to serve up the map tile file on the station. This is mainly because Tridium's Jetty Web server
doesn't handle range requests. Thats when the response is returned in chunks e.g. bytes=0-16383. We hope we can sort it out so you don't have to put on another local server.
Build Your Own dashboards and win Projects by showing data that increase value and reduces expenditure.
