0

In my angular application I have created the leaflet map and over the leaflet map I have created two more panels data in overlapping manner And I have created the circle of 5 km radius on the map. But my problem is the panels are covering the circle on the leaflet map

So my requirement is to move the center position of the map i.e circle to top position(top middle) than only the circle will be visible otherwise it will be covered by the panels on the map.

component.ts

 map = L.map('map').setView([13.0827, 80.2707], 12);
   
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);


    L.control.zoom({
      position: 'bottomright',
  }).addTo(map);

I am new to leaflet map Can anyone help me regarding this.

Haritha
  • 77
  • 2
  • 10

1 Answers1

1

You can let the map fit the circle bounds, like:

var circle = L.circle() // Your circle

map.fitBounds(circle.getBounds())

To show the circle on the left side of the map:

map.setView(circle.getLatLng(),map.getZoom(),{animate: false})

sw = map.getBounds().getSouthWest();
psw = map.latLngToContainerPoint(sw);
center = map.getCenter();

pc = map.latLngToContainerPoint(center);
dis = pc.x - psw.x;
middle = dis / 2

pnewCenter = L.point(pc.x+middle,pc.y)
center2 = map.containerPointToLatLng(pnewCenter);
map.setView(center2,map.getZoom(),{animate: true})
Falke Design
  • 10,635
  • 3
  • 15
  • 30
  • Thanks ,But it is showing at center of the map and big size. But I want the circle in left side .Can you help me regarding this – Haritha Oct 22 '20 at 11:50
  • @Haritha can you pls create a image how it should like? You want that the circle is displayed at the left side of your map and the map not zooming, correct? – Falke Design Oct 22 '20 at 12:14
  • Yes,I want the circle to be displayed at left side of the map not center – Haritha Oct 22 '20 at 12:20