@record-evolution/widget-mapbox 1.4.14 → 1.4.16

package/package.json

@@ -3,7 +3,7 @@
     "description": "REWidget widget-mapbox",
     "license": "MIT",
     "author": "widget-mapbox",
-    "version": "1.4.14",
+    "version": "1.4.16",
     "type": "module",
     "main": "dist/widget-mapbox.js",
     "types": "dist/src/widget-mapbox.d.ts",

package/src/widget-mapbox.ts

@@ -26,10 +26,10 @@ export class WidgetMapbox extends LitElement {
     @state()
     colors: any = new Map()
 
-    version: string = 'versionplaceholder'
-
-    resizeObserver: ResizeObserver
-    mapStyle?: string
+    public version: string = 'versionplaceholder'
+    private mapLoaded: boolean = false
+    private resizeObserver: ResizeObserver
+    private mapStyle?: string
     constructor() {
         super()
         this.resizeObserver = new ResizeObserver(() => {
@@ -62,9 +62,10 @@ export class WidgetMapbox extends LitElement {
                 if (f.geometry.coordinates?.length) bounds.extend(f.geometry.coordinates)
             })
         })
-        if (!bounds.isEmpty()) {
-            this.map.fitBounds(bounds, { maxZoom: 14, padding: 16, duration: 100 })
+        if (bounds.isEmpty()) {
+            bounds.extend([8.6820917, 50.1106444])
         }
+        this.map.fitBounds(bounds, { maxZoom: 14, padding: 16, duration: 100 })
     }
 
     transformInputData() {
@@ -353,6 +354,10 @@ export class WidgetMapbox extends LitElement {
     }
 
     syncDataLayers() {
+        if (!this.mapLoaded) {
+            console.log('Map not yet finished loading. Skipping syncDataLayers')
+            return
+        }
         // remove sources and all Layers that are not part of the inputData anymore
         const sources: any[] = this.map.getStyle().sources ?? []
         const mySources: [string, any][] = Object.entries(sources).filter(([l]) => l.startsWith('input:'))
@@ -475,6 +480,7 @@ export class WidgetMapbox extends LitElement {
         console.log('MAPBOX VERSION', mapboxgl.version)
 
         this.map.on('load', () => {
+            this.mapLoaded = true
             this.addBuildingLayer()
             this.syncDataLayers()
         })
@@ -556,7 +562,10 @@ export class WidgetMapbox extends LitElement {
                 rel="stylesheet"
             />
             <div class="wrapper">
-                <header>
+                <header
+                    class="paging"
+                    ?active=${this.inputData?.settings?.title || this.inputData?.settings?.subTitle}
+                >
                     <div class="title">
                         <h3 class="paging" ?active=${this.inputData?.settings?.title}>
                             ${this.inputData?.settings?.title}