diff --git a/src/components/Map.vue b/src/components/Map.vue index 3cebb39..30afdb6 100644 --- a/src/components/Map.vue +++ b/src/components/Map.vue @@ -39,6 +39,7 @@ import {MutationTypes} from "@/store/mutation-types"; import LiveAtlasLeafletMap from "@/leaflet/LiveAtlasLeafletMap"; import {LiveAtlasLocation, LiveAtlasPlayer, LiveAtlasMapViewTarget} from "@/index"; import TileLayerOverlay from "@/components/map/layer/TileLayerOverlay.vue"; +import {ActionTypes} from "@/store/action-types"; export default defineComponent({ components: { @@ -69,6 +70,7 @@ export default defineComponent({ //Location and zoom to pan to upon next projection change scheduledView = ref(null), + pendingLayerUpdates = computed(() => !!store.state.pendingLayerUpdates.size), mapTitle = computed(() => store.state.messages.mapTitle); @@ -90,6 +92,7 @@ export default defineComponent({ currentMap, scheduledView, + pendingLayerUpdates, mapTitle } @@ -190,6 +193,21 @@ export default defineComponent({ this.scheduledView = viewTarget; } }, + async pendingLayerUpdates(size) { + const store = useStore(); + + if(size) { + const updates = await store.dispatch(ActionTypes.POP_LAYER_UPDATES, undefined); + + for (const update of updates) { + if(update[1]) { + this.leaflet.addLayer(update[0]); + } else { + this.leaflet.removeLayer(update[0]); + } + } + } + }, parsedUrl: { handler(newValue) { if(!newValue || !this.currentMap || !this.leaflet) { diff --git a/src/components/MapUI.vue b/src/components/MapUI.vue index 245f4a7..aaf0860 100644 --- a/src/components/MapUI.vue +++ b/src/components/MapUI.vue @@ -24,6 +24,7 @@
+
@@ -61,6 +62,7 @@ import LoginControl from "@/components/map/control/LoginControl.vue"; import LiveAtlasLeafletMap from "@/leaflet/LiveAtlasLeafletMap"; import LoadingControl from "@/components/map/control/LoadingControl.vue"; import ZoomControl from "@/components/map/control/ZoomControl.vue"; +import LayerControl from "@/components/map/control/LayerControl.vue"; export default defineComponent({ props: { @@ -71,6 +73,7 @@ export default defineComponent({ }, components: { + LayerControl, ZoomControl, LoadingControl, LogoControl, diff --git a/src/components/map/control/CoordinatesControl.vue b/src/components/map/control/CoordinatesControl.vue index da40dd6..eec66c6 100644 --- a/src/components/map/control/CoordinatesControl.vue +++ b/src/components/map/control/CoordinatesControl.vue @@ -31,6 +31,7 @@ import LiveAtlasLeafletMap from "@/leaflet/LiveAtlasLeafletMap"; import {onMounted, ref} from "vue"; import {Coordinate, CoordinatesControlOptions} from "@/index"; import {LeafletMouseEvent} from "leaflet"; +import {CoordinatesControlOptions} from "@/leaflet/control/CoordinatesControl"; export default defineComponent({ props: { @@ -42,7 +43,7 @@ export default defineComponent({ setup(props) { const store = useStore(), - componentSettings = computed(() => store.state.components.coordinatesControl), + componentSettings = computed(() => store.state.components.coordinatesControl as CoordinatesControlOptions), currentMap = computed(() => store.state.currentMap), chunkLabel = computed(() => store.state.messages.locationChunk), diff --git a/src/components/map/control/LayerControl.vue b/src/components/map/control/LayerControl.vue new file mode 100644 index 0000000..8aad30d --- /dev/null +++ b/src/components/map/control/LayerControl.vue @@ -0,0 +1,179 @@ + + + + + + + diff --git a/src/components/map/layer/MarkerSetLayer.vue b/src/components/map/layer/MarkerSetLayer.vue index 41552f8..8797901 100644 --- a/src/components/map/layer/MarkerSetLayer.vue +++ b/src/components/map/layer/MarkerSetLayer.vue @@ -21,11 +21,11 @@