3

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.

Can someone help me please?

2

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.

0

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);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

var poly = L.polygon([[30,-15],[35,-12.5],[36,-18]]).addTo(map);
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;

    var marker = L.marker([lat,lng]).addTo(map);
    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);
        }
    L.polygon(newpoints).addTo(map);

}

navigator.geolocation.getCurrentPosition(showMap);
1
  • Hi @toms! You linked the wrong fiddle but thanks a lot for your piece of code!!!!! It creates two polys but this is fixed removing .addTo(map) where var poly is declared!
    – lale85
    Dec 25 '15 at 21:04

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.