diff --git a/dist/angular-mapbox.js b/dist/angular-mapbox.js index dbe31f2..7f0477c 100644 --- a/dist/angular-mapbox.js +++ b/dist/angular-mapbox.js @@ -195,7 +195,7 @@ (function() { 'use strict'; - angular.module('angular-mapbox').directive('marker', function($compile, mapboxService) { + angular.module('angular-mapbox').directive('marker', function($compile, $timeout, mapboxService) { var _colors = { navy: '#001f3f', blue: '#0074d9', @@ -221,117 +221,91 @@ require: '^mapbox', transclude: true, scope: true, - link: function(scope, element, attrs, controller, transclude) { - var opts = { draggable: attrs.draggable !== undefined }; - var style = setStyleOptions(attrs); - var marker; - - function setStyleOptions(attrs, defaultOpts) { - var opts = defaultOpts || {}; - if(attrs.size) { - opts['marker-size'] = attrs.size; - } - if(attrs.color) { - if(attrs.color[0] === '#') { - opts['marker-color'] = attrs.color; - } else { - opts['marker-color'] = _colors[attrs.color] || attrs.color; + link: link + }; + + function link(scope, element, attrs, controller, transclude) { + var _marker, _opts, _style; + + _opts = { draggable: attrs.draggable !== undefined }; + _style = setStyleOptions(attrs); + + controller.getMap().then(function(map) { + transclude(scope, function(transcludedContent) { + var popupContentElement; + if(transcludedContent) { + popupContentElement = document.createElement('span'); + for(var i = 0; i < transcludedContent.length; i++) { + popupContentElement.appendChild(transcludedContent[i]); } } - if(attrs.icon) { - opts['marker-symbol'] = attrs.icon; - } - return opts; - } - var addMarker = function(map, latlng, popupContent, opts, style) { - opts = opts || {}; + if(attrs.currentLocation !== undefined) { + _style = setStyleOptions(_style, { 'marker-color': '#000', 'marker-symbol': 'star' }); + _opts.excludeFromClustering = true; - var marker = L.mapbox.marker.style({ properties: style }, latlng); - if(popupContent && popupContent.length > 0) { - marker.bindPopup(popupContent); - } + map.on('locationfound', function(e) { + _marker = addMarker(scope, map, [e.latlng.lat, e.latlng.lng], popupContentElement, _opts, _style); + }); - if(mapboxService.getOptionsForMap(map).clusterMarkers && opts.excludeFromClustering !== true) { - controller.$scope.clusterGroup.addLayer(marker); + map.locate(); } else { - marker.addTo(map); + _marker = addMarker(scope, map, [attrs.lat, attrs.lng], popupContentElement, _opts, _style); } + }); - // this needs to come after being added to map because the L.mapbox.marker.style() factory - // does not let us pass other opts (eg, draggable) in - if(opts.draggable) { - marker.dragging.enable(); + element.bind('$destroy', function() { + if(mapboxService.getOptionsForMap(map).clusterMarkers) { + scope.clusterGroup.removeLayer(_marker); + } else { + map.removeLayer(_marker); } + }); + }); + } - mapboxService.addMarker(marker); - - return marker; - }; + function setStyleOptions(attrs, defaultOpts) { + var opts = defaultOpts || {}; + if(attrs.size) { + opts['marker-size'] = attrs.size; + } + if(attrs.color) { + if(attrs.color[0] === '#') { + opts['marker-color'] = attrs.color; + } else { + opts['marker-color'] = _colors[attrs.color] || attrs.color; + } + } + if(attrs.icon) { + opts['marker-symbol'] = attrs.icon; + } + return opts; + } - var addCurrentLocation = function(map, popupContent, opts, style) { - style = setStyleOptions(style, { 'marker-color': '#000', 'marker-symbol': 'star' }); - opts.excludeFromClustering = true; + function addMarker(scope, map, latlng, popupContent, opts, style) { + opts = opts || {}; - map.on('locationfound', function(e) { - marker = addMarker(map, [e.latlng.lat, e.latlng.lng], null, opts, style); - }); + var marker = L.mapbox.marker.style({ properties: style }, latlng); + if(popupContent) { + marker.bindPopup(popupContent); + } - map.locate(); - }; + if(mapboxService.getOptionsForMap(map).clusterMarkers && opts.excludeFromClustering !== true) { + scope.clusterGroup.addLayer(marker); + } else { + marker.addTo(map); + } - controller.getMap().then(function(map) { - map.on('popupopen', function() { - // ensure that popups are compiled - var popup = angular.element(document.getElementsByClassName('leaflet-popup-content')); - $compile(popup)(scope); - if(!scope.$$phase) { - scope.$digest(); - } - }); + // this needs to come after being added to map because the L.mapbox.marker.style() factory + // does not let us pass other opts (eg, draggable) in + if(opts.draggable) { + marker.dragging.enable(); + } - setTimeout(function() { - // there's got to be a better way to programmatically access transcluded content - var popupHTML = ''; - var transcluded = transclude(scope, function() {}); - for(var i = 0; i < transcluded.length; i++) { - if(transcluded[i].outerHTML !== undefined) { - popupHTML += transcluded[i].outerHTML; - } - } + mapboxService.addMarker(marker); - if(attrs.currentLocation !== undefined) { - addCurrentLocation(map, null, opts, style); - } else { - if(popupHTML) { - var popup = angular.element(popupHTML); - $compile(popup)(scope); - if(!scope.$$phase) { - scope.$digest(); - } - - var newPopupHTML = ''; - for(i = 0; i < popup.length; i++) { - newPopupHTML += popup[i].outerHTML; - } - - marker = addMarker(map, [attrs.lat, attrs.lng], newPopupHTML, opts, style); - } else { - marker = addMarker(map, [attrs.lat, attrs.lng], null, opts, style); - } - - element.bind('$destroy', function() { - if(mapboxService.getOptionsForMap(map).clusterMarkers) { - controller.$scope.clusterGroup.removeLayer(marker); - } else { - map.removeLayer(marker); - } - }); - } - }, 0); - }); - } - }; + return marker; + } }); })(); diff --git a/dist/angular-mapbox.min.js b/dist/angular-mapbox.min.js index 4220456..c129353 100644 --- a/dist/angular-mapbox.min.js +++ b/dist/angular-mapbox.min.js @@ -1 +1 @@ -!function(){"use strict";angular.module("angular-mapbox",[])}(),function(){"use strict";function mapboxService(){function init(opts){if(!opts.accessToken)throw"MissingMapboxApiToken";L.mapbox.accessToken=opts.accessToken}function addMapInstance(map,mapOptions){mapOptions=mapOptions||{},_mapInstances.push(map),_mapOptions.push(mapOptions),_markers.push([])}function getMapInstances(){return _mapInstances}function addMarker(marker){var map=getMapInstances()[0];_markers[0].push(marker);var opts=getOptionsForMap(map);opts.scaleToFit&&fitMapToMarkers(map)}function debounce(func,wait,immediate){var timeout;return function(){var context=this,args=arguments,later=function(){timeout=null,immediate||func.apply(context,args)},callNow=immediate&&!timeout;clearTimeout(timeout),timeout=setTimeout(later,wait),callNow&&func.apply(context,args)}}function getMarkers(){return _markers[0]}function getOptionsForMap(){return _mapOptions[0]}var _mapInstances=[],_markers=[],_mapOptions=[],fitMapToMarkers=debounce(function(){var map=_mapInstances[0],group=new L.featureGroup(getMarkers());map.fitBounds(group.getBounds())},0),service={init:init,getMapInstances:getMapInstances,addMapInstance:addMapInstance,getMarkers:getMarkers,addMarker:addMarker,fitMapToMarkers:fitMapToMarkers,getOptionsForMap:getOptionsForMap};return service}angular.module("angular-mapbox").service("mapboxService",mapboxService)}(),function(){"use strict";angular.module("angular-mapbox").directive("featureLayer",function(){return{restrict:"E",require:"^mapbox",link:function(scope,element,attrs,controller){attrs.data?controller.getMap().then(function(map){var geojsonObject=scope.$eval(attrs.data),featureLayer=L.mapbox.featureLayer(geojsonObject).addTo(map);controller.$scope.featureLayers.push(featureLayer)}):attrs.url&&controller.getMap().then(function(map){var featureLayer=L.mapbox.featureLayer().addTo(map);featureLayer.loadURL(attrs.url),controller.$scope.featureLayers.push(featureLayer)})}}})}(),function(){"use strict";angular.module("angular-mapbox").directive("mapbox",["$compile","$q","mapboxService",function($compile,$q,mapboxService){var _mapboxMap;return{restrict:"E",transclude:!0,scope:!0,replace:!0,link:function(scope,element,attrs){scope.map=L.mapbox.map(element[0],attrs.mapId),_mapboxMap.resolve(scope.map);var mapOptions={clusterMarkers:void 0!==attrs.clusterMarkers,scaleToFit:void 0!==attrs.scaleToFit};mapboxService.addMapInstance(scope.map,mapOptions);var mapWidth=attrs.width||500,mapHeight=attrs.height||500;element.css("width",mapWidth+"px"),element.css("height",mapHeight+"px");var zoom=attrs.zoom||12;attrs.lat&&attrs.lng&&scope.map.setView([attrs.lat,attrs.lng],zoom),attrs.onReposition&&scope.map.on("dragend",function(){scope[attrs.onReposition](scope.map.getBounds())}),attrs.onZoom&&scope.map.on("zoomend",function(){scope[attrs.onZoom](scope.map.getBounds())})},template:'
',controller:["$scope","mapboxService",function($scope,mapboxService){$scope.markers=mapboxService.getMarkers(),$scope.featureLayers=[],_mapboxMap=$q.defer(),$scope.getMap=this.getMap=function(){return _mapboxMap.promise},L.MarkerClusterGroup&&($scope.clusterGroup=new L.MarkerClusterGroup,this.getMap().then(function(map){map.addLayer($scope.clusterGroup)})),this.$scope=$scope}]}}])}(),function(){"use strict";angular.module("angular-mapbox").directive("marker",["$compile","mapboxService",function($compile,mapboxService){var _colors={navy:"#001f3f",blue:"#0074d9",aqua:"#7fdbff",teal:"#39cccc",olive:"#3d9970",green:"#2ecc40",lime:"#01ff70",yellow:"#ffdc00",orange:"#ff851b",red:"#ff4136",fuchsia:"#f012be",purple:"#b10dc9",maroon:"#85144b",white:"white",silver:"#dddddd",gray:"#aaaaaa",black:"#111111"};return{restrict:"E",require:"^mapbox",transclude:!0,scope:!0,link:function(scope,element,attrs,controller,transclude){function setStyleOptions(attrs,defaultOpts){var opts=defaultOpts||{};return attrs.size&&(opts["marker-size"]=attrs.size),attrs.color&&(opts["marker-color"]="#"===attrs.color[0]?attrs.color:_colors[attrs.color]||attrs.color),attrs.icon&&(opts["marker-symbol"]=attrs.icon),opts}var marker,opts={draggable:void 0!==attrs.draggable},style=setStyleOptions(attrs),addMarker=function(map,latlng,popupContent,opts,style){opts=opts||{};var marker=L.mapbox.marker.style({properties:style},latlng);return popupContent&&popupContent.length>0&&marker.bindPopup(popupContent),mapboxService.getOptionsForMap(map).clusterMarkers&&opts.excludeFromClustering!==!0?controller.$scope.clusterGroup.addLayer(marker):marker.addTo(map),opts.draggable&&marker.dragging.enable(),mapboxService.addMarker(marker),marker},addCurrentLocation=function(map,popupContent,opts,style){style=setStyleOptions(style,{"marker-color":"#000","marker-symbol":"star"}),opts.excludeFromClustering=!0,map.on("locationfound",function(e){marker=addMarker(map,[e.latlng.lat,e.latlng.lng],null,opts,style)}),map.locate()};controller.getMap().then(function(map){map.on("popupopen",function(){var popup=angular.element(document.getElementsByClassName("leaflet-popup-content"));$compile(popup)(scope),scope.$$phase||scope.$digest()}),setTimeout(function(){for(var popupHTML="",transcluded=transclude(scope,function(){}),i=0;i',controller:["$scope","mapboxService",function($scope,mapboxService){$scope.markers=mapboxService.getMarkers(),$scope.featureLayers=[],_mapboxMap=$q.defer(),$scope.getMap=this.getMap=function(){return _mapboxMap.promise},L.MarkerClusterGroup&&($scope.clusterGroup=new L.MarkerClusterGroup,this.getMap().then(function(map){map.addLayer($scope.clusterGroup)})),this.$scope=$scope}]}}])}(),function(){"use strict";angular.module("angular-mapbox").directive("marker",["$compile","$timeout","mapboxService",function($compile,$timeout,mapboxService){function link(scope,element,attrs,controller,transclude){var _marker,_opts,_style;_opts={draggable:void 0!==attrs.draggable},_style=setStyleOptions(attrs),controller.getMap().then(function(map){transclude(scope,function(transcludedContent){var popupContentElement;if(transcludedContent){popupContentElement=document.createElement("span");for(var i=0;i 0) { - marker.bindPopup(popupContent); - } + map.on('locationfound', function(e) { + _marker = addMarker(scope, map, [e.latlng.lat, e.latlng.lng], popupContentElement, _opts, _style); + }); - if(mapboxService.getOptionsForMap(map).clusterMarkers && opts.excludeFromClustering !== true) { - controller.$scope.clusterGroup.addLayer(marker); + map.locate(); } else { - marker.addTo(map); + _marker = addMarker(scope, map, [attrs.lat, attrs.lng], popupContentElement, _opts, _style); } + }); - // this needs to come after being added to map because the L.mapbox.marker.style() factory - // does not let us pass other opts (eg, draggable) in - if(opts.draggable) { - marker.dragging.enable(); + element.bind('$destroy', function() { + if(mapboxService.getOptionsForMap(map).clusterMarkers) { + scope.clusterGroup.removeLayer(_marker); + } else { + map.removeLayer(_marker); } + }); + }); + } - mapboxService.addMarker(marker); + function setStyleOptions(attrs, defaultOpts) { + var opts = defaultOpts || {}; + if(attrs.size) { + opts['marker-size'] = attrs.size; + } + if(attrs.color) { + if(attrs.color[0] === '#') { + opts['marker-color'] = attrs.color; + } else { + opts['marker-color'] = _colors[attrs.color] || attrs.color; + } + } + if(attrs.icon) { + opts['marker-symbol'] = attrs.icon; + } + return opts; + } - return marker; - }; + function addMarker(scope, map, latlng, popupContent, opts, style) { + opts = opts || {}; - var addCurrentLocation = function(map, popupContent, opts, style) { - style = setStyleOptions(style, { 'marker-color': '#000', 'marker-symbol': 'star' }); - opts.excludeFromClustering = true; + var marker = L.mapbox.marker.style({ properties: style }, latlng); + if(popupContent) { + marker.bindPopup(popupContent); + } - map.on('locationfound', function(e) { - marker = addMarker(map, [e.latlng.lat, e.latlng.lng], null, opts, style); - }); + if(mapboxService.getOptionsForMap(map).clusterMarkers && opts.excludeFromClustering !== true) { + scope.clusterGroup.addLayer(marker); + } else { + marker.addTo(map); + } - map.locate(); - }; + // this needs to come after being added to map because the L.mapbox.marker.style() factory + // does not let us pass other opts (eg, draggable) in + if(opts.draggable) { + marker.dragging.enable(); + } - controller.getMap().then(function(map) { - map.on('popupopen', function() { - // ensure that popups are compiled - var popup = angular.element(document.getElementsByClassName('leaflet-popup-content')); - $compile(popup)(scope); - if(!scope.$$phase) { - scope.$digest(); - } - }); - - setTimeout(function() { - // there's got to be a better way to programmatically access transcluded content - var popupHTML = ''; - var transcluded = transclude(scope, function() {}); - for(var i = 0; i < transcluded.length; i++) { - if(transcluded[i].outerHTML !== undefined) { - popupHTML += transcluded[i].outerHTML; - } - } + mapboxService.addMarker(marker); - if(attrs.currentLocation !== undefined) { - addCurrentLocation(map, null, opts, style); - } else { - if(popupHTML) { - var popup = angular.element(popupHTML); - $compile(popup)(scope); - if(!scope.$$phase) { - scope.$digest(); - } - - var newPopupHTML = ''; - for(i = 0; i < popup.length; i++) { - newPopupHTML += popup[i].outerHTML; - } - - marker = addMarker(map, [attrs.lat, attrs.lng], newPopupHTML, opts, style); - } else { - marker = addMarker(map, [attrs.lat, attrs.lng], null, opts, style); - } - - element.bind('$destroy', function() { - if(mapboxService.getOptionsForMap(map).clusterMarkers) { - controller.$scope.clusterGroup.removeLayer(marker); - } else { - map.removeLayer(marker); - } - }); - } - }, 0); - }); - } - }; + return marker; + } }); })();