From 754db7f6fa3bf0221f61fe45da5600d3cb11c539 Mon Sep 17 00:00:00 2001 From: tombatossals Date: Sun, 26 Jan 2014 22:32:08 +0100 Subject: [PATCH] feat(build): Solved some bugs with the markers management, and reworked example markers-update. Thanks to @zolotyx for notify the problem here: https://github.com/tombatossals/angular-leaflet-directive/issues/258 --- dist/angular-leaflet-directive.js | 17 +++- dist/angular-leaflet-directive.min.js | 4 +- examples/markers-groups-example.html | 1 - examples/markers-update-example.html | 115 +++++++++++++++++--------- src/services/leafletHelpers.js | 4 +- src/services/leafletMarkersHelpers.js | 13 ++- 6 files changed, 102 insertions(+), 52 deletions(-) diff --git a/dist/angular-leaflet-directive.js b/dist/angular-leaflet-directive.js index 0e1363ab..d1ac718d 100644 --- a/dist/angular-leaflet-directive.js +++ b/dist/angular-leaflet-directive.js @@ -2102,6 +2102,7 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($ var isDefined = leafletHelpers.isDefined, MarkerClusterPlugin = leafletHelpers.MarkerClusterPlugin, + AwesomeMarkersPlugin = leafletHelpers.AwesomeMarkersPlugin, Helpers = leafletHelpers, isString = leafletHelpers.isString, isNumber = leafletHelpers.isNumber, @@ -2109,6 +2110,14 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($ groups = {}; var createLeafletIcon = function(iconData) { + if (isDefined(iconData) && isDefined(iconData.type) && iconData.type === 'awesomeMarker') { + if (!AwesomeMarkersPlugin.isLoaded()) { + $log.error('[AngularJS - Leaflet] The AwesomeMarkers Plugin is not loaded.'); + } + + return new L.AwesomeMarkers.icon(iconData); + } + if (isDefined(iconData) && isDefined(iconData.type) && iconData.type === 'div') { return new L.divIcon(iconData); } @@ -2316,7 +2325,7 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($ } // There is some text in the popup, so we must show the text or update existing - if (isString(markerData) && !isString(oldMarkerData)) { + if (isString(markerData.message) && !isString(oldMarkerData.message)) { // There was no message before so we create it marker.bindPopup(markerData.message); if (markerData.focus === true) { @@ -2325,7 +2334,7 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($ } } - if (isString(markerData) && isString(oldMarkerData) && markerData.message !== oldMarkerData.message) { + if (isString(markerData.message) && isString(oldMarkerData.message) && markerData.message !== oldMarkerData.message) { // There was a different previous message so we update it marker.setPopupContent(markerData.message); } @@ -2476,8 +2485,8 @@ angular.module("leaflet-directive").factory('leafletHelpers', function ($q, $log AwesomeMarkersPlugin: { isLoaded: function() { - if (L.AwesomeMarkers !== undefined) { - return (L.AwesomeMarkers.Icon !== undefined); + if (angular.isDefined(L.AwesomeMarkers) && angular.isDefined(L.AwesomeMarkers.Icon)) { + return true; } else { return false; } diff --git a/dist/angular-leaflet-directive.min.js b/dist/angular-leaflet-directive.min.js index c08461fa..7c0972a7 100644 --- a/dist/angular-leaflet-directive.min.js +++ b/dist/angular-leaflet-directive.min.js @@ -28,5 +28,5 @@ */ /*! angular-leaflet-directive 26-01-2014 */ -!function(){"use strict";angular.module("leaflet-directive",[]).directive("leaflet",["$q","leafletData","leafletMapDefaults","leafletHelpers","leafletEvents",function(a,b,c,d,e){var f;return{restrict:"EA",replace:!0,scope:{center:"=center",defaults:"=defaults",maxbounds:"=maxbounds",bounds:"=bounds",markers:"=markers",legend:"=legend",geojson:"=geojson",paths:"=paths",tiles:"=tiles",layers:"=layers",controls:"=controls",eventBroadcast:"=eventBroadcast"},template:'
',controller:["$scope",function(b){f=a.defer(),this.getMap=function(){return f.promise},this.getLeafletScope=function(){return b}}],link:function(a,g,h){var i=d.isDefined,j=c.setDefaults(a.defaults,h.id),k=e.genDispatchMapEvent,l=e.getAvailableMapEvents();i(h.width)&&(isNaN(h.width)?g.css("width",h.width):g.css("width",h.width+"px")),i(h.height)&&(isNaN(h.height)?g.css("height",h.height):g.css("height",h.height+"px"));var m=new L.Map(g[0],c.getMapCreationDefaults(h.id));if(f.resolve(m),i(h.center)||m.setView([j.center.lat,j.center.lng],j.center.zoom),!i(h.tiles)&&!i(h.layers)){var n=L.tileLayer(j.tileLayer,j.tileLayerOptions);n.addTo(m),b.setTiles(n)}if(i(m.zoomControl)&&i(j.zoomControlPosition)&&m.zoomControl.setPosition(j.zoomControlPosition),i(m.zoomControl)&&j.zoomControl===!1&&m.zoomControl.removeFrom(m),i(m.zoomsliderControl)&&i(j.zoomsliderControl)&&j.zoomsliderControl===!1&&m.zoomsliderControl.removeFrom(m),!i(h.eventBroadcast))for(var o="broadcast",p=0;pe.center.zoom?d.locate({setView:!0,maxZoom:b.zoom}):i(e.maxZoom)?d.locate({setView:!0,maxZoom:e.maxZoom}):d.locate({setView:!0}),void 0):(d.setView([b.lat,b.lng],b.zoom),h=!1,void 0):(a.warn("[AngularJS - Leaflet] invalid 'center'"),d.setView([e.center.lat,e.center.lng],e.center.zoom),void 0)},!0),d.on("moveend",function(){h||k(m,function(a){f&&(f.lat.assign(a,d.getCenter().lat),f.lng.assign(a,d.getCenter().lng),f.zoom.assign(a,d.getZoom()),f.autoDiscover.assign(a,!1))})}),n.autoDiscover===!0&&d.on("locationerror",function(){a.warn("[AngularJS - Leaflet] The Geolocation API is unauthorized on this page."),l(n)?d.setView([n.lat,n.lng],n.zoom):d.setView([e.center.lat,e.center.lng],e.center.zoom)})})}}}]),angular.module("leaflet-directive").directive("tiles",["$log","leafletData","leafletMapDefaults","leafletHelpers",function(a,b,c,d){return{restrict:"A",scope:!1,replace:!1,require:"leaflet",link:function(e,f,g,h){var i=d.isDefined,j=h.getLeafletScope(),k=j.tiles;return i(k)||i(k.url)?(h.getMap().then(function(a){var d,e=c.getDefaults(g.id);j.$watch("tiles",function(c){var f=e.tileLayerOptions,h=e.tileLayer;return!i(c.url)&&i(d)?(a.removeLayer(d),void 0):i(d)?i(c.url)&&i(c.options)&&!angular.equals(c.options,f)?(a.removeLayer(d),f=e.tileLayerOptions,angular.copy(c.options,f),h=c.url,d=L.tileLayer(h,f),d.addTo(a),b.setTiles(d,g.id),void 0):(i(c.url)&&d.setUrl(c.url),void 0):(i(c.options)&&angular.copy(c.options,f),i(c.url)&&(h=c.url),d=L.tileLayer(h,f),d.addTo(a),b.setTiles(d,g.id),void 0)},!0)}),void 0):(a.warn("[AngularJS - Leaflet] The 'tiles' definition doesn't have the 'url' property."),void 0)}}}]),angular.module("leaflet-directive").directive("legend",["$log","leafletHelpers",function(a,b){return{restrict:"A",scope:!1,replace:!1,require:"leaflet",link:function(c,d,e,f){var g=b.isArray,h=f.getLeafletScope(),i=h.legend;f.getMap().then(function(b){if(g(i.colors)&&g(i.labels)&&i.colors.length===i.labels.length){var c=i.legendClass?i.legendClass:"legend",d=i.position||"bottomright",e=L.control({position:d});e.onAdd=function(){for(var a=L.DomUtil.create("div",c),b=0;b'+i.labels[b]+"";return a},e.addTo(b)}else a.warn("[AngularJS - Leaflet] legend.colors and legend.labels must be set.")})}}}]),angular.module("leaflet-directive").directive("geojson",["$log","$rootScope","leafletData","leafletHelpers",function(a,b,c,d){return{restrict:"A",scope:!1,replace:!1,require:"leaflet",link:function(a,e,f,g){var h=d.safeApply,i=d.isDefined,j=g.getLeafletScope(),k={};g.getMap().then(function(a){j.$watch("geojson",function(e){if(i(k)&&a.hasLayer(k)&&a.removeLayer(k),i(e)&&i(e.data)){var f=e.resetStyleOnMouseout,g=e.onEachFeature;g||(g=function(a,c){d.LabelPlugin.isLoaded()&&i(e.label)&&c.bindLabel(a.properties.description),c.on({mouseover:function(c){h(j,function(){e.selected=a,b.$broadcast("leafletDirectiveMap.geojsonMouseover",c)})},mouseout:function(a){f&&k.resetStyle(a.target),h(j,function(){e.selected=void 0,b.$broadcast("leafletDirectiveMap.geojsonMouseout",a)})},click:function(a){h(j,function(){b.$broadcast("leafletDirectiveMap.geojsonClick",e.selected,a)})}})}),e.options={style:e.style,onEachFeature:g},k=L.geoJson(e.data,e.options),c.setGeoJSON(k),k.addTo(a)}})})}}}]),angular.module("leaflet-directive").directive("layers",["$log","$q","leafletData","leafletHelpers","leafletMapDefaults","leafletLayerHelpers",function(a,b,c,d,e,f){var g;return{restrict:"A",scope:!1,replace:!1,require:"leaflet",controller:function(){g=b.defer(),this.getLayers=function(){return g.promise}},link:function(b,h,i,j){var k=d.isDefined,l=d.isObject,m={},n=j.getLeafletScope(),o=n.layers,p=f.createLayer;j.getMap().then(function(b){var d=e.getDefaults(i.id);if(!k(o)||!k(o.baselayers)||0===Object.keys(o.baselayers).length)return a.error("[AngularJS - Leaflet] At least one baselayer has to be defined"),void 0;g.resolve(m),c.setLayers(m,i.id),m.baselayers={},m.controls={},m.controls.layers=new L.control.layers,m.controls.layers.setPosition(d.controlLayersPosition);var f=!1;for(var h in o.baselayers){var j=p(o.baselayers[h]);k(j)?(m.baselayers[h]=j,o.baselayers[h].top===!0&&(b.addLayer(m.baselayers[h]),f=!0),m.controls.layers.addBaseLayer(m.baselayers[h],o.baselayers[h].name)):delete o.baselayers[h]}var q=Object.keys(o.baselayers).length;l(o.overlays)&&(q+=Object.keys(o.overlays).length),q>1&&m.controls.layers.addTo(b),!f&&Object.keys(m.baselayers).length>0&&b.addLayer(m.baselayers[Object.keys(o.baselayers)[0]]),m.overlays={};for(h in o.overlays){var r=p(o.overlays[h]);k(r)?(m.overlays[h]=r,o.overlays[h].visible===!0&&b.addLayer(m.overlays[h]),m.controls.layers.addOverlay(m.overlays[h],o.overlays[h].name)):delete o.overlays[h]}n.$watch("layers.baselayers",function(c){for(var d in m.baselayers)k(c[d])||(m.controls.layers.removeLayer(m.baselayers[d]),b.hasLayer(m.baselayers[d])&&b.removeLayer(m.baselayers[d]),delete m.baselayers[d]);for(var e in c)if(!k(m.baselayers[e])){var f=p(c[e]);k(f)&&(m.baselayers[e]=f,c[e].top===!0&&b.addLayer(m.baselayers[e]),m.controls.layers.addBaseLayer(m.baselayers[e],c[e].name))}if(0===Object.keys(m.baselayers).length)return a.error("[AngularJS - Leaflet] At least one baselayer has to be defined"),void 0;var g=!1;for(var h in m.baselayers)if(b.hasLayer(m.baselayers[h])){g=!0;break}g||b.addLayer(m.baselayers[Object.keys(o.baselayers)[0]])},!0),n.$watch("layers.overlays",function(a){for(var c in m.overlays)k(a[c])||(m.controls.layers.removeLayer(m.overlays[c]),b.hasLayer(m.overlays[c])&&b.removeLayer(m.overlays[c]),delete m.overlays[c]);for(var d in a){if(!k(m.overlays[d])){var e=p(a[d]);k(e)&&(m.overlays[d]=e,m.controls.layers.addOverlay(m.overlays[d],a[d].name),a[d].visible===!0&&b.addLayer(m.overlays[d]))}a[d].visible&&!b.hasLayer(m.overlays[d])?b.addLayer(m.overlays[d]):a[d].visible===!1&&b.hasLayer(m.overlays[d])&&b.removeLayer(m.overlays[d])}},!0)})}}}]),angular.module("leaflet-directive").directive("bounds",["$log","leafletHelpers","leafletBoundsHelpers",function(a,b,c){return{restrict:"A",scope:!1,replace:!1,require:"leaflet",link:function(d,e,f,g){var h=b.isDefined,i=c.createLeafletBounds,j=c.updateBoundsInScope,k=g.getLeafletScope();g.getMap().then(function(b){var c=!0;b.whenReady(function(){k.$watch("bounds",function(d){if(!h(d))return a.error("[AngularJS - Leaflet] Invalid bounds"),void 0;c=!1;var e=i(d);e&&!b.getBounds().equals(e)&&b.fitBounds(e)},!0),b.on("moveend dragend zoomend",function(){c||j(k,b)})})})}}}]),angular.module("leaflet-directive").directive("markers",["$log","$rootScope","$q","leafletData","leafletHelpers","leafletMapDefaults","leafletMarkersHelpers","leafletEvents",function(a,b,c,d,e,f,g,h){return{restrict:"A",scope:!1,replace:!1,require:["leaflet","?layers"],link:function(b,f,i,j){var k=j[0],l=e,m=e.isDefined,n=e.isString,o=k.getLeafletScope(),p=o.markers,q=g.deleteMarker,r=g.addMarkerWatcher,s=g.addMarkerToGroup,t=h.bindMarkerEvents,u=g.createMarker;k.getMap().then(function(b){var e,f={};e=m(j[1])?j[1].getLayers:function(){var a=c.defer();return a.resolve(),a.promise},m(p)&&e().then(function(c){d.setMarkers(f,i.id),o.$watch("markers",function(d){for(var e in f)m(d)&&m(d[e])||(q(f[e],b,c),delete f[e]);for(var g in d)if(!m(f[g])){var h=d[g],j=u(h);if(!m(j)){a.error("[AngularJS - Leaflet] Received invalid data on the marker "+g+".");continue}if(f[g]=j,m(h.message)&&j.bindPopup(h.message),m(h.group)&&s(j,h.group,b),l.LabelPlugin.isLoaded()&&m(h.label)&&m(h.label.message)&&j.bindLabel(h.label.message,h.label.options),m(h)&&m(h.layer)){if(!n(h.layer)){a.error("[AngularJS - Leaflet] A layername must be a string");continue}if(!m(c)){a.error("[AngularJS - Leaflet] You must add layers to the directive if the markers are going to use this functionality.");continue}if(!m(c.overlays)||!m(c.overlays[h.layer])){a.error('[AngularJS - Leaflet] A marker can only be added to a layer of type "group"');continue}var k=c.overlays[h.layer];if(!(k instanceof L.LayerGroup)){a.error('[AngularJS - Leaflet] Adding a marker to an overlay needs a overlay of the type "group"');continue}k.addLayer(j),b.hasLayer(j)&&h.focus===!0&&j.openPopup()}else b.addLayer(j),h.focus===!0&&j.openPopup(),l.LabelPlugin.isLoaded()&&m(h.label)&&m(h.label.options)&&h.label.options.noHide===!0&&j.showLabel();var p=!m(i.watchMarkers)||"true"===i.watchMarkers;p&&r(j,g,o,c,b),t(j,g,h,o)}},!0)})})}}}]),angular.module("leaflet-directive").directive("paths",["$log","leafletData","leafletMapDefaults","leafletHelpers","leafletPathsHelpers","leafletEvents",function(a,b,c,d,e,f){return{restrict:"A",scope:!1,replace:!1,require:"leaflet",link:function(a,g,h,i){var j=d.isDefined,k=i.getLeafletScope(),l=k.paths,m=e.createPath,n=f.bindPathEvents,o=e.setPathOptions;i.getMap().then(function(a){var d=c.getDefaults(h.id);if(j(l)){var e={};b.setPaths(e,h.id);var f=function(b,c){var d=k.$watch("paths."+c,function(c){return j(c)?(o(b,c.type,c),void 0):(a.removeLayer(b),d(),void 0)},!0)};k.$watch("paths",function(b){for(var c in b)if(!j(e[c])){var g=b[c],h=m(c,b[c],d);j(h)&&(e[c]=h,a.addLayer(h),f(h,c)),n(h,c,g,k)}for(var i in e)j(b[i])||delete e[i]},!0)}})}}}]),angular.module("leaflet-directive").directive("controls",["$log","leafletHelpers",function(a,b){return{restrict:"A",scope:!1,replace:!1,require:"?^leaflet",link:function(a,c,d,e){if(e){var f=b.isDefined,g=e.getLeafletScope(),h=g.controls;e.getMap().then(function(a){if(f(L.Control.Draw)&&f(h.draw)){var b=new L.Control.Draw(h.draw.options);a.addControl(b)}if(f(h.custom))for(var c=0;cOpenStreetMap contributors'},path:{weight:10,opacity:1,color:"#0000ff"},center:{lat:0,lng:0,zoom:1}}}var c=a.isDefined,d=a.obtainEffectiveMapId,e={};return{getDefaults:function(a){var b=d(e,a);return e[b]},getMapCreationDefaults:function(a){var b=d(e,a),f=e[b],g={maxZoom:f.maxZoom,keyboard:f.keyboard,dragging:f.dragging,zoomControl:f.zoomControl,doubleClickZoom:f.doubleClickZoom,scrollWheelZoom:f.scrollWheelZoom,attributionControl:f.attributionControl,worldCopyJump:f.worldCopyJump,crs:f.crs};return c(f.minZoom)&&(g.minZoom=f.minZoom),c(f.zoomAnimation)&&(g.zoomAnimation=f.zoomAnimation),c(f.fadeAnimation)&&(g.fadeAnimation=f.fadeAnimation),c(f.markerZoomAnimation)&&(g.markerZoomAnimation=f.markerZoomAnimation),g},setDefaults:function(a,f){var g=b();c(a)&&(g.doubleClickZoom=c(a.doubleClickZoom)?a.doubleClickZoom:g.doubleClickZoom,g.scrollWheelZoom=c(a.scrollWheelZoom)?a.scrollWheelZoom:g.doubleClickZoom,g.zoomControl=c(a.zoomControl)?a.zoomControl:g.zoomControl,g.zoomsliderControl=c(a.zoomsliderControl)?a.zoomsliderControl:g.zoomsliderControl,g.attributionControl=c(a.attributionControl)?a.attributionControl:g.attributionControl,g.tileLayer=c(a.tileLayer)?a.tileLayer:g.tileLayer,g.zoomControlPosition=c(a.zoomControlPosition)?a.zoomControlPosition:g.zoomControlPosition,g.keyboard=c(a.keyboard)?a.keyboard:g.keyboard,g.dragging=c(a.dragging)?a.dragging:g.dragging,g.controlLayersPosition=c(a.controlLayersPosition)?a.controlLayersPosition:g.controlLayersPosition,c(a.crs)&&c(L.CRS[a.crs])&&(g.crs=L.CRS[a.crs]),c(a.tileLayerOptions)&&angular.copy(a.tileLayerOptions,g.tileLayerOptions),c(a.maxZoom)&&(g.maxZoom=a.maxZoom),c(a.minZoom)&&(g.minZoom=a.minZoom),c(a.zoomAnimation)&&(g.zoomAnimation=a.zoomAnimation),c(a.fadeAnimation)&&(g.fadeAnimation=a.fadeAnimation),c(a.markerZoomAnimation)&&(g.markerZoomAnimation=a.markerZoomAnimation),c(a.worldCopyJump)&&(g.worldCopyJump=a.worldCopyJump));var h=d(e,f);return e[h]=g,g}}}]),angular.module("leaflet-directive").factory("leafletEvents",["$rootScope","$q","$log","leafletHelpers",function(a,b,c,d){var e=d.safeApply,f=d.isDefined,g=d.isObject,h=d,i=function(){return["click","dblclick","mousedown","mouseover","mouseout","contextmenu"]},j=function(a,b,c,d){for(var e=i(),f="markers."+d,g=0;g',controller:["$scope",function(b){f=a.defer(),this.getMap=function(){return f.promise},this.getLeafletScope=function(){return b}}],link:function(a,g,h){var i=d.isDefined,j=c.setDefaults(a.defaults,h.id),k=e.genDispatchMapEvent,l=e.getAvailableMapEvents();i(h.width)&&(isNaN(h.width)?g.css("width",h.width):g.css("width",h.width+"px")),i(h.height)&&(isNaN(h.height)?g.css("height",h.height):g.css("height",h.height+"px"));var m=new L.Map(g[0],c.getMapCreationDefaults(h.id));if(f.resolve(m),i(h.center)||m.setView([j.center.lat,j.center.lng],j.center.zoom),!i(h.tiles)&&!i(h.layers)){var n=L.tileLayer(j.tileLayer,j.tileLayerOptions);n.addTo(m),b.setTiles(n)}if(i(m.zoomControl)&&i(j.zoomControlPosition)&&m.zoomControl.setPosition(j.zoomControlPosition),i(m.zoomControl)&&j.zoomControl===!1&&m.zoomControl.removeFrom(m),i(m.zoomsliderControl)&&i(j.zoomsliderControl)&&j.zoomsliderControl===!1&&m.zoomsliderControl.removeFrom(m),!i(h.eventBroadcast))for(var o="broadcast",p=0;pe.center.zoom?d.locate({setView:!0,maxZoom:b.zoom}):i(e.maxZoom)?d.locate({setView:!0,maxZoom:e.maxZoom}):d.locate({setView:!0}),void 0):(d.setView([b.lat,b.lng],b.zoom),h=!1,void 0):(a.warn("[AngularJS - Leaflet] invalid 'center'"),d.setView([e.center.lat,e.center.lng],e.center.zoom),void 0)},!0),d.on("moveend",function(){h||k(m,function(a){f&&(f.lat.assign(a,d.getCenter().lat),f.lng.assign(a,d.getCenter().lng),f.zoom.assign(a,d.getZoom()),f.autoDiscover.assign(a,!1))})}),n.autoDiscover===!0&&d.on("locationerror",function(){a.warn("[AngularJS - Leaflet] The Geolocation API is unauthorized on this page."),l(n)?d.setView([n.lat,n.lng],n.zoom):d.setView([e.center.lat,e.center.lng],e.center.zoom)})})}}}]),angular.module("leaflet-directive").directive("tiles",["$log","leafletData","leafletMapDefaults","leafletHelpers",function(a,b,c,d){return{restrict:"A",scope:!1,replace:!1,require:"leaflet",link:function(e,f,g,h){var i=d.isDefined,j=h.getLeafletScope(),k=j.tiles;return i(k)||i(k.url)?(h.getMap().then(function(a){var d,e=c.getDefaults(g.id);j.$watch("tiles",function(c){var f=e.tileLayerOptions,h=e.tileLayer;return!i(c.url)&&i(d)?(a.removeLayer(d),void 0):i(d)?i(c.url)&&i(c.options)&&!angular.equals(c.options,f)?(a.removeLayer(d),f=e.tileLayerOptions,angular.copy(c.options,f),h=c.url,d=L.tileLayer(h,f),d.addTo(a),b.setTiles(d,g.id),void 0):(i(c.url)&&d.setUrl(c.url),void 0):(i(c.options)&&angular.copy(c.options,f),i(c.url)&&(h=c.url),d=L.tileLayer(h,f),d.addTo(a),b.setTiles(d,g.id),void 0)},!0)}),void 0):(a.warn("[AngularJS - Leaflet] The 'tiles' definition doesn't have the 'url' property."),void 0)}}}]),angular.module("leaflet-directive").directive("legend",["$log","leafletHelpers",function(a,b){return{restrict:"A",scope:!1,replace:!1,require:"leaflet",link:function(c,d,e,f){var g=b.isArray,h=f.getLeafletScope(),i=h.legend;f.getMap().then(function(b){if(g(i.colors)&&g(i.labels)&&i.colors.length===i.labels.length){var c=i.legendClass?i.legendClass:"legend",d=i.position||"bottomright",e=L.control({position:d});e.onAdd=function(){for(var a=L.DomUtil.create("div",c),b=0;b'+i.labels[b]+"";return a},e.addTo(b)}else a.warn("[AngularJS - Leaflet] legend.colors and legend.labels must be set.")})}}}]),angular.module("leaflet-directive").directive("geojson",["$log","$rootScope","leafletData","leafletHelpers",function(a,b,c,d){return{restrict:"A",scope:!1,replace:!1,require:"leaflet",link:function(a,e,f,g){var h=d.safeApply,i=d.isDefined,j=g.getLeafletScope(),k={};g.getMap().then(function(a){j.$watch("geojson",function(e){if(i(k)&&a.hasLayer(k)&&a.removeLayer(k),i(e)&&i(e.data)){var f=e.resetStyleOnMouseout,g=e.onEachFeature;g||(g=function(a,c){d.LabelPlugin.isLoaded()&&i(e.label)&&c.bindLabel(a.properties.description),c.on({mouseover:function(c){h(j,function(){e.selected=a,b.$broadcast("leafletDirectiveMap.geojsonMouseover",c)})},mouseout:function(a){f&&k.resetStyle(a.target),h(j,function(){e.selected=void 0,b.$broadcast("leafletDirectiveMap.geojsonMouseout",a)})},click:function(a){h(j,function(){b.$broadcast("leafletDirectiveMap.geojsonClick",e.selected,a)})}})}),e.options={style:e.style,onEachFeature:g},k=L.geoJson(e.data,e.options),c.setGeoJSON(k),k.addTo(a)}})})}}}]),angular.module("leaflet-directive").directive("layers",["$log","$q","leafletData","leafletHelpers","leafletMapDefaults","leafletLayerHelpers",function(a,b,c,d,e,f){var g;return{restrict:"A",scope:!1,replace:!1,require:"leaflet",controller:function(){g=b.defer(),this.getLayers=function(){return g.promise}},link:function(b,h,i,j){var k=d.isDefined,l=d.isObject,m={},n=j.getLeafletScope(),o=n.layers,p=f.createLayer;j.getMap().then(function(b){var d=e.getDefaults(i.id);if(!k(o)||!k(o.baselayers)||0===Object.keys(o.baselayers).length)return a.error("[AngularJS - Leaflet] At least one baselayer has to be defined"),void 0;g.resolve(m),c.setLayers(m,i.id),m.baselayers={},m.controls={},m.controls.layers=new L.control.layers,m.controls.layers.setPosition(d.controlLayersPosition);var f=!1;for(var h in o.baselayers){var j=p(o.baselayers[h]);k(j)?(m.baselayers[h]=j,o.baselayers[h].top===!0&&(b.addLayer(m.baselayers[h]),f=!0),m.controls.layers.addBaseLayer(m.baselayers[h],o.baselayers[h].name)):delete o.baselayers[h]}var q=Object.keys(o.baselayers).length;l(o.overlays)&&(q+=Object.keys(o.overlays).length),q>1&&m.controls.layers.addTo(b),!f&&Object.keys(m.baselayers).length>0&&b.addLayer(m.baselayers[Object.keys(o.baselayers)[0]]),m.overlays={};for(h in o.overlays){var r=p(o.overlays[h]);k(r)?(m.overlays[h]=r,o.overlays[h].visible===!0&&b.addLayer(m.overlays[h]),m.controls.layers.addOverlay(m.overlays[h],o.overlays[h].name)):delete o.overlays[h]}n.$watch("layers.baselayers",function(c){for(var d in m.baselayers)k(c[d])||(m.controls.layers.removeLayer(m.baselayers[d]),b.hasLayer(m.baselayers[d])&&b.removeLayer(m.baselayers[d]),delete m.baselayers[d]);for(var e in c)if(!k(m.baselayers[e])){var f=p(c[e]);k(f)&&(m.baselayers[e]=f,c[e].top===!0&&b.addLayer(m.baselayers[e]),m.controls.layers.addBaseLayer(m.baselayers[e],c[e].name))}if(0===Object.keys(m.baselayers).length)return a.error("[AngularJS - Leaflet] At least one baselayer has to be defined"),void 0;var g=!1;for(var h in m.baselayers)if(b.hasLayer(m.baselayers[h])){g=!0;break}g||b.addLayer(m.baselayers[Object.keys(o.baselayers)[0]])},!0),n.$watch("layers.overlays",function(a){for(var c in m.overlays)k(a[c])||(m.controls.layers.removeLayer(m.overlays[c]),b.hasLayer(m.overlays[c])&&b.removeLayer(m.overlays[c]),delete m.overlays[c]);for(var d in a){if(!k(m.overlays[d])){var e=p(a[d]);k(e)&&(m.overlays[d]=e,m.controls.layers.addOverlay(m.overlays[d],a[d].name),a[d].visible===!0&&b.addLayer(m.overlays[d]))}a[d].visible&&!b.hasLayer(m.overlays[d])?b.addLayer(m.overlays[d]):a[d].visible===!1&&b.hasLayer(m.overlays[d])&&b.removeLayer(m.overlays[d])}},!0)})}}}]),angular.module("leaflet-directive").directive("bounds",["$log","leafletHelpers","leafletBoundsHelpers",function(a,b,c){return{restrict:"A",scope:!1,replace:!1,require:"leaflet",link:function(d,e,f,g){var h=b.isDefined,i=c.createLeafletBounds,j=c.updateBoundsInScope,k=g.getLeafletScope();g.getMap().then(function(b){var c=!0;b.whenReady(function(){k.$watch("bounds",function(d){if(!h(d))return a.error("[AngularJS - Leaflet] Invalid bounds"),void 0;c=!1;var e=i(d);e&&!b.getBounds().equals(e)&&b.fitBounds(e)},!0),b.on("moveend dragend zoomend",function(){c||j(k,b)})})})}}}]),angular.module("leaflet-directive").directive("markers",["$log","$rootScope","$q","leafletData","leafletHelpers","leafletMapDefaults","leafletMarkersHelpers","leafletEvents",function(a,b,c,d,e,f,g,h){return{restrict:"A",scope:!1,replace:!1,require:["leaflet","?layers"],link:function(b,f,i,j){var k=j[0],l=e,m=e.isDefined,n=e.isString,o=k.getLeafletScope(),p=o.markers,q=g.deleteMarker,r=g.addMarkerWatcher,s=g.addMarkerToGroup,t=h.bindMarkerEvents,u=g.createMarker;k.getMap().then(function(b){var e,f={};e=m(j[1])?j[1].getLayers:function(){var a=c.defer();return a.resolve(),a.promise},m(p)&&e().then(function(c){d.setMarkers(f,i.id),o.$watch("markers",function(d){for(var e in f)m(d)&&m(d[e])||(q(f[e],b,c),delete f[e]);for(var g in d)if(!m(f[g])){var h=d[g],j=u(h);if(!m(j)){a.error("[AngularJS - Leaflet] Received invalid data on the marker "+g+".");continue}if(f[g]=j,m(h.message)&&j.bindPopup(h.message),m(h.group)&&s(j,h.group,b),l.LabelPlugin.isLoaded()&&m(h.label)&&m(h.label.message)&&j.bindLabel(h.label.message,h.label.options),m(h)&&m(h.layer)){if(!n(h.layer)){a.error("[AngularJS - Leaflet] A layername must be a string");continue}if(!m(c)){a.error("[AngularJS - Leaflet] You must add layers to the directive if the markers are going to use this functionality.");continue}if(!m(c.overlays)||!m(c.overlays[h.layer])){a.error('[AngularJS - Leaflet] A marker can only be added to a layer of type "group"');continue}var k=c.overlays[h.layer];if(!(k instanceof L.LayerGroup)){a.error('[AngularJS - Leaflet] Adding a marker to an overlay needs a overlay of the type "group"');continue}k.addLayer(j),b.hasLayer(j)&&h.focus===!0&&j.openPopup()}else b.addLayer(j),h.focus===!0&&j.openPopup(),l.LabelPlugin.isLoaded()&&m(h.label)&&m(h.label.options)&&h.label.options.noHide===!0&&j.showLabel();var p=!m(i.watchMarkers)||"true"===i.watchMarkers;p&&r(j,g,o,c,b),t(j,g,h,o)}},!0)})})}}}]),angular.module("leaflet-directive").directive("paths",["$log","leafletData","leafletMapDefaults","leafletHelpers","leafletPathsHelpers","leafletEvents",function(a,b,c,d,e,f){return{restrict:"A",scope:!1,replace:!1,require:"leaflet",link:function(a,g,h,i){var j=d.isDefined,k=i.getLeafletScope(),l=k.paths,m=e.createPath,n=f.bindPathEvents,o=e.setPathOptions;i.getMap().then(function(a){var d=c.getDefaults(h.id);if(j(l)){var e={};b.setPaths(e,h.id);var f=function(b,c){var d=k.$watch("paths."+c,function(c){return j(c)?(o(b,c.type,c),void 0):(a.removeLayer(b),d(),void 0)},!0)};k.$watch("paths",function(b){for(var c in b)if(!j(e[c])){var g=b[c],h=m(c,b[c],d);j(h)&&(e[c]=h,a.addLayer(h),f(h,c)),n(h,c,g,k)}for(var i in e)j(b[i])||delete e[i]},!0)}})}}}]),angular.module("leaflet-directive").directive("controls",["$log","leafletHelpers",function(a,b){return{restrict:"A",scope:!1,replace:!1,require:"?^leaflet",link:function(a,c,d,e){if(e){var f=b.isDefined,g=e.getLeafletScope(),h=g.controls;e.getMap().then(function(a){if(f(L.Control.Draw)&&f(h.draw)){var b=new L.Control.Draw(h.draw.options);a.addControl(b)}if(f(h.custom))for(var c=0;cOpenStreetMap contributors'},path:{weight:10,opacity:1,color:"#0000ff"},center:{lat:0,lng:0,zoom:1}}}var c=a.isDefined,d=a.obtainEffectiveMapId,e={};return{getDefaults:function(a){var b=d(e,a);return e[b]},getMapCreationDefaults:function(a){var b=d(e,a),f=e[b],g={maxZoom:f.maxZoom,keyboard:f.keyboard,dragging:f.dragging,zoomControl:f.zoomControl,doubleClickZoom:f.doubleClickZoom,scrollWheelZoom:f.scrollWheelZoom,attributionControl:f.attributionControl,worldCopyJump:f.worldCopyJump,crs:f.crs};return c(f.minZoom)&&(g.minZoom=f.minZoom),c(f.zoomAnimation)&&(g.zoomAnimation=f.zoomAnimation),c(f.fadeAnimation)&&(g.fadeAnimation=f.fadeAnimation),c(f.markerZoomAnimation)&&(g.markerZoomAnimation=f.markerZoomAnimation),g},setDefaults:function(a,f){var g=b();c(a)&&(g.doubleClickZoom=c(a.doubleClickZoom)?a.doubleClickZoom:g.doubleClickZoom,g.scrollWheelZoom=c(a.scrollWheelZoom)?a.scrollWheelZoom:g.doubleClickZoom,g.zoomControl=c(a.zoomControl)?a.zoomControl:g.zoomControl,g.zoomsliderControl=c(a.zoomsliderControl)?a.zoomsliderControl:g.zoomsliderControl,g.attributionControl=c(a.attributionControl)?a.attributionControl:g.attributionControl,g.tileLayer=c(a.tileLayer)?a.tileLayer:g.tileLayer,g.zoomControlPosition=c(a.zoomControlPosition)?a.zoomControlPosition:g.zoomControlPosition,g.keyboard=c(a.keyboard)?a.keyboard:g.keyboard,g.dragging=c(a.dragging)?a.dragging:g.dragging,g.controlLayersPosition=c(a.controlLayersPosition)?a.controlLayersPosition:g.controlLayersPosition,c(a.crs)&&c(L.CRS[a.crs])&&(g.crs=L.CRS[a.crs]),c(a.tileLayerOptions)&&angular.copy(a.tileLayerOptions,g.tileLayerOptions),c(a.maxZoom)&&(g.maxZoom=a.maxZoom),c(a.minZoom)&&(g.minZoom=a.minZoom),c(a.zoomAnimation)&&(g.zoomAnimation=a.zoomAnimation),c(a.fadeAnimation)&&(g.fadeAnimation=a.fadeAnimation),c(a.markerZoomAnimation)&&(g.markerZoomAnimation=a.markerZoomAnimation),c(a.worldCopyJump)&&(g.worldCopyJump=a.worldCopyJump));var h=d(e,f);return e[h]=g,g}}}]),angular.module("leaflet-directive").factory("leafletEvents",["$rootScope","$q","$log","leafletHelpers",function(a,b,c,d){var e=d.safeApply,f=d.isDefined,g=d.isObject,h=d,i=function(){return["click","dblclick","mousedown","mouseover","mouseout","contextmenu"]},j=function(a,b,c,d){for(var e=i(),f="markers."+d,g=0;gThis is a map with two hidden marker groups
-

diff --git a/examples/markers-update-example.html b/examples/markers-update-example.html index add75c35..9fbba062 100644 --- a/examples/markers-update-example.html +++ b/examples/markers-update-example.html @@ -7,6 +7,8 @@ + + + - - - - -
- - null value - not a string -
- Draggable: - Yes - No - Not a boolean value - null value -
- Focus: - Yes - No - Not a boolean value - null value -
- Icon: - Default - Other (Leaflet Icon) - Red (AwesomeMarker Icon) - Green (AwesomeMarker Icon) - Not a icon - null value +
+
+

Dynamic update marker properties

+
+
+

Marker position

+ + + +

Popup text

+
+ + +
+

+ Popup message: +

Draggable

+
+ + +
+

Icon

+
+ + + +
+
+
+
+ +
+
+
diff --git a/src/services/leafletHelpers.js b/src/services/leafletHelpers.js index b83ffab3..9bd45aa6 100644 --- a/src/services/leafletHelpers.js +++ b/src/services/leafletHelpers.js @@ -110,8 +110,8 @@ angular.module("leaflet-directive").factory('leafletHelpers', function ($q, $log AwesomeMarkersPlugin: { isLoaded: function() { - if (L.AwesomeMarkers !== undefined) { - return (L.AwesomeMarkers.Icon !== undefined); + if (angular.isDefined(L.AwesomeMarkers) && angular.isDefined(L.AwesomeMarkers.Icon)) { + return true; } else { return false; } diff --git a/src/services/leafletMarkersHelpers.js b/src/services/leafletMarkersHelpers.js index 7e72e7d2..3e40364d 100644 --- a/src/services/leafletMarkersHelpers.js +++ b/src/services/leafletMarkersHelpers.js @@ -2,6 +2,7 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($ var isDefined = leafletHelpers.isDefined, MarkerClusterPlugin = leafletHelpers.MarkerClusterPlugin, + AwesomeMarkersPlugin = leafletHelpers.AwesomeMarkersPlugin, Helpers = leafletHelpers, isString = leafletHelpers.isString, isNumber = leafletHelpers.isNumber, @@ -9,6 +10,14 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($ groups = {}; var createLeafletIcon = function(iconData) { + if (isDefined(iconData) && isDefined(iconData.type) && iconData.type === 'awesomeMarker') { + if (!AwesomeMarkersPlugin.isLoaded()) { + $log.error('[AngularJS - Leaflet] The AwesomeMarkers Plugin is not loaded.'); + } + + return new L.AwesomeMarkers.icon(iconData); + } + if (isDefined(iconData) && isDefined(iconData.type) && iconData.type === 'div') { return new L.divIcon(iconData); } @@ -216,7 +225,7 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($ } // There is some text in the popup, so we must show the text or update existing - if (isString(markerData) && !isString(oldMarkerData)) { + if (isString(markerData.message) && !isString(oldMarkerData.message)) { // There was no message before so we create it marker.bindPopup(markerData.message); if (markerData.focus === true) { @@ -225,7 +234,7 @@ angular.module("leaflet-directive").factory('leafletMarkersHelpers', function ($ } } - if (isString(markerData) && isString(oldMarkerData) && markerData.message !== oldMarkerData.message) { + if (isString(markerData.message) && isString(oldMarkerData.message) && markerData.message !== oldMarkerData.message) { // There was a different previous message so we update it marker.setPopupContent(markerData.message); }