Convert GeoJSON polygon to point before rendering in Leaflet Map

Question

I have a GeoJSON dataset which has points and polygons. I have a simple Leaflet code which reads them into a map, like this:

var MyLayer = new L.GeoJSON.AJAX("/UrbanSyntax/Desarrollo/twitter/data/boxtest.json", {

pointToLayer: function(feature, latlng) {      
return new L.CircleMarker(latlng, {
  radius: 3,
  fillOpacity: 0.75,
  color: getColor(feature.properties.created_at)
});
},
onEachFeature: function(feature, layer) {
layer.bindPopup(
feature.properties.created_at + '<br />'
+ feature.geometry.coordinates + '<br />'
+ feature.properties.user  )
}
});

Most of the data are polygons, but I need to translate them to points (the polygon center) to simplify the map. I don't want to change the original GeoJSON when it's parsed since those polygons might be needed later.

I don't know where to "inject" code to read the polygon bounds, calculate a center and send a latlng to make a circlemarker. As it is now, the code reads the points and polygons in the json ok, but there are too many polygons in the data so the browser freezes. It works all right when I filter out the polys from the JSON and just map the points. I'm running out of ideas, and Leaflet documentation is so scarce in the JSON chapter... I just need a way to put an if in the pointToLayer code, separate the points from the polys, and map them all as points.

Any ideas?

Answer 1

You can use Turf.js to calculate the centroids of the polygons.

Just include it in your HTML head. In my case, I am using the CDN:

<script src="https://unpkg.com/@turf/[email protected]/turf.min.js"></script>

In the following code I am using onEachFeature to check whether the current feature is a polygon, since it would not make sense to convert points. If it is a polygon I am using Turf to calculate its centroid, which gives me a lat and lon, which can be used to add a new marker.

var geojson = L.geoJson(MyLayer,{
                    onEachFeature: function(feature,layer){
                        if (feature.geometry.type === 'Polygon') {
                            console.log('Polygon detected');
                            var centroid = turf.centroid(feature);
                            var lon = centroid.geometry.coordinates[0];
                            var lat = centroid.geometry.coordinates[1];
                            L.marker([lat,lon]).addTo(map);
                        }
                }
            });

geojson.addTo(map);

I have tested this with a GeoJSON including points and polyons. The original dataset looks like this:

When the above code is executed then you see that the points remain points and the polygons are transformed to centroids, without ever changing the original dataset.

Of course you would not show both, I just did it to show that the example works! You would only show the points.

You can use this with L.CircleMarker as well, I just used L.marker, because it was a quicker way to demonstrate how this works. I also omitted your popup to shorten the code, but it looks like you will not even have to change it.