fix: multiple small bug fixes

package.json

@@ -18,7 +18,7 @@
     "bundle": "rollup -c build/rollup.config.ts",
     "bundle:min": "rollup -c build/rollup.config.min.ts",
     "build:dts": "vue-tsc --declaration --emitDeclarationOnly --skipLibCheck && npm run lintfix",
-    "prepare": "husky install",
+    "prepare": "husky install && npm run build",
     "docs:dev": "vuepress dev docs --port 3000",
     "docs:build": "vuepress build docs",
     "lint": "npm run lint:prettier && npm run lint:eslint && npm run lint:css",

src/controls/VControlGeolocate.vue

@@ -7,7 +7,7 @@
   import { injectStrict, MapKey } from '../utils';
 
   export default defineComponent({
-    name: 'VControlFullscreen',
+    name: 'VControlGeolocate',
     props: {
       options: {
         type: Object as PropType<{
@@ -18,7 +18,7 @@
           showUserLocation?: boolean;
         }>,
         default: () => ({}),
-        required: true,
+        required: false,
       },
       position: {
         type: String as PropType<
@@ -50,5 +50,6 @@
         });
       }
     },
+    render: () => [],
   });
 </script>

src/controls/VControlNavigation.vue

@@ -5,7 +5,7 @@
   import { injectStrict, MapKey } from '../utils';
 
   export default defineComponent({
-    name: 'VControlFullscreen',
+    name: 'VControlNavigation',
     props: {
       options: {
         type: Object as PropType<{

src/controls/VControlScale.vue

@@ -5,7 +5,7 @@
   import { injectStrict, MapKey } from '../utils';
 
   export default defineComponent({
-    name: 'VControlFullscreen',
+    name: 'VControlScale',
     props: {
       options: {
         type: Object as PropType<{ maxWidth?: number; unit?: string }>,

src/layers/mapbox/VLayerMapboxGeojson.vue

@@ -5,8 +5,8 @@
 </template>
 <script lang="ts">
   import type { AnyLayer, GeoJSONSourceRaw } from 'mapbox-gl';
-  import type { PropType, Ref } from 'vue';
-  import { defineComponent, onMounted, ref, watch } from 'vue';
+  import type { PropType } from 'vue';
+  import { defineComponent, onMounted, onUnmounted, watch } from 'vue';
   import { injectStrict, MapKey } from '../../utils';
 
   export default defineComponent({
@@ -36,52 +36,43 @@
         default: '',
         required: false,
       },
+      visible: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+        required: false,
+      },
     },
     setup(props) {
       let map = injectStrict(MapKey);
-      let loaded: Ref<boolean> = ref(false);
 
       const layer = {
         ...props.layer,
         id: props.layerId,
         source: props.sourceId,
       };
 
-      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;
-            setTimeout(styleTimeout, 200);
-          } else {
-            loaded.value = true;
-          }
-        };
-        styleTimeout();
-      });
-
-      /**
-       * Watcher(s)
-       */
-      watch(loaded, (value) => {
-        if (value) {
-          addLayer();
-        }
+      onMounted(() => {
+        map.value.addSource(props.sourceId, props.source);
+        map.value.addLayer(layer, props.before);
       });
 
-      onMounted(() => {
-        addLayer();
+      onUnmounted(() => {
+        if (map.value.getLayer(props.layerId))
+          map.value.removeLayer(props.layerId);
+        if (map.value.getSource(props.sourceId))
+          map.value.removeSource(props.sourceId);
       });
 
-      /**
-       * Re–adds the layer when style changed
-       *
-       * @returns {void}
-       */
-      function addLayer(): void {
-        map.value.addSource(props.sourceId, props.source);
-        map.value.addLayer(layer, props.before);
-      }
+      watch(
+        () => props.visible,
+        (visible) => {
+          map.value.setLayoutProperty(
+            props.layerId,
+            'visibility',
+            visible ? 'visible' : 'none',
+          );
+        },
+      );
     },
   });
 </script>