clustering geojson markers

[nmccready]

From @jessertaylor on May 6, 2015 10:13

Hi,

Cannot find an example of clustering geojson markers, is it possible in this directive? (I know how to do it using L.geoJson etc)

@nmccready - I know you use geojson a lot, have you done this?

Thanks

Copied from original issue: tombatossals/angular-leaflet-directive#744

[nmccready]

I have not done clustering on it. But I am sure it is similar to this #294

[nmccready]

From @jessertaylor on May 6, 2015 13:35

This is how I'm doing it at the moment, it is no different to doing it vanilla leaflet (except the helper)

    function addGeoJsonLayerWithClustering(data) {
        var markers = L.markerClusterGroup();
        var geoJsonLayer = L.geoJson(data, {
            onEachFeature: function (feature, layer) {
                layer.bindPopup(feature.properties.title);
            }
        });
        markers.addLayer(geoJsonLayer);
        leafletData.getMap().then(function(map) {
            map.addLayer(markers);
            map.fitBounds(markers.getBounds());
        });
    }

[nmccready]

I am actually in the middle of making some geojson directive changes to its event setup. I could try and get to this next. Can you out line a clean API (config side) that you'd like to see and we could try to implement it.

I am pretty busy with work right now so it might be a lil while till I get to this.

[nmccready]

From @jessertaylor on May 7, 2015 10:29

Great - I was going to have a look myself but just using some work arounds at the moment.

I'm not sure, it only needs to be on or off at the moment so

vm.geojson = {
data: data,
clustering: true
}

There could be more options for a geojson feature Point (and others) like there is for normal markers, eg getMessageScope, getLabelScope, compileMessage, message etc.

I don't think this is possible through the current API, looking at the source.

Not quite sure how this would look though.

[nmccready]

From @kylebradshaw on June 1, 2015 15:22

I am about to investigate utilizing geoJSON in a markerCluster. I had previously built a solution with Mapbox but I'm wondering how far you were able to get @jessertaylor ?

Is it possible to use the angular directive with geoJSON data in a markercluster?

[nmccready]

From @jessertaylor on June 1, 2015 15:27

It is, but only the native leaflet way like I posted - at the moment for me having pretty code that fits snugly into the directive isn't my main worry, but it would be nice to have it fully angulared.

Being able to specify the iconCreateFunction when creating the cluster group via the future API would also be awesome.

[nmccready]

From @sajanojha on June 1, 2015 21:27

I also have the same issue. I am stuck clustering my GeoJson data. I tried the way @jessertaylor posted but still no luck. Please do let me know a good solution.

[nmccready]

From @jessertaylor on June 2, 2015 8:56

@sajanojha I've got it working fine - post your code in a plunkr and i'll see if I can help.

[nmccready]

From @sajanojha on June 2, 2015 11:6

Thanks, I am still new to angular. My code snippet is here. I can easily get icons on the map but still stuck how to cluster them. http://plnkr.co/edit/pd1cAReTGhD5WhvdhBUN?p=preview It still does not work here at Plunkr (I have too many dependencies to include) Thanks @jessertaylor

[nmccready]

From @jessertaylor on June 2, 2015 13:22

Forget using the API to add the geojson.

It's like this

 $http.get("http://localhost:5000/ep/getEntities?conceptID=45697&pagesize=10&pageindex=1&partof=0&locale=it").success(function(data, status) {
addGeoJsonLayerWithClustering(data);
});

[nmccready]

From @sajanojha on June 2, 2015 14:4

Thanks @jessertaylor, It works But this is completely out of Angular and Leaflet directive isn't it? Furthermore, this does not work with geometry type: "Multipoint" It will be nice if we had a standard solution :) that works for all the geojson Thanks

[nmccready]

From @kylebradshaw on June 2, 2015 14:10

@sajanojha I'm interested to see the plunkr w/ the working solution, is it updated?

[nmccready]

@kylebradshaw start the plunkr and I am sure @jessertaylor will jump in a clean it up.

[nmccready]

From @sajanojha on June 2, 2015 14:13

@kylebradshaw yes I have updated the Plunkr. But this does not work for Multipoint geoJson. I have also pasted my multipoint geojson in the data.json file. Thanks

[nmccready]

From @kylebradshaw on June 2, 2015 14:15

I was referring to the plunkr previously created by @sajanojha

[nmccready]

Gotcha, I see it now :)

[nmccready]

From @sajanojha on June 2, 2015 14:17

Yes updated !!! But I cannot load the data with $http.get thats why I pasted my Json on data.json file. Here is the screen shot :)

[nmccready]

From @sajanojha on June 2, 2015 14:48

Ok Now my GeoJSON is working perfectly fine, Only issue is with MultiPoint GeoJson. Please help me to fix it. http://plnkr.co/edit/pd1cAReTGhD5WhvdhBUN?p=preview Thanks

[nmccready]

From @jessertaylor on June 2, 2015 14:55

@kylebradshaw http://plnkr.co/edit/EGloZdeEO4CNN8uZDlLr?p=preview

[nmccready]

From @kylebradshaw on June 2, 2015 15:2

great example thanks!

[nmccready]

From @sajanojha on June 2, 2015 15:6

@jessertaylor a nice example. But what happens if you introduce a multipoint on it? Thanks!

[nmccready]

From @kylebradshaw on June 2, 2015 15:8

@sajanojha I noticed that your geojson file was not properly formatted as json and that might be why it wasn't properly loading, try fixing that first!

[nmccready]

From @sajanojha on June 2, 2015 15:14

@kylebradshaw yes, I have already fixed it. It was caused my Chrome's plugin. Now it works fine. The only issue now is that the plugin is unable to cluster multipoint Geometry.

http://plnkr.co/edit/pd1cAReTGhD5WhvdhBUN?p=preview

[nmccready]

From @kylebradshaw on June 2, 2015 20:13

Wanted to share my progress might be useful for someone. Needed to add a tooltip to render an output based on geoJSON property data based on @jessertaylor plunk

http://plnkr.co/edit/pq0203gY6XEB77sAnC1s?p=preview