Remove PMTiles protocol

dfpc-coe · Sep 24, 2024 · 9491ed5 · 9491ed5
1 parent 58bbcfb
commit 9491ed5
Show file tree

Hide file tree

Showing 7 changed files with 492 additions and 310 deletions.
diff --git a/api/web/package-lock.json b/api/web/package-lock.json
diff --git a/api/web/package.json b/api/web/package.json
@@ -20,6 +20,7 @@
         "apexcharts": "^3.41.0",
         "core-js": "^3.6.4",
         "cronstrue": "^2.19.0",
+        "deep-equal": "^2.2.3",
         "dropzone": "^6.0.0-beta.2",
         "floating-vue": "^2.0.0-beta.17",
         "jsonata": "^2.0.4",
@@ -28,7 +29,6 @@
         "p12-pem": "^1.0.5",
         "phone": "^3.1.42",
         "pinia": "^2.1.7",
-        "pmtiles": "^3.0.0",
         "sass": "^1.49.7",
         "sass-loader": "^16.0.0",
         "semver-sort": "^1.0.0",

diff --git a/api/web/src/components/Admin/AdminOverlaysEdit.vue b/api/web/src/components/Admin/AdminOverlaysEdit.vue
@@ -113,7 +113,6 @@ export default {
         stdclick,
         saveOverlay: async function() {
             const overlay = JSON.parse(JSON.stringify(this.overlay));
-            overlay.styles = JSON.parse(overlay.styles);
 
             this.loading = true;
             if (this.$route.params.overlay === 'new') {

diff --git a/api/web/src/components/Styling/Layer.vue b/api/web/src/components/Styling/Layer.vue
@@ -7,6 +7,22 @@
                 v-text='JSON.stringify(l.filter)'
             />
         </div>
+        <div v-if='l["minzoom"] || l["maxzoom"]' class='col-12 row g-0'>
+            <label class='subheader'>Zoom Limits</label>
+
+            <div class='col-12 col-md-6 pe-md-1'>
+                <pre
+                    class='col-12 py-1'
+                    v-text='l.minzoom || "Not Set"'
+                />
+            </div>
+            <div class='col-12 col-md-6 ps-md-1'>
+                <pre
+                    class='col-12 py-1'
+                    v-text='l.maxzoom || "Not Set"'
+                />
+            </div>
+        </div>
         <div v-if='l["source-layer"]' class='col-12'>
             <label class='subheader'>Source Layer</label>
             <pre
@@ -188,6 +204,10 @@ export default {
         layer: {
             type: Object,
             required: true
+        },
+        updateMap: {
+            type: Boolean,
+            default: true
         }
     },
     data: function() {
@@ -197,13 +217,12 @@ export default {
             l: this.layer
         }
     },
-    computed: {
-        ...mapState(useMapStore, ['layers'])
-    },
     watch: {
         l: {
             deep: true,
             handler: function() {
+                if (!this.updateMap) return;
+
                 for (const paint of ['fill-opacity', 'fill-color', 'line-opacity', 'line-color', 'line-width']) {
                     if (this.l.paint[paint]) {
                         mapStore.map.setPaintProperty(String(this.l.id), paint, this.l.paint[paint]);

diff --git a/api/web/src/components/Styling/ObjectInput.vue b/api/web/src/components/Styling/ObjectInput.vue
@@ -0,0 +1,56 @@
+<template>
+    <div class='col-12 py-2'>
+        <TablerInput
+            v-model='current'
+            :rows='32'
+            :error='error'
+        />
+    </div>
+</template>
+
+<script>
+import {
+    TablerInput
+} from '@tak-ps/vue-tabler'
+import deepEqual from 'deep-equal';
+
+export default {
+    name: 'ObjectInput',
+    emits: [
+        'update:modelValue'
+    ],
+    props: {
+        modelValue: {
+            type: Object,
+            required: true
+        }
+    },
+    data: function() {
+        return {
+            error: '',
+            current: this.modelValue ? JSON.stringify(this.modelValue, null, 4) : ''
+        }
+    },
+    watch: {
+        modelValue: {
+            deep: true,
+            handler: function() {
+                if (!deepEqual(this.modelValue, JSON.parse(this.current))) {
+                    this.current = JSON.stringify(this.modelValue, null, 4)
+                }
+            }
+        },
+        current: function() {
+            try {
+                this.$emit('update:modelValue', JSON.parse(this.current));
+                this.error = '';
+            } catch (err) {
+                this.error = 'Invalid JSON';
+            }
+        }
+    },
+    components: {
+        TablerInput
+    }
+}
+</script>
diff --git a/api/web/src/components/Styling/Style.vue b/api/web/src/components/Styling/Style.vue
@@ -30,7 +30,7 @@
     </div>
 
     <template v-if='mode === "code"'>
-        <TablerInput
+        <ObjectInput
             v-model='styles'
             placeholder='GL JS Style JSON'
             :rows='30'
@@ -70,12 +70,22 @@
 
                         <div v-if='open.has(l.id)' @click.stop.prevent class='ms-auto btn-list'>
                             <IconCode
+                                v-if='!code.has(l.id)'
                                 v-tooltip='"Code View"'
                                 class='cursor-pointer'
                                 @click='code.add(l.id)'
                                 :size='32'
                                 stroke='1'
                             />
+                            <IconEye
+                                v-else
+                                v-tooltip='"Visual View"'
+                                class='cursor-pointer'
+                                :size='32'
+                                stroke='1'
+                                @click='code.delete(l.id)'
+                            />
+
                             <TablerDelete
                                 v-tooltip='"Remove Layer"'
                                 displaytype='icon'
@@ -87,19 +97,23 @@
             </template>
             <div v-if='open.has(l.id)'>
                 <template v-if='code.has(l.id)'>
-                    <TablerInput v-model='styles[l_it]'/>
+                    <ObjectInput v-model='styles[l_it]'/>
                 </template>
-                <StyleLayer v-else :layer='l' />
+                <StyleLayer
+                    v-else
+                    :layer='l'
+                    :updateMap='false'
+                />
             </div>
         </div>
     </template>
 </template>
 
 <script>
 import {
-    TablerInput,
     TablerDelete,
 } from '@tak-ps/vue-tabler';
+import ObjectInput from './ObjectInput.vue';
 import {
     IconEye,
     IconPlus,
@@ -121,7 +135,7 @@ export default {
         IconCircle,
         StyleLayer,
         TablerDelete,
-        TablerInput
+        ObjectInput,
     },
     props: {
         modelValue: {
@@ -141,11 +155,11 @@ export default {
         }
     },
     watch: {
-        modelValue: function() {
-            this.styles = JSON.parse(JSON.stringify(this.modelValue))
-        },
-        tyles: function() {
-            this.$emit('update:modelValue', this.styles);
+        styles: {
+            deep: true,
+            handler: function() {
+                this.$emit('update:modelValue', this.styles);
+            }
         }
     },
     methods: {

diff --git a/api/web/src/stores/map.ts b/api/web/src/stores/map.ts
@@ -10,7 +10,6 @@
 import { defineStore } from 'pinia'
 import Overlay from './overlays/base.ts';
 import { std, stdurl } from '../std.js';
-import * as pmtiles from 'pmtiles';
 import mapgl from 'maplibre-gl'
 import * as terraDraw from 'terra-draw';
 import type { ProfileOverlay, Basemap, APIList } from '../types.ts';
@@ -47,9 +46,6 @@ export const useMapStore = defineStore('cloudtak', {
         },
         overlays: Array<Overlay>
     } => {
-        const protocol = new pmtiles.Protocol();
-        mapgl.addProtocol('pmtiles', protocol.tile);
-
         return {
             isLoaded: false,
             bearing: 0,