Point vs MultiPoint in MarkerClusters for Leaflet

Working with spatial data in web  maps can be confusing at times. Rendering spatial data in a mapping application requires prior knowledge and understanding of the data to ensure all is well in the application. This is is due to the capturing of attribute information , geometry and any other relevant information that you need in the application. In the Point vs MultiPoint issue, one can represent this data in clusters to aid in visual balancing and also avoid misguided information. MarkerClusters are useful in such a scenario and are easy to work with and customize. However, in the cases of these two, Point and MultiPoint, one can get stuck in this problem for quite some time. Let’s checkout why;

A Point describes sets  as (0 0) while MultiPoint is a series of Points described as ((0 0))

MultiPoint GeoJSON

 

Point GeoJSON

Taking a look at the Geometry, the coordinates candidate differ. While working with MarkerClusters, features are added individually to the cluster. In the case of a Point, It will be straightforward in adding map events on the layer such as hover effects, onEachFeature, PointToLayer and so forth. This is because each point is represented as it is in the set. In the cases of the MultiPoint, these map events will be added on the group of Points and not points themselves. This thus makes it difficult to access attributes or even search layer based on fields in the layer. This call for a “better” approach while working with MultiPoint data in MarkerClusters.

I will evaluate the ways of adding each of the features into the map and check the differences.

Point

/* We start by defining a single marker cluster layer to hold all clusters */
var markerClusters = new L.MarkerClusterGroup({
spiderfyOnMaxZoom: true,
showCoverageOnHover: false,
zoomToBoundsOnClick: true,
disableClusteringAtZoom: 16
});

var pointLayer = L.geoJson(null);

points = L.geoJson(null, {

/*Add your parameters/logic here */

})

/* Add the GeoJSON data into the points layer and also add pointLayer to the map. pointLayer will be holding the points data */

$.getJSON(“data/points.geojson”, function (data) {
points.addData(data);
map.addLayer(pointLayer);

});

/*Declare a map variable that holds the map with the data. Add Markerclusters(To load when the map loads) */

var map = L.map(“map”, {
zoom: 10,
center: [-1.295637, 36.821382],
layers: [markerClusters],
zoomControl: false,
attributionControl: false
});

/*Register map events and execute an action. When pointLayer checkbox is True, all points will be added to the cluster. The vice versa is also true */

map.on(“overlayadd”, function(e) {
if (e.layer === pointLayer) {
markerClusters.addLayer(points);
}
});
map.on(“overlayremove”, function(e) {
if (e.layer === pointLayer) {
markerClusters.removeLayer(points);
}
});

 

MultiPoint

var multiPoint;
$.getJSON(“data/multipoints.geojson”, function(data) {
multiPoint = L.geoJson(data, {
onEachFeature: function (feature, layer) {
layer.addTo(markerClusters);
}
});
map.addLayer(markerClusters);
});

Note the layer.addTo(markerClusters) on the onEachFeature function in the multipoint layer. This ensures that the features are not added as a featuregroup in the MarkerCluster layer.

Thats the general layout and structure of the code when handling the two Geojson layers. It’s  a bit tricky for beginners but its always good to understand what happens under the hood in your data layers.

More details of the issue are as discussed in most forums such as Popup not working with circlemarker in cluster and Encoding properties for each point in GeoJSON multipoint 

Having issues with such data? leave a comment below

Wanjohi Kibui
About Wanjohi Kibui 22 Articles
A GIS Developer, Consultant and Author.Passionate about Geospatial technologies. To read more about his work, visit http://www.lifeingis.com Access video Tutorials on YouTube

Be the first to comment

Leave a reply on this post