Skip to content

Binding geoJson to scope #19

@ThomasHambach

Description

@ThomasHambach

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions