chore: cleanup

lib/v-mapbox/constants/events/layer.ts

@@ -1,4 +1,4 @@
-import { MapLayerEventType } from 'maplibre-gl';
+import type { MapLayerEventType } from 'maplibre-gl';
 
 export const mapLayerEvents: Array<keyof MapLayerEventType> = [
   'click',

lib/v-mapbox/constants/events/map.ts

@@ -1,4 +1,4 @@
-import { MapEventType } from 'maplibre-gl';
+import type { MapEventType } from 'maplibre-gl';
 
 export const mapEvents: Array<keyof MapEventType> = [
   'error',

lib/v-mapbox/constants/events/popup.ts

@@ -1 +1 @@
-export const popupEvents = ['open', 'close'];
+export const popupEvents = ['open', 'close'] as Array<'open' | 'close'>;

lib/v-mapbox/controls/attribution/VControlAttribution.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-  import type { AttributionOptions, ControlPosition } from './types';
   import { AttributionControl } from 'maplibre-gl';
   import { onMounted } from 'vue';
   import { MapKey, injectStrict } from '../../utils';
+  import type { AttributionControlOptions, ControlPosition } from './types';
 
-  const defaultOptions: AttributionOptions = {
+  const defaultOptions: AttributionControlOptions = {
     compact: false,
     customAttribution: undefined,
   };
 
   const props = withDefaults(
     defineProps<{
-      options?: AttributionOptions;
+      options?: AttributionControlOptions;
       position?: ControlPosition;
     }>(),
     {
@@ -22,7 +22,7 @@
 
   const slots = useSlots();
 
-  let map = injectStrict(MapKey);
+  const map = injectStrict(MapKey);
 
   onMounted(() => {
     addControl();
@@ -36,7 +36,7 @@
       };
     }
     if (slots && slots.default?.()) {
-      options.customAttribution = slots.default()[0]
+      options.customAttribution = slots.default()[0]!
         .children as unknown as string;
     }
     const control = new AttributionControl(options);
@@ -45,5 +45,5 @@
 </script>
 
 <template>
-  <slot />
+  <slot></slot>
 </template>

lib/v-mapbox/controls/attribution/types.ts

@@ -1 +1 @@
-export type { AttributionOptions, ControlPosition } from 'maplibre-gl';
+export type { AttributionControlOptions, ControlPosition } from 'maplibre-gl';

lib/v-mapbox/controls/fullscreen/VControlFullscreen.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-  import type { ControlPosition, FullscreenOptions } from './types';
   import { FullscreenControl } from 'maplibre-gl';
   import { onMounted } from 'vue';
   import { MapKey, injectStrict } from '../../utils';
+  import type { ControlPosition, FullscreenControlOptions } from './types';
 
-  const defaultOptions: FullscreenOptions = {
+  const defaultOptions: FullscreenControlOptions = {
     container: undefined,
   };
 
   const props = withDefaults(
     defineProps<{
-      options?: FullscreenOptions;
+      options?: FullscreenControlOptions;
       position?: ControlPosition;
     }>(),
     {
@@ -19,7 +19,7 @@
     },
   );
 
-  let map = injectStrict(MapKey);
+  const map = injectStrict(MapKey);
 
   onMounted(() => {
     addControl();

lib/v-mapbox/controls/fullscreen/types.ts

@@ -1 +1 @@
-export type { ControlPosition, FullscreenOptions } from 'maplibre-gl';
+export type { FullscreenControlOptions, ControlPosition } from 'maplibre-gl';

lib/v-mapbox/controls/geolocate/VControlGeolocate.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-  import type { ControlPosition, GeolocateOptions } from './types';
   import { GeolocateControl } from 'maplibre-gl';
   import { onMounted } from 'vue';
-  import { geolocateControlEvents as events } from './events';
   import { MapKey, injectStrict } from '../../utils';
+  import { geolocateControlEvents as events } from './events';
+  import type { ControlPosition, GeolocateControlOptions } from './types';
 
-  const defaultOptions: GeolocateOptions = {
+  const defaultOptions: GeolocateControlOptions = {
     fitBoundsOptions: {
       linear: false,
       offset: [0, 0],
@@ -23,7 +23,7 @@
 
   const props = withDefaults(
     defineProps<{
-      options?: GeolocateOptions;
+      options?: GeolocateControlOptions;
       position?: ControlPosition;
     }>(),
     {
@@ -34,7 +34,7 @@
 
   const emit = defineEmits(events);
 
-  let map = injectStrict(MapKey);
+  const map = injectStrict(MapKey);
 
   onMounted(() => {
     addControl();

lib/v-mapbox/controls/geolocate/types.ts

@@ -1 +1 @@
-export type { ControlPosition, GeolocateOptions } from 'maplibre-gl';
+export type { GeolocateControlOptions, ControlPosition } from 'maplibre-gl';

lib/v-mapbox/controls/navigation/VControlNavigation.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-  import type { ControlPosition, NavigationOptions } from './types';
   import { NavigationControl } from 'maplibre-gl';
   import { onMounted, inject } from 'vue';
   import { MapKey } from '../../utils';
+  import type { ControlPosition, NavigationOptions } from './types';
 
   const defaultOptions: NavigationOptions = {
     showCompass: true,

lib/v-mapbox/controls/scale/VControlScale.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-  import type { ControlPosition, ScaleOptions } from './types';
   import { onMounted, inject } from 'vue';
   import { ScaleControl } from 'maplibre-gl';
   import { MapKey } from '../../utils';
+  import type { ControlPosition, ScaleControlOptions } from './types';
 
-  const defaultOptions: ScaleOptions = {
+  const defaultOptions: ScaleControlOptions = {
     maxWidth: 100,
     unit: 'metric',
   };
 
   const props = withDefaults(
     defineProps<{
-      options?: ScaleOptions;
+      options?: ScaleControlOptions;
       position?: ControlPosition;
     }>(),
     {
@@ -31,5 +31,3 @@
     map?.value.addControl(control, props.position);
   };
 </script>
-
-<template></template>

lib/v-mapbox/controls/scale/types.ts

@@ -1 +1 @@
-export type { ControlPosition, ScaleOptions } from 'maplibre-gl';
+export type { ControlPosition, ScaleControlOptions } from 'maplibre-gl';

lib/v-mapbox/layers/maplibre/canvas/VLayerMaplibreCanvas.vue

@@ -23,8 +23,8 @@
       before: '',
     },
   );
-  let map = injectStrict(MapKey);
-  let loaded: Ref<boolean> = ref(false);
+  const map = injectStrict(MapKey);
+  const loaded: Ref<boolean> = ref(false);
 
   const layer = {
     ...props.layer,
@@ -62,5 +62,5 @@
 </script>
 
 <template>
-  <slot />
+  <slot></slot>
 </template>

lib/v-mapbox/layers/maplibre/geojson/VLayerMaplibreGeojson.vue

@@ -1,27 +1,57 @@
 <script setup lang="ts">
   import type { Ref } from 'vue';
-  import type { Props } from './types';
   import { onMounted, onBeforeUnmount, ref, watch } from 'vue';
+  import type { GeoJSONSource, LayerSpecification } from 'maplibre-gl';
   import { injectStrict, MapKey } from '../../../utils';
+  import type { Props } from './types';
 
   const props = withDefaults(defineProps<Props>(), {
     sourceId: 'maplibre.gl-geojson-source',
     layerId: 'maplibre.gl-geojson-layer',
-    // source: {} as GeoJSONSourceSpecification,
-    // layer: {} as LayerSpecification,
     before: '',
   });
-  let map = injectStrict(MapKey);
-  let loaded: Ref<boolean> = ref(false);
 
-  const layer = {
-    ...props.layer,
-    id: props.layerId,
-    source: props.sourceId,
+  const map = injectStrict(MapKey);
+  const loaded: Ref<boolean> = ref(false);
+
+  const addLayer = (): void => {
+    if (!map.value.getSource(props.sourceId)) {
+      map.value.addSource(props.sourceId, props.source);
+    }
+    if (!map.value.getLayer(props.layerId)) {
+      const layerSpec = {
+        ...props.layer,
+        id: props.layerId,
+        source: props.sourceId,
+      } as LayerSpecification;
+      map.value.addLayer(layerSpec, props.before);
+    }
+  };
+
+  const updateSource = (): void => {
+    const source = map.value.getSource(props.sourceId) as
+      | GeoJSONSource
+      | undefined;
+    if (source && 'setData' in source) {
+      source.setData(props.source.data);
+    }
   };
 
+  const updateLayer = (): void => {
+    if (map.value.getLayer(props.layerId)) {
+      Object.entries(props.layer.paint || {}).forEach(([key, value]) => {
+        map.value.setPaintProperty(props.layerId, key, value);
+      });
+      Object.entries(props.layer.layout || {}).forEach(([key, value]) => {
+        map.value.setLayoutProperty(props.layerId, key, value);
+      });
+    }
+  };
+
+  watch(() => props.source, updateSource, { deep: true });
+  watch(() => props.layer, updateLayer, { deep: true });
+
   map.value.on('style.load', () => {
-    // https://github.com/mapbox/mapbox-gl-js/issues/2268#issuecomment-401979967
     const styleTimeout = () => {
       if (!map.value.isStyleLoaded()) {
         loaded.value = false;
@@ -40,23 +70,21 @@
   });
 
   onMounted(() => {
-    addLayer();
+    if (map.value.isStyleLoaded()) {
+      addLayer();
+    }
   });
 
   onBeforeUnmount(() => {
-    if (map.value.getLayer(props.layer.id)) {
-      map.value.removeLayer(props.layer.id);
+    if (map.value.getLayer(props.layerId)) {
+      map.value.removeLayer(props.layerId);
+    }
+    if (map.value.getSource(props.sourceId)) {
       map.value.removeSource(props.sourceId);
     }
   });
-
-  const addLayer = (): void => {
-    console.log('props: ', props);
-    map.value.addSource(layer.source, props.source);
-    map.value.addLayer(layer, props.before);
-  };
 </script>
 
 <template>
-  <slot />
+  <slot></slot>
 </template>