2

My Leaflet Map (Custom one) is relatively small, i made tiles from a 16000x16000 image and implemented them into the website with Leaflet, but the map is too small, the minZoom: 2 is too big and the minZoom 1 is too small.

Here the Image

I would like the Map to fill the whole gray area (which is my map area) but the tiles right now dont fill the whole thing, with bounds i can keep it centered but still not bigger. Any help appreciated.

EDIT 1:

 <l-map ref="map" :zoomSnap="zoomSnap" :minZoom="minZoom" :maxZoom="maxZoom" :options="mapOptions" style="background-color: lightgray; width: fill; height: 100%;" :zoom="zoom" :center="center">
          <l-tile-layer :options="mapOptions" style="width: 100%; height: 100%" :url="url" :attribution="attribution"></l-tile-layer>
</l-map>
4
  • Adding some css to the map div, height: 100%; and width: 100%; or maybe I'm not understanding what your trying to do
    – Tony
    Commented Aug 30, 2018 at 16:56
  • @Tony the gray area is the same div as the white box
    – niclas_4
    Commented Aug 30, 2018 at 16:57
  • 1
    could you add your code to jsfiddle.net so I can understanding more
    – Tony
    Commented Aug 30, 2018 at 17:01
  • @Tony editet it, i cant reproduce it on jsfiddle i cant upload my assets there, but my edit basicly shows the code of the screenshot
    – niclas_4
    Commented Aug 30, 2018 at 17:03

1 Answer 1

4

Use the map zoomSnap option:

Forces the map's zoom level to always be a multiple of this, particularly right after a fitBounds() or a pinch-zoom. By default, the zoom level snaps to the nearest integer; lower values (e.g. 0.5 or 0.1) allow for greater granularity. A value of 0 means the zoom level will not be snapped after fitBounds or a pinch-zoom.

I suspect you use Vue and Vue2Leaflet plugin.

Your zoomSnap data should most probably be a member of your mapOptions data that you pass to the options prop of the <l-map> component, instead of being its own prop / attribute.

You would probably also be interested in using the map zoomDelta option:

Controls how much the map's zoom level will change after a zoomIn(), zoomOut(), pressing + or - on the keyboard, or using the zoom controls. Values smaller than 1 (e.g. 0.5) allow for greater granularity.

1
  • Thanks, i also got that idea and tried it before but the Thing was i gave the ZoomSnap as a new Property instead of putting it into the Options of my map. After reading yours i tried to implement it into the Options instead and it worked perfectly, thanks a lot!
    – niclas_4
    Commented Aug 31, 2018 at 6:10

Not the answer you're looking for? Browse other questions tagged or ask your own question.