The Vehicle Tracking Map widget uses the Maptalks API and displays a street map of the world and you can add
markers/vehicles via folders you have setup in the station. Geo-coodinates lat/long points in each folder update and move the markers
in real-time to their location.
At different zoom levels, when markers are too close together, they automatically cluster together and
show the number of markers in that area. Unlike our other open maps widget, this widget allows you to
set up to 4 point values derived from each station folder. The values are shown on a tooltip via single click, which is
great for mobile users as well.
Tooltip icons can also be
changed to a image of your choice, or removed entirely. Values and markers also update in real-time.
A search box will also help find markers and automatically pan to them when clicked.
You need an internet connection to view the maps.
The widget has a number of configurable properties that can be used to modify look, feel, and
functionality.
NOTE: the service that updates the lat/long of the point automatically is not part of this widget and must be done by yourself.
You could consider using some mobile app, sms, or rest api to update the Geo Location point. We may consider adding something in the
near future, but it is currently not part of this solution.
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. Restart BOTH station and Workbench.
1. Copy the vehicleTrackingMap-ux.jar file 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.
Note: in 4.10 you will need to modify the Web Service settings in the station to allow maps to show up See Here
frame-src
*
img-src
'self' workbench data: https://a.basemaps.cartocdn.com/ https://b.basemaps.cartocdn.com/ https://c.basemaps.cartocdn.com/ https://d.basemaps.cartocdn.com/ https://www.wse-ltd.com https://cdn.jsdelivr.net
style-src
'self' workbench 'unsafe-inline' https://fonts.googleapis.com https://cdn.jsdelivr.net
script-src
'self' workbench 'unsafe-inline' 'unsafe-eval' https://fonts.googleapis.com https://cdn.jsdelivr.net
System Folder Config
This should point to a folder which contains a set of sub-folders representing markers.
Example: station:|slot:/Drivers/VehicleTracker
The folders display name is what represents the marker on the map. All points and folders will get picked up automatically by the widget.
Each folder should have the above 5 points in their respective folder.
The widget has a number of configurable properties that can be used to modify look, feel, and functionality. Change the properties as required:
API Version
The current version when writing this document is 0.49.5. As we do not maintain the mapping images, change this value as new versions are released. The latest version value can be found here. https://github.com/maptalks/maptalks.js/releases
Latitude/Longitude
The map will display at this location when initialised.
Pitch
The viewing angle of the map.
Overview Control, Scale Control, Zoom Control
Shows/hides the controls on the map. Set to true or false.
Zoom
The default zoom level. Default is 15.5.
Theme
Possible values light or dark.
Height/Width
Set these values to manually set the height/width of the map frame.
Marker Image File
Use a custom marker image file. File must exist in stations shared directory. Also set useMarkerImage property to true.
Base Maps Url - Style
There are a few different styles you can display.
Default: https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png
No Labels: https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png
Positron w/ Labels: https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png
Positron without labels: https://{s}.basemaps.cartocdn.com/rastertiles/light_nolabels/{z}/{x}/{y}.png
Dark with Labels: https://{s}.basemaps.cartocdn.com/rastertiles/dark_all/{z}/{x}/{y}.png
Dark without labels: https://{s}.basemaps.cartocdn.com/rastertiles/dark_nolabels/{z}/{x}/{y}.png
API Version
The current version when writing this document is 0.49.5. As we do not maintain the mapping images, change this value as new versions are released. The latest version value can be found here. https://github.com/maptalks/maptalks.js/releases
The Marker GeoLocation updater service is not included in this widget. If you want to test the markers moving create a program object with the code below. Modify as required.
public void onStart() throws Exception
{
// start up code here
}
public void onExecute() throws Exception
{
// execute code (set executeOnChange flag on inputs)
System.out.println("Getting point");
BStringWritable comp =
(BStringWritable)BOrd.make("station:|slot:/Drivers/VehicleTracker/Car1/GeoLocation").resolve(Sys.getStation(), null).get();
Timer timer = new java.util.Timer();
timer.schedule(
new java.util.TimerTask() {
@Override
public void run() {
comp.doSet(BString.make("-0.14698,51.5146"));
try {
Thread.sleep(3000);
comp.doSet(BString.make("-0.14438,51.51509"));
Thread.sleep(3000);
comp.doSet(BString.make("-0.14056,51.51545"));
Thread.sleep(3000);
comp.doSet(BString.make("-0.13848,51.51572"));
Thread.sleep(3000);
comp.doSet(BString.make("-0.13661,51.51595"));
Thread.sleep(3000);
comp.doSet(BString.make("-0.14841,51.51452"));
System.out.println("done moving");
} catch (Exception e) {
}
timer.cancel();
}
},
3000, 2000
);
}
public void onStop() throws Exception
{
// shutdown code here
}
When updating your GeoLocation point it should be a comma separated string e.g. -0.14841,51.51452. (longitude/latitude)
You can now use the widget in your custom html page as long as the html file is in a appropriate station directory. E.g.:
C:/../station/shared/demo1.html
1. Create an html page and place in your station files directory.
2. Create a div element and give it an id so you can inject the widget into this area. E.g.: widget1.
3. Add the following scripts before the closing head tag or the closing body tag. E.g.:
<script type="text/javascript">
var require = {
paths: {
//pointing nmodule at /module is a Niagara convention, allowing us to
//refer to module resources without having RequireJS get hung up on
//the use of absolute paths everywhere.
"nmodule": "/module",
"baja": "/module/bajaScript/rc/plugin/baja",
"bajaScript": "/module/bajaScript/rc",
"bajaux": "/module/bajaux/rc",
"lex": "/module/js/rc/lex/lexplugin",
"css": "/module/js/com/tridium/js/ext/require/css",
"jquery": "/module/js/rc/jquery/jquery-3.4.1.min",
"Handlebars": "/module/js/rc/handlebars/handlebars.min",
"Promise": "/module/js/rc/bluebird/bluebird",
// these are runtime dependencies
"hbs": "/module/js/rc/require-handlebars-plugin/hbs",
"i18nprecompile": "/module/js/rc/require-handlebars-plugin/hbs/i18nprecompile",
"json2": "/module/js/rc/require-handlebars-plugin/hbs/json2",
"underscore": "/module/js/rc/underscore/underscore",
"dialogs": "/module/js/rc/dialogs/dialogs",
"theme": "/module/themeZebra/ux/theme",
"pikaday": "/module/js/rc/pikaday/pikaday",
'log': '/module/js/rc/log/logPlugin',
},
hbs: {
disableI18n: true
},
}
</script>
<!--Live-->
<script type="text/javascript"
src="/module/js/com/tridium/js/ext/require/require.min.js">
</script>
<script>
require(['/module/vehicleTrackingMap/rc/vehicleTrackingMapWidget.run.js'], function (app) {
app.initialiseOpenStreetMap({
apiVersion: '0.49.1',
baseMapsUrl: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}.png', // see help for different styles
divId: '#widget',
changeMarkerColorOnValue: true, // when true it will use the markerChangeValueOrd 0, 1, or 2 to change colors
markerColorValue0: '#3fa9f5', // a value of 0 for the markerChangeValueOrd will change it to this color
markerColorValue1: '#ff0000', // a value of 1 for the markerChangeValueOrd ord will change it to this color
markerColorValue2: '#FF9C1B', // a value of 2 for the markerChangeValueOrd ord will change it to this color
markerImageFile: '',
gaugeColor: '#f77a52',
latitude: '51.51184',
longitude: '-0.14614',
maxClusterZoom: 15, // zoom level to show markers when they are clustered together
noClusterWithOneMarker: false, // if only one marker in the cluster, just show the marker
showMarker: true, // set to false if using image file marker
showImageMarker: true, // set to true to show a custom marker image from your stations shared directory
showSearchBox: true,
fontFamily: 'Roboto',
backgroundColor: '',
height: '', // Set these values to manually set the height/width of the map frame
width: '', // Set these values to manually set the height/ width of the map frame
pitch: '0',
systemFolder: 'station:|slot:/Drivers/VehicleTracker', // Folder with all markers
zoom: 16,
zoomControl: true,
scaleControl: true,
overviewControl: true,
labelFontColor: '#000000',
theme: 'light', // light or dark
tooltipColor: '#000000',
tooltipFontColor: '#ffffff',
});
});
</script>
</head>
<!--html to go here-->
<div id="widget1" style="width:1300px;height:800px;"></div>
<!--Rest of your html below...-->
Build Your Own dashboards and win Projects by showing data that increase value and reduces expenditure.
