2

I hope I can get same help from here. I started to put together a leaflet map, please see here: http://gis.xyz/leaflet2.html I want to show my postgis point (uk based) features on this map with cluster method. The points are already on the map (I used geoserver- jsonp), but I cannot figure out how can I add to the layer to the cluster layer. I also added a markercluster example to the script, this is how I would like to see my layer. It would be great if someone would help me to answer this question.

     var owsrootUrl = 'http://217.8.255.188:8080/geoserver/opengeo/ows';

 var defaultParameters = {
     service : 'WFS',
     version : '2.0',
     request : 'GetFeature',
     typeName : 'opengeo:evernote_geom',
     outputFormat : 'text/javascript',
     format_options : 'callback:getJson',
     SrsName : 'EPSG:4326'
};

var parameters = L.Util.extend(defaultParameters);
var URL = owsrootUrl + L.Util.getParamString(parameters);

var WFSLayer = null;
var ajax = $.ajax({
    url : URL,
    dataType : 'jsonp',
    jsonpCallback : 'getJson',
    success : function (response) {
       WFSLayer = L.geoJson(response, {
            style: function (feature) {
                return {
                    stroke: false,
                    fillColor: 'FFFFFF',
                    fillOpacity: 0
                };
            },
            onEachFeature: function (feature, layer) {
                popupOptions = {maxWidth: 600};
                layer.bindPopup('<h4>'+feature.properties.url+'</h4><br>'+feature.properties.title
                    ,popupOptions);
            }
        }).addTo(map);
    }
});
1

To do that you can use the Leaflet.markercluster plug-in here https://github.com/Leaflet/Leaflet.markercluster. After adding it to your project, you have to define a marker cluster group:

var markers = L.markerClusterGroup();

Then, you should first add the markers to this cluster group and after that you have to add the group to the map:

markers.addLayer(a_group_of_markers);
map.addLayer(markers);

In your code you load the markers with Ajax and then you add them to the map, so the most straight way will be this:

var markers = L.markerClusterGroup();
var ajax = $.ajax({
    url : URL,
    dataType : 'jsonp',
    jsonpCallback : 'getJson',
    success : function (response) {
       WFSLayer = L.geoJson(response, {
            style: function (feature) {
                return {
                    stroke: false,
                    fillColor: 'FFFFFF',
                    fillOpacity: 0
                };
            },
            onEachFeature: function (feature, layer) {
                popupOptions = {maxWidth: 600};
                layer.bindPopup('<h4>'+feature.properties.url+'</h4><br>'+feature.properties.title
                    ,popupOptions);
            }
        }).addTo(markers.addTo(map));
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.