Add min zoom

Author: fallaciousreasoning

src/TopoMap.svelte

@@ -49,6 +49,7 @@
           title={definition.name}
           prerender={definition.prerender}
           type={"overlay"}
+          minZoom={definition.minZoom}
           visible={definition.defaultVisible}
           source={cachingSource(definition)} />
       {/each}

src/components/MapFeatures.svelte

@@ -109,7 +109,7 @@
               <label>
                 <input
                   type="checkbox"
-                  checked={$fragment.featureLayers.includes(layer.get('id'))}
+                  checked={$fragment.featureLayers.includes(layer.get('id')) || layer.getVisible()}
                   on:change={(e) =>
                     setLayerVisible(layer, e.target['checked'])} />
                 {layer.get('title')}

src/layers/layerDefinitions.ts

@@ -7,7 +7,7 @@ export interface BaseLayerDefinition {
     name: string;
     description: string;
     defaultVisible?: boolean;
-    defaultCache?: boolean;
+    minZoom?: number;
 }
 
 export type TileLayerDefinition = BaseLayerDefinition & {
@@ -62,6 +62,7 @@ export const layerDefinitions: TileLayerDefinition[] = [
         type: 'overlay',
         defaultVisible: true,
         prerender: e => e.context.canvas.getContext('2d').globalCompositeOperation = 'multiply',
+        minZoom: 10,
         url: 'https://tiles-cdn.koordinates.com/services;key=d0772bed2204423f87157f7fb1223389/tiles/v4/layer=50765/EPSG:3857/{z}/{x}/{y}.png'
     }
 ]

src/ol/TileLayer.svelte

@@ -11,13 +11,15 @@
   export let visible: boolean = true
   export let opacity = 1
   export let prerender: (e: RenderEvent) => void = undefined
+  export let minZoom: number | undefined = undefined
 
   const { addLayer, removeLayer } = getOlContext()
   const layer = new TileLayer({
     ['id' as any]: title,
     ['title' as any]: title,
     ['type' as any]: type,
     ['visible' as any]: visible,
+    minZoom,
     opacity,
     source: typeof source === 'string' ? new XYZ({ url: source }) : source,
   })