How to use LeafletJS with ServiceNow

Vignesh11
Tera Expert

‎09-09-2024 03:14 AM - edited ‎09-09-2024 10:11 PM

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);

        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
 
Preview file
15 KB
Preview file
225 KB
  • 443 Views
0 REPLIES 0