/**
* Class LeafletService which provide API
* to let leaflet work well with AngularJS
* You can pass settings throw the provider
*/
class LeafletService {
/**
* LeafletService constructor
* @constructor
* @param {Object} $compile angular $compile
*/
constructor($complie){
this.settings = {};
this.data = {};
}
/**
* handle events
* @description integrate Leaflet map.on function with angular
* most of the work consist to call scope.$apply only if needed
* @param {String} event the name of the event to listen like 'click'
* You will find all supported event on the http://leafletjs.com/reference.html#
* @param {function} callback the function to call when this event happens
* @param {Object} leafletObject the object that has '.on' function
* @param {Ojbect} scope the scope of your current controller/directive/component
*/
on(event, callback, lobj, scope) {
lobj.on(event, function (e) {
callback(e);
if (scope.$root.$$phase != '$apply' && scope.$root.$$phase != '$digest') {
scope.$apply();
}
});
scope.$on('$destroy', function () {
lobj.off(event, callback);
});
}
/**
* @description integrate Leaflet map.on function with angular
* most of the work consist to call scope.$apply only if needed.
* @example
var settings = {
center: {
lat: 47.184112659842015,
lng: -1.619110107421875,
zoom: 17
},
minZoom: 12,
maxBounds: [[47.143496,-1.652756],[47.296462,-1.461868]]
tiles: {
url: 'http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
options: {
attribution: '© Openstreetmap France | © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
maxZoom: 19
}
},
layers: {
baselayers: {
layerid: {}
},
overlays: {
overlayid: {}
}
}
};
* @param {Object} map the leaflet map object update
* @param {Object} settings
*/
updateMapFromSettings(map, settings) {
var s = settings || this.settings;
if (s.center) {
map.setView([s.center.lat, s.center.lng], s.center.zoom);
}
if (s.minZoom) {
map.options.minZoom = s.minZoom;
}
if (s.maxZoom) {
map.options.maxZoom = s.maxZoom;
}
if (s.maxBounds) {
map.setMaxBounds(s.maxBounds);
}
if (s.tiles) {
L.tileLayer(s.tiles.url, s.tiles.options).addTo(map);
}
if (s.layers) {
var baselayers = {};
var overlays = {};
if (s.layers.baselayers) {
for (let layerid in s.layers.baselayers) {
let layer = s.layers.baselayers[layerid];
baselayers[layer.name] = L.tileLayer(layer.url, layer.options);
}
}
if (s.layers.overlays) {
for (let layerid in s.layers.overlays) {
let layer = s.layers.overlays[layerid];
overlays[layer.name] = L.tileLayer(layer.url, layer.options);
}
}
L.control.layers(baselayers, overlays).addTo(map);
}
}
}
LeafletService.$inject = ['$compile'];
export default LeafletService;