center of a polygon created with mapbox

Question

I would like to know how to calculate the centre of a polygon created with this code from Mapbox: https://www.mapbox.com/mapbox.js/example/v1.0.0/show-polygon-area/ I would like to place a marker on the centre of the polygon after it's been created. Thanks in advance.

I have tried to use the following : var center = e.layer.bounds.getCenter(); But it doesn't work. I have found other scripts to calculate the center of a polygon, but I'm not sure where to find the polygon created — Surfget

iH8 iH8 · Accepted Answer · 2016-02-17T23:08:32

To calculate the center of a polygon you first need to get it's bounds, that can be done using the getBounds method of L.Polygon which it enherits from L.Polyline:

Returns the LatLngBounds of the polyline.

http://leafletjs.com/reference.html#polyline-getbounds

It returns a L.LatLngBounds object which has a getCenter method:

Returns the center point of the bounds

http://leafletjs.com/reference.html#latlngbounds-getcenter

It returns a L.LatLng object which you can use to create a L.Marker:

var polygon = new L.Polygon(coordinates).addTo(map);

var bounds = polygon.getBounds();

var center = bounds.getCenter();

var marker = new L.Marker(center).addTo(map);

Or you can shorthand it:

var polygon = new L.Polygon(coordinates).addTo(map);

var marker = new L.Marker(polygon.getBounds().getCenter()).addTo(map);

Using that in the Mapbox example would look something like this:

function showPolygonArea(e) {
    featureGroup.clearLayers();
    featureGroup.addLayer(e.layer);

    // Here 'e.layer' holds the L.Polygon instance:
    new L.Marker(e.layer.getBounds().getCenter()).addTo(featureGroup);

    e.layer.bindPopup((LGeo.area(e.layer) / 1000000).toFixed(2) + ' km<sup>2</sup>');
    e.layer.openPopup();
}

center of a polygon created with mapbox

2 Answers