Angular-Leaflet-Directive layers

Question

I’m building a project that makes use of clickable markers and shapes on a floor plan.

<leaflet layers="layers" markers="markers" ></leaflet>

The markers are going well and seem pretty straightforward…

$scope.markers = {};
lodash.each(data.markers, function(marker, i) {
    $scope.markers[marker.name] = {
        lat : device.map_location[0],
        lng : device.map_location[1],
    };
});
$scope.$on('leafletDirectiveMarker.click', function (e, args) {
    $scope.selected_marker = $scope.markers[args.modelName];
});

But the layers don’t seem to work anything like this. I haven’t had any luck with code that adds layers to $scope.layers (a la typical Angular code). The only thing that works is this un-Angular mess…

$scope.layers = {
    overlays: {
        spaces: {
            name: 'Spaces',
            type: 'group',
        },
    }
};
leafletData.getLayers().then(function(layers) {
    lodash.each(data.spaces, function(space, i) {
        layers.overlays.spaces.addLayer(L.geoJson({
            type: 'Feature',
            geometry: {
                type: "Polygon",
                coordinates: [space.map_area]
            },
        }));
    });
});

Is there a better/smarter way to add drawn items to a map? And how can I bind click events to layers? Or are shapes in Leaflet just dumb, non-interactive decorations?

Eric_WVGG · Answer 1 · 2015-10-27T14:27:21.740

Okay, the answer is that there’s a “geojson” parameter. Layers are for bitmaps (I guess?), Geojsons are for vectors.

<leaflet geojson="vector_shapes" markers="markers" ></leaflet>

$scope.vector_shapes = {
    data: {
        "type": "FeatureCollection",
        "features": [],
    },
    style: {
        fillColor: "green", // etc.
    }
};

lodash.each(spaces, function(space, i) {
    $scope.vector_shapes.data.features.push({
        type        : "Feature",
        id          : space.id,
        properties  : {
            name    : space.name,
        },
        geometry    : {
            type    : "Polygon",
            coordinates : [space.map_area],
        }
    });
});

Still unsure if "features" can be made clickable, but I’ll keep digging or open a separate issue for that.

[edit] They are, they’re just not documented anywhere.

$scope.$on('leafletDirectiveGeoJson.click', function(e, args) {
    console.log('clicked shape');
    console.log(e);
    console.log(args);
});

Angular-Leaflet-Directive layers

1 Answers1