[GIS] Is it possible to show Leaflet Marker Cluster with JSON API

clusteringjavascriptjsonleafletmarkers

I have a problem with displaying Leaflet Marker Cluster working with Leaflet-layerJSON.
There are markers, but I cannot show the clusters. This works with GeoJSON, but now I have different data structure and I'm not sure is it possible to show clusters with JSON (not GeoJSON) data structure:

[{
    "latitude":"51.5615",
    "longitude":"-0.0731"
 },

 {
    "latitude":"51.545",
    "longitude":"-0.070"
 },
 {
    "latitude":"51.4638",
    "longitude":"-0.1677"
 }]

Please take a look at the other (not working) example without angular leaflet directive.

Best Answer

You could simply use leaflet-layerJSON option layerTarget, it is specifically made for this case: it adds markers to another Layer Group (which can be a Marker Cluster Group) instead of to itself.

Note that you still need to add both the layerJSON and the MCG to the map, so that MCG displays clusters, and layerJSON receives map events for re-loading data.

var markers = L.markerClusterGroup().addTo(map);

L.layerJSON({
    url: "clean.json",
    propertyLoc: ['latitude', 'longitude'],
    propertyTitle: 'name',
    caching: true,
    layerTarget: markers // Option layerTarget
}).addTo(map);

Demo: http://plnkr.co/edit/vkJs0zkNaEYjLHLwYpMi?p=preview

Note: do not forget to set your map container height (and width if necessary), otherwise you will not see your map. Angular may be taking care of that for you if you are using Leaflet directive.

Related Question