1

I try to set a marker when on the bottom right of my map no matter which zoom level i have, similar to a control where i can set the position to 'bottomright'. What i want to achieve is to show a circle everytime a marker is dragged so i am able to drop the marker in that circle. What i tried so far is this:

private createDropZone() {
    const mapBounds = this.map.getBounds();

    const x = mapBounds.getSouthEast();

    const lat = x.lat - 0.02;
    const long = x.lng - 0.02;

    this.dropZone = new L.CircleMarker(new L.LatLng(lat, long), {
      color: '#f27e00',
      fillColor: '#f27e00',
      fillOpacity: 0.3,
      radius: 50,
    });

    this.dropZone.addTo(this.map);
  }

So as i you can i am subtract 0.02 from the south east bound of the map but of course this will only work on one zoom level. If its not possible to draw it on the same position in the right bottom corner it would help if someone give me hint how i can draw a marker relativ to the given marker.

2

Use map's .latLngToContainerPoint method to convert lat,lng coordinate to container pixel coordinate, subtract pixel offset (which is zoom independent) and convert pixel coordinate back to lat,lng with .containerPointToLatLng method:

private createDropZone() {
  const mapBounds = this.map.getBounds();

  const x = mapBounds.getSouthEast();
  const p = this.map.latLngToContainerPoint(x);
  const p_WithOffset = p.subtract(L.point(70, 70));
  const x_WithOffset = this.map.containerPointToLatLng(p_WithOffset);

  this.dropZone = new L.CircleMarker(x_WithOffset, {
    color: '#f27e00',
    fillColor: '#f27e00',
    fillOpacity: 0.3,
    radius: 50,
  });

  this.dropZone.addTo(this.map);
}
| improve this answer | |
  • That's working perfectly, thank you so much =) I completely missed the substract method – jhen Jun 23 at 6:24

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.