CODEWITHSUNDEEP
javascriptleafletmapbox
Raúl Nicolás Cortés Santibañez
Raúl Nicolás Cortés Santibañez

Reputation: 67

Mapbox and leaflet for custom centering

Im sorry if this question is for dummies.

I'm using mapbox on a web development and I have "side" panels next to my map.

The thing is that I want to center the map on a location that I capture by double clicking it.

I know that map.setView([lat,lng],number) or map.panTo([lat,lng]) do the centering magic, but they do it over the actual size of the map o div width.

I want to know if anyone knows if I can do a custom centering, like using the same map size but the center "calculation" occurs on the left or right half of the map.

I dont know how to catch this "resolution" all I know is that I need the half of the width that the map uses. Here is an image of what I want to do enter image description here

Upvotes: 1

Views: 377

Answers (2)

Raúl Nicolás Cortés Santibañez
Raúl Nicolás Cortés Santibañez

Reputation: 67

finally I figured out how to center the panTo() the way i wanted.

i used this myLayer.on('click',function(e){ var vista=$('#map').width()/4; map.setView(new L.LatLng(e.latlng.lat, e.latlng.lng),15); map.panBy([-vista,0]);}

Upvotes: 0

ghybs
ghybs

Reputation: 53320

(probably a duplicate question with that one on GIS StackExchange: Change the center point of leaflet)

You will probably be interested in one of those plugins:

  • Leaflet-active-area

    This plugin allows you to use a smaller portion of the map as an active area. All positioning methods (setView, fitBounds, setZoom) will be applied on this portion instead of the all map.

  • Leaflet.ControlledBounds

    Inspired by Leaflet-active-area, automatically detects the largest area of the map not covered by any map controls and applies setView, fitBounds, setZoom, getBounds to that area.

Upvotes: 1

Related Questions