N4 Vehicle Tracking Map


  • Maptalks Open API maps
  • Markers Generated from Station folder
  • Multiple Map Themes
  • Markers move in real-time
  • Markers cluster together at different zoom levels
  • Values Update in Real-Time
  • Stays Up-To-Date
  • Mobile touch friendly
  • Marker search box
  • Requires Internet Connection*
  • Works in Workbench and Modern Browser
Add to Cart

Overview


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.

Demo


Click to enlarge
Tridium vehicle tracker

Usage


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

Tridium mapping library


Set Up:


System Folder Config

This should point to a folder which contains a set of sub-folders representing markers.
Example: station:|slot:/Drivers/VehicleTracker

bms vehicle tracker


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.

bms maps

Properties


bms map properties

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
Niagara 4 maps
No Labels: https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png
Niagara 4 maps
Positron w/ Labels: https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png
Niagara 4 maps
Positron without labels: https://{s}.basemaps.cartocdn.com/rastertiles/light_nolabels/{z}/{x}/{y}.png
Niagara 4 maps
Dark with Labels: https://{s}.basemaps.cartocdn.com/rastertiles/dark_all/{z}/{x}/{y}.png
Niagara 4 maps
Dark without labels: https://{s}.basemaps.cartocdn.com/rastertiles/dark_nolabels/{z}/{x}/{y}.png
Niagara 4 maps

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

Testing

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)



Using in your HTML Page


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...-->
                                    

You May Also Like





Open Street Maps With Values

N4 View Builder™©

tridium bms system

Multiline Chart

tridium charting

back to more widgets...