angular-mapbox
angular-mapbox copied to clipboard
Binding geoJson to scope
Since currently you can only pass in a string, and I had to be able to dynamically change my markers...
(function() {
'use strict';
angular.module('angular-mapbox').directive('featureLayer', function() {
return {
restrict: 'E',
require: '^mapbox',
scope: {
'mapData': '='
},
link: function(scope, element, attrs, controller) {
controller.getMap().then(function(map) {
var featureLayer = L.mapbox.featureLayer().addTo(map);
featureLayer.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
marker.setIcon(L.icon(feature.properties.icon));
});
scope.$watch('mapData', function(data) {
if(data) {
featureLayer.setGeoJSON(data);
}
});
});
}
};
});
})();
Example in jade
mapbox#map-container(map-id="XXXX",zoom="18",trackResize="true",height="{{ mapHeight }}",width="100%")
feature-layer(map-data="$parent.mappedVenues")