Two (or multiple) GeoJSON Layers in angular leaflet directive

Question

How to add two or more GeoJson Layers to the map using angular-leaflet-directive?

I am able to draw features from one service (poly lines) using 'geojson' directive as shown in this example.

But I have another GeoJson web service (circles) that I need to draw on the map in the same way I did the first one. Can you guide me please?

Is there an example for this? I looked but couldn't fine.

I also asked this question on github issues for the project but haven't gotten any answer yet.

Just to be clear, the question is not about regular LeafletJS, but about the angular-leaflet-directive.

Answer 1

We were able to get around this problem by just opening up the map object inside the controller by injecting the lealfletData service and then:

angular.module('myModule').controller('MyController', ['$scope', `leafletData`,
    function($scope, leafletData) {
            leafletData.getMap().then(function(map) {
               // do something with leaflet map object here.. 
            });
    }
]);

For reference look at the Project's GitHub, and under How to Use section look at 4th code example.

Answer 2

I was able to add in multiple GeoJSON layers, but had to tweak the directive's code. It worked for my purpose. Please check if this works for your project as well.

I noticed that it always displayed only the last GeoJSON layer that was added. I debugged and found that it was removing the previous layer and then adding in the latest data. I have not dug in further and so have not submitted my mod to the repository yet because I have not verified as to what else the repercussions might be (i.e, why GeoJSON data are not maintained in there as a LayerGroup or an array of Layers).

I removed lines 438, 439, 440 in the file angular-leaflet-directive.js (Distribution: 0.7.6):

if (isDefined(leafletGeoJSON) && map.hasLayer(leafletGeoJSON)) {
     map.removeLayer(leafletGeoJSON);
}

That allowed me to have multiple Layers.

Answer 3

My preference for this (without modifying the core library) was as follows:

• Create a new factory for handling GeoJSON in the map
• Setup a hash of layer IDs within this controller
• Allow assignment of style handling callbacks for each layer
• Implement an addLayer method which will add layer IDs to each geoJSON object passed in
• Add a single style handling callback which reads the layer ID of each feature and runs the appropriate style callback

A gist of the service code can be found here: https://gist.github.com/pospi/85c31530c4a93cf091ce