Chore: linting

src/UI/Map/MapLibreAdaptor.ts

@@ -26,13 +26,13 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
         "dragRotate",
         "dragPan",
         "keyboard",
-        "touchZoomRotate"
+        "touchZoomRotate",
     ]
     private static maplibre_zoom_handlers = [
         "scrollZoom",
         "boxZoom",
         "doubleClickZoom",
-        "touchZoomRotate"
+        "touchZoomRotate",
     ]
     readonly location: UIEventSource<{ lon: number; lat: number }>
     readonly zoom: UIEventSource<number>
@@ -62,8 +62,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
         if (!MapLibreAdaptor.pmtilesInited) {
             maplibregl.addProtocol("pmtiles", new Protocol().tile)
             MapLibreAdaptor.pmtilesInited = true
-            console.log("PM-tiles protocol added" +
-                "")
+            console.log("PM-tiles protocol added" + "")
         }
         this._maplibreMap = maplibreMap
 
@@ -113,7 +112,6 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
         }
 
         maplibreMap.addCallbackAndRunD((map) => {
-
             map.on("load", () => {
                 self.MoveMapToCurrentLoc(self.location.data)
                 self.SetZoom(self.zoom.data)
@@ -216,9 +214,9 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
         return {
             map: mlmap,
             ui: new SvelteUIElement(MaplibreMap, {
-                map: mlmap
+                map: mlmap,
             }),
-            mapproperties: new MapLibreAdaptor(mlmap)
+            mapproperties: new MapLibreAdaptor(mlmap),
         }
     }
 
@@ -286,7 +284,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
     ) {
         const event = {
             date: new Date(),
-            key: key
+            key: key,
         }
 
         for (let i = 0; i < this._onKeyNavigation.length; i++) {
@@ -330,13 +328,19 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
         rescaleIcons: number,
         pixelRatio: number
     ) {
-
         {
             const allimages = element.getElementsByTagName("img")
             for (const img of Array.from(allimages)) {
                 let isLoaded: boolean = false
                 while (!isLoaded) {
-                    console.log("Waiting for image", img.src, "to load", img.complete, img.naturalWidth, img)
+                    console.log(
+                        "Waiting for image",
+                        img.src,
+                        "to load",
+                        img.complete,
+                        img.naturalWidth,
+                        img
+                    )
                     await Utils.waitFor(250)
                     isLoaded = img.complete && img.width > 0
                 }
@@ -349,22 +353,31 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
         element.style.transform = ""
         const offset = style.match(/translate\(([-0-9]+)%, ?([-0-9]+)%\)/)
 
-        let labels =<HTMLElement[]> Array.from(element.getElementsByClassName("marker-label"))
-        const origLabelTransforms = labels.map(l => l.style.transform)
+        let labels = <HTMLElement[]>Array.from(element.getElementsByClassName("marker-label"))
+        const origLabelTransforms = labels.map((l) => l.style.transform)
         // We save the original width (`w`) and height (`h`) in order to restore them later on
         const w = element.style.width
         const h = Number(element.style.height)
-        const targetW = Math.max(element.getBoundingClientRect().width * 4,
-            ...labels.map(l => l.getBoundingClientRect().width))
-        const targetH = element.getBoundingClientRect().height +
-            Math.max(...labels.map(l => l.getBoundingClientRect().height * 2 /* A bit of buffer to catch eventual 'margin-top'*/))
+        const targetW = Math.max(
+            element.getBoundingClientRect().width * 4,
+            ...labels.map((l) => l.getBoundingClientRect().width)
+        )
+        const targetH =
+            element.getBoundingClientRect().height +
+            Math.max(
+                ...labels.map(
+                    (l) =>
+                        l.getBoundingClientRect().height *
+                        2 /* A bit of buffer to catch eventual 'margin-top'*/
+                )
+            )
 
         // Force a wider view for icon badges
         element.style.width = targetW + "px"
         // Force more height to include labels
         element.style.height = targetH + "px"
         element.classList.add("w-full", "flex", "flex-col", "items-center")
-        labels.forEach(l => {
+        labels.forEach((l) => {
             l.style.transform = ""
         })
         await Utils.awaitAnimationFrame()
@@ -386,13 +399,12 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
         y *= pixelRatio
 
         try {
-            const xdiff = img.width * rescaleIcons / 2
+            const xdiff = (img.width * rescaleIcons) / 2
             drawOn.drawImage(img, x - xdiff, y, img.width * rescaleIcons, img.height * rescaleIcons)
         } catch (e) {
             console.log("Could not draw image because of", e)
         }
         element.classList.remove("w-full", "flex", "flex-col", "items-center")
-
     }
 
     /**
@@ -461,7 +473,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
         const bounds = map.getBounds()
         const bbox = new BBox([
             [bounds.getEast(), bounds.getNorth()],
-            [bounds.getWest(), bounds.getSouth()]
+            [bounds.getWest(), bounds.getSouth()],
         ])
         if (this.bounds.data === undefined || !isSetup) {
             this.bounds.setData(bbox)
@@ -639,14 +651,14 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
                 type: "raster-dem",
                 url:
                     "https://api.maptiler.com/tiles/terrain-rgb/tiles.json?key=" +
-                    Constants.maptilerApiKey
+                    Constants.maptilerApiKey,
             })
             try {
                 while (!map?.isStyleLoaded()) {
                     await Utils.waitFor(250)
                 }
                 map.setTerrain({
-                    source: id
+                    source: id,
                 })
             } catch (e) {
                 console.error(e)

src/UI/Map/MaplibreMap.svelte

@@ -25,7 +25,6 @@
 
   let container: HTMLElement
 
-
   let _map: Map
   onMount(() => {
     const { lon, lat } = mapProperties?.location?.data ?? { lon: 0, lat: 0 }
@@ -33,7 +32,10 @@
     const rasterLayer: RasterLayerProperties = mapProperties?.rasterLayer?.data?.properties
     let styleUrl: string
     if (rasterLayer?.type === "vector") {
-      styleUrl = rasterLayer?.style ?? rasterLayer?.url ?? AvailableRasterLayers.defaultBackgroundLayer.properties.url
+      styleUrl =
+        rasterLayer?.style ??
+        rasterLayer?.url ??
+        AvailableRasterLayers.defaultBackgroundLayer.properties.url
     } else {
       const defaultLayer = AvailableRasterLayers.defaultBackgroundLayer.properties
       styleUrl = defaultLayer.style ?? defaultLayer.url
@@ -48,13 +50,13 @@
       center: { lng: lon, lat },
       maxZoom: 24,
       interactive: true,
-      attributionControl: false
+      attributionControl: false,
     }
     _map = new maplibre.Map(options)
     window.requestAnimationFrame(() => {
       _map.resize()
     })
-    _map.on("load", function() {
+    _map.on("load", function () {
       _map.resize()
       const canvas = _map.getCanvas()
       if (interactive) {

src/UI/Map/OverlayMap.svelte

@@ -65,13 +65,12 @@
         updateLocation()
         window.setTimeout(updateLocation, 150)
         window.setTimeout(updateLocation, 500)
-      }),
+      })
     )
   }
 </script>
 
-<div class="absolute w-full h-full flex items-center justify-center"
-     style="z-index: 100">
+<div class="absolute flex h-full w-full items-center justify-center" style="z-index: 100">
   <StyleLoadingIndicator map={altmap} />
 </div>
 <MaplibreMap {interactive} map={altmap} mapProperties={altproperties} />

src/UI/Map/RasterLayerHandler.ts

@@ -109,8 +109,12 @@ class SingleBackgroundHandler {
         const background = this._targetLayer.properties
         console.debug("Enabling", background.id)
         let addLayerBeforeId = "transit_pier" // this is the first non-landuse item in the stylesheet, we add the raster layer before the roads but above the landuse
-        if(!map.getLayer(addLayerBeforeId)){
-            console.warn("Layer", addLayerBeforeId,"not foundhttp://127.0.0.1:1234/theme.html?layout=cyclofix&z=14.8&lat=51.05282501324558&lon=3.720591622281745&layer-range=true")
+        if (!map.getLayer(addLayerBeforeId)) {
+            console.warn(
+                "Layer",
+                addLayerBeforeId,
+                "not foundhttp://127.0.0.1:1234/theme.html?layout=cyclofix&z=14.8&lat=51.05282501324558&lon=3.720591622281745&layer-range=true"
+            )
             addLayerBeforeId = undefined
         }
         if (background.category === "osmbasedmap" || background.category === "map") {
@@ -140,15 +144,15 @@ class SingleBackgroundHandler {
                         type: "raster",
                         source: background.id,
                         paint: {
-                            "raster-opacity": 0
-                        }
+                            "raster-opacity": 0,
+                        },
                     },
                     addLayerBeforeId
                 )
                 this.opacity.addCallbackAndRun((o) => {
-                    try{
+                    try {
                         map.setPaintProperty(background.id, "raster-opacity", o)
-                    }catch (e) {
+                    } catch (e) {
                         console.debug("Could not set raster-opacity of", background.id)
                         return true // This layer probably doesn't exist anymore, so we unregister
                     }
@@ -185,11 +189,13 @@ export default class RasterLayerHandler {
         })
     }
 
-    public static prepareSource(layer: RasterLayerProperties): RasterSourceSpecification | VectorSourceSpecification {
+    public static prepareSource(
+        layer: RasterLayerProperties
+    ): RasterSourceSpecification | VectorSourceSpecification {
         if (layer.type === "vector") {
             const vs: VectorSourceSpecification = {
                 type: "vector",
-                url: layer.url
+                url: layer.url,
             }
             return vs
         }
@@ -202,7 +208,7 @@ export default class RasterLayerHandler {
             minzoom: layer["min_zoom"] ?? 1,
             maxzoom: layer["max_zoom"] ?? 25,
             // Bit of a hack, but seems to work
-            scheme: layer.url.includes("{-y}") ? "tms" : "xyz"
+            scheme: layer.url.includes("{-y}") ? "tms" : "xyz",
         }
     }
 
@@ -216,7 +222,7 @@ export default class RasterLayerHandler {
             "{width}": "" + size,
             "{height}": "" + size,
             "{zoom}": "{z}",
-            "{-y}": "{y}"
+            "{-y}": "{y}",
         }
 
         for (const key in toReplace) {

src/UI/Map/RasterLayerPicker.svelte

@@ -78,7 +78,7 @@
 {#if hasLayers}
   <form class="flex h-full w-full flex-col" on:submit|preventDefault={() => {}}>
     <button tabindex="-1" on:click={() => apply()} class="m-0 h-full w-full cursor-pointer p-1">
-      <span class="pointer-events-none h-full w-full relative">
+      <span class="pointer-events-none relative h-full w-full">
         <OverlayMap
           interactive={false}
           rasterLayer={rasterLayerOnMap}

src/UI/Map/ShowDataLayer.ts

@@ -154,7 +154,7 @@ class PointRenderingLayer {
 
         if (this._onClick) {
             const self = this
-            el.addEventListener("click", function(ev) {
+            el.addEventListener("click", function (ev) {
                 ev.preventDefault()
                 self._onClick(feature)
                 // Workaround to signal the MapLibreAdaptor to ignore this click
@@ -200,7 +200,7 @@ class LineRenderingLayer {
         "lineCap",
         "offset",
         "fill",
-        "fillColor"
+        "fillColor",
     ] as const
 
     private static readonly lineConfigKeysColor = ["color", "fillColor"] as const
@@ -264,8 +264,8 @@ class LineRenderingLayer {
                         "icon-rotation-alignment": "map",
                         "icon-pitch-alignment": "map",
                         "icon-image": imgId,
-                        "icon-size": 0.055
-                    }
+                        "icon-size": 0.055,
+                    },
                 }
                 const filter = img.if?.asMapboxExpression()
                 if (filter) {
@@ -338,9 +338,9 @@ class LineRenderingLayer {
                     type: "geojson",
                     data: {
                         type: "FeatureCollection",
-                        features
+                        features,
                     },
-                    promoteId: "id"
+                    promoteId: "id",
                 })
                 const linelayer = this._layername + "_line"
                 const layer: AddLayerObject = {
@@ -351,15 +351,15 @@ class LineRenderingLayer {
                         "line-color": ["feature-state", "color"],
                         "line-opacity": ["feature-state", "color-opacity"],
                         "line-width": ["feature-state", "width"],
-                        "line-offset": ["feature-state", "offset"]
+                        "line-offset": ["feature-state", "offset"],
                     },
                     layout: {
-                        "line-cap": "round"
-                    }
+                        "line-cap": "round",
+                    },
                 }
                 if (this._config.dashArray) {
-
-                    layer.paint["line-dasharray"] = this._config.dashArray?.split(" ")?.map(s => Number(s)) ?? null
+                    layer.paint["line-dasharray"] =
+                        this._config.dashArray?.split(" ")?.map((s) => Number(s)) ?? null
                 }
                 map.addLayer(layer)
 
@@ -393,8 +393,8 @@ class LineRenderingLayer {
                     layout: {},
                     paint: {
                         "fill-color": ["feature-state", "fillColor"],
-                        "fill-opacity": ["feature-state", "fillColor-opacity"]
-                    }
+                        "fill-opacity": ["feature-state", "fillColor-opacity"],
+                    },
                 })
                 if (this._onClick) {
                     map.on("click", polylayer, (e) => {
@@ -425,7 +425,7 @@ class LineRenderingLayer {
                 this.currentSourceData = features
                 src.setData({
                     type: "FeatureCollection",
-                    features: this.currentSourceData
+                    features: this.currentSourceData,
                 })
             }
         }
@@ -509,14 +509,14 @@ export default class ShowDataLayer {
                 layers.filter((l) => l.source !== null).map((l) => new FilteredLayer(l)),
                 features,
                 {
-                    constructStore: (features, layer) => new SimpleFeatureSource(layer, features)
+                    constructStore: (features, layer) => new SimpleFeatureSource(layer, features),
                 }
             )
         perLayer.forEach((fs) => {
             new ShowDataLayer(mlmap, {
                 layer: fs.layer.layerDef,
                 features: fs,
-                ...(options ?? {})
+                ...(options ?? {}),
             })
         })
     }
@@ -529,12 +529,11 @@ export default class ShowDataLayer {
         return new ShowDataLayer(map, {
             layer: ShowDataLayer.rangeLayer,
             features,
-            doShowLayer
+            doShowLayer,
         })
     }
 
-    public destruct() {
-    }
+    public destruct() {}
 
     private zoomToCurrentFeatures(map: MlMap) {
         if (this._options.zoomToFeatures) {
@@ -543,7 +542,7 @@ export default class ShowDataLayer {
             map.resize()
             map.fitBounds(bbox.toLngLat(), {
                 padding: { top: 10, bottom: 10, left: 10, right: 10 },
-                animate: false
+                animate: false,
             })
         }
     }
@@ -552,11 +551,12 @@ export default class ShowDataLayer {
         let { features, doShowLayer, fetchStore, selectedElement } = this._options
         let onClick = this._options.onClick
         if (!onClick && selectedElement) {
-            onClick = (this._options.layer.title === undefined
-                ? undefined
-                : (feature: Feature) => {
-                    selectedElement?.setData(feature)
-                })
+            onClick =
+                this._options.layer.title === undefined
+                    ? undefined
+                    : (feature: Feature) => {
+                          selectedElement?.setData(feature)
+                      }
         }
         if (this._options.drawLines !== false) {
             for (let i = 0; i < this._options.layer.lineRendering.length; i++) {

src/UI/Map/SmallZoomButtons.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-import Translations from "../i18n/Translations.js";
-import Min from "../../assets/svg/Min.svelte";
-import MapControlButton from "../Base/MapControlButton.svelte";
-import Plus from "../../assets/svg/Plus.svelte";
-import type { MapProperties } from "../../Models/MapProperties"
+  import Translations from "../i18n/Translations.js"
+  import Min from "../../assets/svg/Min.svelte"
+  import MapControlButton from "../Base/MapControlButton.svelte"
+  import Plus from "../../assets/svg/Plus.svelte"
+  import type { MapProperties } from "../../Models/MapProperties"
 
-export let adaptor: MapProperties
-let canZoomIn = adaptor.maxzoom.map(mz => adaptor.zoom.data < mz, [adaptor.zoom] )
-let canZoomOut = adaptor.minzoom.map(mz => adaptor.zoom.data > mz, [adaptor.zoom] )
+  export let adaptor: MapProperties
+  let canZoomIn = adaptor.maxzoom.map((mz) => adaptor.zoom.data < mz, [adaptor.zoom])
+  let canZoomOut = adaptor.minzoom.map((mz) => adaptor.zoom.data > mz, [adaptor.zoom])
 </script>
-<div class="absolute bottom-0 right-0 pointer-events-none flex flex-col">
+
+<div class="pointer-events-none absolute bottom-0 right-0 flex flex-col">
   <MapControlButton
     enabled={canZoomIn}
     cls="m-0.5 p-1"

src/UI/Map/StyleLoadingIndicator.svelte

@@ -10,24 +10,25 @@
    * Optional. Only used for the 'global' change indicator so that it won't spin on pan/zoom but only when a change _actually_ occured
    */
   export let rasterLayer: UIEventSource<any> = undefined
-  
+
   let didChange = undefined
-  onDestroy(rasterLayer?.addCallback(() => {
-    didChange = true
-  }) ??( () => {}))
-  
-  onDestroy(Stores.Chronic(250).addCallback(
-    () => {
+  onDestroy(
+    rasterLayer?.addCallback(() => {
+      didChange = true
+    }) ?? (() => {})
+  )
+
+  onDestroy(
+    Stores.Chronic(250).addCallback(() => {
       const mapIsLoading = !map.data?.isStyleLoaded()
       isLoading = mapIsLoading && (didChange || rasterLayer === undefined)
-      if(didChange && !mapIsLoading){
+      if (didChange && !mapIsLoading) {
         didChange = false
       }
-    },
-  ))
+    })
+  )
 </script>
 
-
 {#if isLoading}
   <Loading cls="h-6 w-6" />
 {:else}