N4 Vehicle Tracking Map

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.

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?

Demo

Click to enlarge

Usage

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

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

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

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

API Version

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)

Overview

Demo

Usage

Set Up:

Properties

You May Also Like

Open Street Maps With Values

N4 View Builder^™©

Multiline Chart