angular-mapbox icon indicating copy to clipboard operation
angular-mapbox copied to clipboard

Binding geoJson to scope

Open ThomasHambach opened this issue 9 years ago • 0 comments

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")

ThomasHambach avatar May 07 '15 07:05 ThomasHambach