CODEWITHSUNDEEP
vuejs2leaflet
niclas_4
niclas_4

Reputation: 3674

Stretching a Leaflet Map to any size

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>

Upvotes: 2

Views: 2344

Answers (1)

ghybs
ghybs

Reputation: 53360

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.

Upvotes: 4

Related Questions