From 8c3681b6ad08250ec9e1939f00e954a297eb894a Mon Sep 17 00:00:00 2001
From: Sascha Hagedorn <mail@shagedorn.net>
Date: Fri, 18 Mar 2022 08:33:52 +0100
Subject: [PATCH] Add zoomOffset option

---
 docs/config.md    | 8 ++++++++
 src/config.js     | 1 +
 src/index.d.ts    | 1 +
 src/views/Map.vue | 3 ++-
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/docs/config.md b/docs/config.md
index 9526c77..6b7bc3b 100644
--- a/docs/config.md
+++ b/docs/config.md
@@ -408,6 +408,14 @@ and [this Wikipedia article](https://en.wikipedia.org/wiki/Tiled_web_map).
   };
   ```
 
+### `map.zoomOffset`
+
+Offset the zoom level to account for different tile sizes. For example tiles with a 
+size of 512x512 need an offset of -1 and for 1024x1024 an offset of -2.
+
+- Type: [`Number`]
+- Default: `0`
+
 ### `onLocationChange.fitView`
 
 Whether to re-fit the map's content into view or not when a location update is received.
diff --git a/src/config.js b/src/config.js
index c6aa327..c83319c 100644
--- a/src/config.js
+++ b/src/config.js
@@ -65,6 +65,7 @@ const DEFAULT_CONFIG = {
       fillColor: "transparent",
     },
     url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    zoomOffset: 0,
   },
   onLocationChange: {
     fitView: false,
diff --git a/src/index.d.ts b/src/index.d.ts
index 9d0183b..081d614 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -56,6 +56,7 @@ interface Config {
           fillColor: OptionalColor;
         };
         url: string;
+        zoomOffset: number;
     };
     onLocationChange: {
         fitView: boolean;
diff --git a/src/views/Map.vue b/src/views/Map.vue
index 40799d3..977f6bb 100644
--- a/src/views/Map.vue
+++ b/src/views/Map.vue
@@ -21,7 +21,7 @@
     <LTileLayer
       :url="url"
       :attribution="attribution"
-      :options="{ maxNativeZoom, maxZoom }"
+      :options="{ maxNativeZoom, maxZoom, zoomOffset }"
     />
 
     <template v-if="map.layers.last">
@@ -156,6 +156,7 @@ export default {
       maxNativeZoom: this.$config.map.maxNativeZoom,
       url: this.$config.map.url,
       zoom: this.$store.state.map.zoom,
+      zoomOffset: this.$config.map.zoomOffset,
       circle: {
         ...this.$config.map.circle,
         color: this.$config.map.circle.color || this.$config.primaryColor,