# Move leaflet polygon to given position

I have a circle and a polygon that I'd like to move to the user's local position. I managed to move the circle latLng but I can't find a way to do the same thing with a polygon.

You know that a circle in Leaflet is defined by a unique LatLng coordinate + radius, whereas a polygon is made of several LatLng coordinates.

That is why it is trivial to say "the circle is at this LatLng position". And it is trivial to center that circle on a user position.

But we are left with plenty options for the polygon: how should we compute its "position", since it is defined by many LatLng coordinates?

If your polygon is already defined around the [0, 0] position, then you could translate all its vertices (i.e. all its LatLng coordinates) by the user position.

Otherwise, you have to chose a "centre" (the most trivial would be the barycentre / centroid of its vertices), so that you can compute the difference with the user position, then translate all the polygon vertices like above by this difference.

Building on what @ghybs suggests, here is some javascript to get a users position and translate a polygon (in this case a triangle) to be centered on the users position

Fiddle here

``````var map = L.map('map').setView([0,0], 5);

var center = poly.getBounds().getCenter();
var points = poly.getLatLngs();
var offsets = []
for (var i = 0; i < points.length; i++)  {
var point = [];
point.push(points[i].lat - center.lat);
point.push(points[i].lng - center.lng);
offsets.push(point);
}

function showMap(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;

map.panTo([lat,lng]);
var newpoints = [];
for (var i = 0; i < offsets.length; i++)  {
var point = [];
point.push(lat + offsets[i][0]);
point.push(lng + offsets[i][1]);
newpoints.push(point);
}