How to use Leaflet (OpenStreetMap) as directive?

[Felix20]

Hallo everyone,

may somebody help me to understand the angularjs directives architecture in servicenow?

I already used Google Maps using ngMap angularjs file and it was simple because I found an updateset which already served all needed information and widgets and dependencies to have a kickstart.

We need to switch to OpenStreetMap and I only get the plank map up and running.

There is a js library called Leaflet and a angularjs directive for Leaflet + css file.

I added a new dependency containing all three (leaflet-src.js + leaflet.css + angular-leaflet-directive.js).

I created a new widget, added this new created dependency and added <leaflet width="100%" height="480px"></leaflet> in html part. Now I see the map but how to interact with it? I added leafletDirective as parameter in client script part which exists but there are no functions and dont know how to set center and some marker.

Leaflet Directive:
https://cdnjs.cloudflare.com/ajax/libs/angular-leaflet-directive/0.10.0/angular-leaflet-directive.js

Leaflet JS:
http://cdn.leafletjs.com/leaflet/v1.5.1/leaflet.zip

There is a page which contains some example how to interact with the map, but these are all normal angularjs and js parts. They do not work in servicenow context.

http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/markers/angular-t...

May somebody help me with first steps?

[Josh Virelli · Accepted solution]

Hey Felix,

First a disclaimer, I have not actually tested or used this before, what I'm going to suggest is purely observational and from my own experience.

What I see on the Github documentation is there are two parameters being passed in from the Client Controller to the leaflet directive:

LF-Center

Markers

You'll notice in their example, they're passing them in in the HTML

<leaflet lf-center="london" markers="data.markers" height="480px" width="100%"></leaflet>

Scrolling up to find out what "london" and "data.markers" are and you'll find them in this format

london: {
                    lat: 51.505,
                    lng: -0.09,
                    zoom: 8
                }

markers: {
                        m1: {
                            lat: 51.505,
                            lng: -0.09,
                            compileMessage: false,
                            message: "I'm a static marker",
                        },
                        m2: {
                            lat: 51,
                            lng: 0,
                            focus: true,
                            message: "<div ng-include src=\"'views/template.html'\"></div>",
                            draggable: true,
                        },
                        m3: {
                            lat: 51,
                            lng: -1,
                            getMessageScope: function () { return $scope; },
                            message: "<p>{{data.angularInterpolatedMessage}}</p>",
                            compileMessage: true
                        }
                    }

So to start off, let's use their examples to get something up and running and then you can continue to customize from there.

We just want to define london and markers as variables in our $scope in the Client Controller and then call them from the directive in the HTML. Something like this:

HTML

<leaflet lf-center="c.london" markers="c.markers" height="480px" width="100%"></leaflet>

Client Controller - not the full client controller obviously, just paste this part in. Make sure you have the controller defined as c (example: var c = this;) I've also taken out some of the options from the markers, because I want to keep things simple first.

c.london = {
                    lat: 51.505,
                    lng: -0.09,
                    zoom: 8
                }

c.markers = {
                        m1: {
                            lat: 51.505,
                            lng: -0.09,
                            message: "I'm a static marker"
                        },
                        m2: {
                            lat: 51,
                            lng: 0,
                            focus: true,
                            message: "I'm a static marker 2"
                        },
                        m3: {
                            lat: 51,
                            lng: -1,
                            message: "I'm a static marker 3"
                        }
                    }

Let me know where that gets you.

If my answer was helpful or answered your question, please mark it as 'Helpful' or 'Correct'

Thanks!

Josh

[Phonsie Hevey1]

Hi Felix,

I don't seem to be able to get the icon working properly. I've tried a few things such as

var m1 = {};
//m1.message = "!";
m1.focus = true;
m1.lat = grLat;
m1.lng = grLon;
m1.icon = "/10on.png";

//m1.iconUrl = "https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Marker-Outside-Azure.png";
//m1.shadowUrl = "https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Marker-Outside-Azure.png";

Did you have to do anything else to get the icons working?

Kind regards,

Phonsie