How to use LeafletJS with ServiceNow

[Vignesh11]

Happy learning, here is a way to use LeafletJS with ServiceNow for displaying a mini-map showing the driving path (using waypoints of lat & long obtained from agents geo location) and use it in a ServiceRequest or other business workflows.

1. Create a new widget with below scripts:

CSS:

#map {
position: absolute;
top: 0px;
left: 0px;
width: 500px;
height: 500px;
}

HTML:

<div id="map"></div>

Client controller:

api.controller = function() {

    /* widget controller */

    var c = this;

    var fData = {

        "waypoints": [{

                "longitude": 103.77483,

                "latitude": 1.34819,

                "altitude": 68.80082192385257,

                "time": "2024-08-13T12:01:00Z"

            },

            {

                "longitude": 103.7947,

                "latitude": 1.33033,

                "altitude": 144.09622295348734,

                "time": "2024-08-13T12:07:46.866Z"

            },

            {

                "longitude": 103.81898,

                "latitude": 1.34605,

                "altitude": 164.42369358708393,

                "time": "2024-08-13T12:15:07.492Z"

            },

            {

                "longitude": 103.82951,

                "latitude": 1.33627,

                "altitude": 162.2591931603666,

                "time": "2024-08-13T12:18:46.182Z"

            },

            {

                "longitude": 103.80427,

                "latitude": 1.31336,

                "altitude": 155.72545171400813,

                "time": "2024-08-13T12:27:24.925Z"

            },

            {

                "longitude": 103.80791,

                "latitude": 1.30277,

                "altitude": 162.17374951994537,

                "time": "2024-08-13T12:30:14.854Z"

            },

            {

                "longitude": 103.82018,

                "latitude": 1.29023,

                "altitude": 138.7553809721866,

                "time": "2024-08-13T12:34:41.747Z"

            },

            {

                "longitude": 103.80676,

                "latitude": 1.28582,

                "altitude": 153.33186919632146,

                "time": "2024-08-13T12:38:17.213Z"

            },

            {

                "longitude": 103.80861,

                "latitude": 1.27356,

                "altitude": 157.77635119430602,

                "time": "2024-08-13T12:41:25.260Z"

            },

            {

                "longitude": 103.81018,

                "latitude": 1.27232,

                "altitude": 38.6969780773847,

                "time": "2024-08-13T12:42:00Z"

            }

        ]

    };

    var sw = L.latLng(1.144, 103.535);

    var ne = L.latLng(1.494, 104.502);

    var bounds = L.latLngBounds(sw, ne);

    var mapDiv = document.getElementById('map');

    var map = L.map(mapDiv, {

        center: L.latLng(1.2868108, 103.8545349),

        zoom: 11

    });

    map.setMaxBounds(bounds);

    var basemap = L.tileLayer('https://www.onemap.gov.sg/maps/tiles/Default/{z}/{x}/{y}.png', {

        detectRetina: true,

        maxZoom: 19,

        minZoom: 11,

        /** DO NOT REMOVE the OneMap attribution below **/

        attribution: '<img src="https://www.onemap.gov.sg/web-assets/images/logo/om_logo.png" style="height:20px;width:20px;"/>&nbsp;<a href="https://www.onemap.gov.sg/" target="_blank" rel="noopener noreferrer">OneMap</a>&nbsp;&copy;&nbsp;contributors&nbsp;&#124;&nbsp;<a href="https://www.sla.gov.sg/" target="_blank" rel="noopener noreferrer">Singapore Land Authority</a>'

    });

    basemap.addTo(map);

    // Add waypoints to the map

    fData.waypoints.forEach(function(waypoint) {

        L.marker([waypoint.latitude, waypoint.longitude]).addTo(map)

            .bindPopup(

                "Latitude: " + waypoint.latitude +

                "<br>Longitude: " + waypoint.longitude +

                "<br>Altitude: " + waypoint.altitude.toFixed(2) + " m" +

                "<br>Time: " + waypoint.time

            );

    });

    // Draw a polyline connecting the waypoints

    var latlngs = fData.waypoints.map(function(waypoint) {

        return [waypoint.latitude, waypoint.longitude];

    });

    L.polyline(latlngs, {

        color: 'blue'

    }).addTo(map);

};

 /** You can use openstreetmap as well by replacing onemap attribute with using below attribute**/

 // get the tile layer

    //var url = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';

    //var tilelayer = new L.tileLayer(url, {

    //attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' /*required as per OSM license - https://www.openstreetmap.org/copyright/en */

    //});

    /*var tilelayer = new L.tileLayer('https://www.onemap.gov.sg/maps/tiles/Default/{z}/{x}/{y}.png', {

        detectRetina: true,

        maxZoom: 19,

        minZoom: 11,

        attribution: '<img src="https://www.onemap.gov.sg/web-assets/images/logo/om_logo.png" style="height:20px;width:20px;"/>&nbsp;<a href="https://www.onemap.gov.sg/" target="_blank" rel="noopener noreferrer">OneMap</a>&nbsp;&copy;&nbsp;contributors&nbsp;&#124;&nbsp;<a href="https://www.sla.gov.sg/" target="_blank" rel="noopener noreferrer">Singapore Land Authority</a>'

    });

Option schema:

[
{
"name":"start_position_longitude",
"section":"other",
"default_value":"6.6327",
"label":"Start position longitude",
"type":"string"
},
{
"hint":"",
"name":"start_position_latitude",
"section":"other",
"default_value":"46.5218",
"label":"Start position latitude",
"type":"string"
},
{
"name":"start_scale",
"section":"other",
"default_value":"13",
"label":"Start scale",
"type":"string"
}
]

2. Upload the required dependencies in the widget attached in this post: 

1. leaflet.JS

2. leaflet.css

3. Preview and check the map, or add it to any page to try it out!

#leaflet #minimap #2dmap #leafletJS #geoman #cesiumJS