[GIS] Leaflet Marker-Cluster JSONP GeoServer

clusteringgeoserverjsonleaflet

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);
    }
});

Best Answer

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));
    }
});
Related Question