CODEWITHSUNDEEP
jsonleafletmarkerclusterer
eltomaco
eltomaco

Reputation: 91

Leaflet MarkerCluster with GeoJson

I am currently working on a Leaflet Project where I use external geojson files as data input. Since the json contains a lot of objects I would like to use the MarkerCluster plugin which I got from Mappbox:

<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />

Displaying the json-layer without the clustering works just fine, but if i try to assign it to the cluster nothing is displayed.

var markersBar = L.markerClusterGroup();        
var barLayer = new L.GeoJSON.AJAX("json/eat_drink/bar.geojson", {
    pointToLayer: function(feature, latlng) {
        var icon = L.icon({
                        iconSize: [27, 27],
                        iconAnchor: [13, 27],
                        popupAnchor:  [1, -24],
                        iconUrl: 'icon/' + feature.properties.amenity + '.png'
                        });
        return L.marker(latlng, {icon: icon})
    }, 
    onEachFeature: function(feature, layer) {
        layer.bindPopup(feature.properties.name + ': ' + feature.properties.opening_hours);
    }
});
markersBar.addLayer(barLayer);
console.log(markersBar);
map.addLayer(markersBar);

The console.log output lets me assume that there are no objects, but I don't get it why.

Object { options: Object, _featureGroup: Object, _leaflet_id: 24, _nonPointGroup: Object, _inZoomAnimation: 0, _needsClustering: Array[0], _needsRemoving: Array[0], _currentShownBounds: null, _queue: Array[0], _initHooksCalled: true }

What am I doing wrong?

Upvotes: 7

Views: 7474

Answers (2)

do-me
do-me

Reputation: 2208

For anyone looking for a straight forward example for adding a marker cluster with geojson ajax to a map, binding pop-ups and adding to layer control:

// pop-up function
function popUp(f, l) {
    var out = [];
    if (f.properties) {
        for (key in f.properties) {
            out.push(key + ": " + f.properties[key]);
        }
        l.bindPopup(out.join("<br />"));
    }
}

// add layer to map and layer control
function add_layer(layr, layr_name) {
    map.addLayer(layr);
    layerControl.addOverlay(layr, layr_name);
}

// fire ajax request
var points = new L.GeoJSON.AJAX("../data/points.geojson", { onEachFeature: popUp });

// create empty marker cluster group
var markers = L.markerClusterGroup()

// when geojson is loaded, add points to marker cluster group and add to map & layer control
points.on('data:loaded', function () {
    markers.addLayer(points);
    add_layer(markers, "Point Markers")
});

Upvotes: 1

snkashis
snkashis

Reputation: 2991

Well it looks like you are using Leaflet-Ajax...so an async request is made to grab your geojson..and your immediate next line is markersBar.addLayer(barLayer);..which would contain nothing since the request is almost certainly not complete yet...

Instead, I believe you can use the loaded event provided in the documentation like 

barLayer.on('data:loaded', function () {
    markersBar.addLayer(barLayer);
    console.log(markersBar);
    map.addLayer(markersBar);
});

Upvotes: 6

Related Questions