3

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?

7

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/turf@3.5.2/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:

enter image description here

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.

enter image description here

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.

  • Thank you! That's an awesome pointer for me, gjson utils looks kinda abandoned. – O' Bieito Jan 17 '17 at 20:08
  • very nice, exactly what i was looking for also. Thank you – geomajor56 Aug 31 '17 at 11:05

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.