Merge branch 'release/2.1.0'

.gitignore

@@ -24,5 +24,6 @@ yarn-error.log*
 .env
 /dist/
 /packages/docs/.vitepress/dist/
+/packages/docs/.vitepress/cache
 /packages/demo/.nuxt/
 /packages/demo/.output/

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@studiometa/vue-mapbox-gl-workspace",
   "private": true,
-  "version": "2.0.4",
+  "version": "2.1.0",
   "workspaces": [
     "packages/*"
   ],
@@ -26,7 +26,7 @@
     "prettier": "^2.8.2"
   },
   "dependencies": {
-    "esbuild": "^0.16.16",
+    "esbuild": "^0.16.17",
     "patch-package": "^6.5.1",
     "unplugin-vue": "^4.0.1"
   }

packages/demo/app.vue

@@ -1,5 +1,5 @@
 <script setup>
-  import { ref } from 'vue';
+  import { ref, computed } from 'vue';
   import {
     MapboxGeocoder,
     MapboxGeolocateControl,
@@ -20,6 +20,7 @@
   const lng = ref(0);
   const lat = ref(0);
   const zoom = ref(1);
+  const mapCenter = computed(() => [lng.value, lat.value]);
   const createdHandler = () => console.log('Map created!');
 
   const eventHandler = console.log.bind(null, '[Event]');
@@ -81,7 +82,7 @@
         style="height: 400px"
         :access-token="accessToken"
         map-style="mapbox://styles/mapbox/streets-v11"
-        :center="[lng, lat]"
+        :center="mapCenter"
         :zoom="zoom"
       >
         <MapboxImages :sources="iconSources">
@@ -139,12 +140,12 @@
       <fieldset class="controls__group">
         <legend>Longitude</legend>
         <input type="text" readonly="readonly" :value="lng" />
-        <input type="range" step="1" v-model="lng" />
+        <input type="range" step="1"  min="-100" max="100" v-model="lng" />
       </fieldset>
       <fieldset class="controls__group">
         <legend>Latitude</legend>
         <input type="text" readonly="readonly" :value="lat" />
-        <input type="range" step="1" v-model="lat" />
+        <input type="range" step="1" min="-90" max="90" v-model="lat" />
       </fieldset>
       <fieldset class="controls__group">
         <legend>Zoom</legend>

packages/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/vue-mapbox-gl-demo",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "scripts": {
     "dev": "nuxt dev",
     "build": "nuxt build"

packages/docs/.vitepress/components/MapboxClusterWithCustomImageDemo.vue

@@ -1,13 +1,16 @@
 <script setup>
+  import { ref } from "vue";
   import { MapboxMap, MapboxImage, MapboxCluster } from '@studiometa/vue-mapbox-gl';
+
+  const mapCenter = ref([0, 0]);
 </script>
 
 <template>
   <MapboxMap
     style="height: 400px"
     :access-token="MAPBOX_API_KEY"
     map-style="mapbox://styles/mapbox/streets-v11"
-    :center="[0, 0]"
+    :center="mapCenter"
     :zoom="1">
     <MapboxImage
       id="cat"

packages/docs/.vitepress/components/MapboxImagesDemo.vue

@@ -1,6 +1,9 @@
 <script setup>
+  import { ref } from "vue";
   import { MapboxMap, MapboxImages, MapboxLayer } from '@studiometa/vue-mapbox-gl';
 
+  const mapCenter = ref([0, 0]);
+
   const images = [
     {
       src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Dog_silhouette.svg/429px-Dog_silhouette.svg.png',
@@ -54,7 +57,7 @@
     style="height: 400px"
     :access-token="MAPBOX_API_KEY"
     map-style="mapbox://styles/mapbox/streets-v11"
-    :center="[0, 0]"
+    :center="mapCenter"
     :zoom="1">
     <MapboxImages :sources="images">
       <MapboxLayer id="pois" :options="layerOptions" />

packages/docs/.vitepress/components/MapboxMarkerCustomHtmlDemo.vue

@@ -1,13 +1,16 @@
 <script setup>
+  import { ref } from "vue";
   import { MapboxMap, MapboxMarker } from '@studiometa/vue-mapbox-gl';
+
+  const mapCenter = ref([0, 0]);
 </script>
 
 <template>
   <MapboxMap
     style="height: 400px"
     :access-token="MAPBOX_API_KEY"
     map-style="mapbox://styles/mapbox/streets-v11"
-    :center="[0, 0]"
+    :center="mapCenter"
     :zoom="1">
     <MapboxMarker :lng-lat="[0, 0]">
       <p class="custom-marker">Hello world!</p>

packages/docs/.vitepress/components/MapboxMarkerPopupDemo.vue

@@ -1,13 +1,16 @@
 <script setup>
+  import { ref } from "vue";
   import { MapboxMap, MapboxMarker } from '@studiometa/vue-mapbox-gl';
+
+  const mapCenter = ref([0, 0]);
 </script>
 
 <template>
   <MapboxMap
     style="height: 400px"
     :access-token="MAPBOX_API_KEY"
     map-style="mapbox://styles/mapbox/streets-v11"
-    :center="[0, 0]"
+    :center="mapCenter"
     :zoom="1">
     <MapboxMarker :lng-lat="[0, 0]" popup>
       <template v-slot:popup>

packages/docs/components/MapboxGeolocateControl/index.md

@@ -74,6 +74,13 @@ If true the Geolocate Control becomes a toggle button and when active the map wi
 
 By default, if showUserLocation is true , a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to false to disable. Always disabled when showUserLocation is false .
 
+### `showUserHeading`
+- Type `[ Boolean ]`
+- Required: `false`
+- Default `false`
+
+If `true` an arrow will be drawn next to the user location dot indicating the device's heading. This only has affect when `trackUserLocation` is `true`.
+
 ### `showUserLocation`
 - Type `[ Boolean ]`
 - Required: `false`

packages/docs/components/MapboxImage/index.md

@@ -1,5 +1,8 @@
 <script setup>
+  import { ref } from "vue";
   import { MapboxMap, MapboxImage, MapboxLayer } from '@studiometa/vue-mapbox-gl';
+
+  const mapCenter = ref([0, 0]);
 </script>
 
 # MapboxImage
@@ -24,7 +27,7 @@ Add an image to be used used in `icon-image`, `background-pattern`, `fill-patter
     style="margin-top: 1em; height: 400px;"
     :access-token="MAPBOX_API_KEY"
     map-style="mapbox://styles/mapbox/streets-v11"
-    :center="[0, 0]"
+    :center="mapCenter"
     :zoom="1">
   <MapboxImage
     src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png"
@@ -59,15 +62,18 @@ Add an image to be used used in `icon-image`, `background-pattern`, `fill-patter
 
 ```vue {12-14}
 <script setup>
+  import { ref } from "vue";
   import { MapboxMap, MapboxImage } from '@studiometa/vue-mapbox-gl';
+
+  const mapCenter = ref([0, 0]);
 </script>
 
 <template>
   <MapboxMap
     style="height: 400px"
     access-token="..."
     map-style="mapbox://styles/mapbox/streets-v11"
-    :center="[0, 0]"
+    :center="mapCenter"
     :zoom="1">
     <MapboxImage
       src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png"

packages/docs/components/MapboxMap/index.md

@@ -1,5 +1,8 @@
 <script setup>
+  import { ref } from "vue";
   import { MapboxMap } from '@studiometa/vue-mapbox-gl';
+
+  const mapCenter = ref([0, 0]);
 </script>
 
 # MapboxMap
@@ -21,21 +24,24 @@ It is recommended to have a look at their [API reference](https://docs.mapbox.co
     style="margin-top: 1em; height: 400px;"
     :access-token="MAPBOX_API_KEY"
     map-style="mapbox://styles/mapbox/streets-v11"
-    :center="[0, 0]"
+    :center="mapCenter"
     :zoom="1" />
 </ClientOnly>
 
 ```vue
 <script setup>
+  import { ref } from "vue";
   import { MapboxMap } from '@studiometa/vue-mapbox-gl';
+
+  const mapCenter = ref([0, 0]);
 </script>
 
 <template>
   <MapboxMap
     style="height: 400px"
     access-token="..."
     map-style="mapbox://styles/mapbox/streets-v11"
-    :center="[0, 0]"
+    :center="mapCenter"
     :zoom="1" />
 </template>
 ```

packages/docs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@studiometa/vue-mapbox-gl-docs",
   "private": true,
-  "version": "2.0.4",
+  "version": "2.1.0",
   "scripts": {
     "dev": "vitepress",
     "build": "vitepress build"

packages/vue-mapbox-gl/components/MapboxCluster.vue

@@ -195,6 +195,12 @@
 
     // Emit a cluster click event
     emit('mb-cluster-click', clusterId, event);
+
+    // Return before move map if event is defaultPrevented
+    if (event.defaultPrevented) {
+      return;
+    }
+
     unref(map)
       .getSource(unref(sourceId))
       .getClusterExpansionZoom(clusterId, (err, zoom) => {

packages/vue-mapbox-gl/components/MapboxGeocoder.vue

@@ -132,7 +132,7 @@
 </script>
 
 <script setup>
-  import { onMounted, ref, unref, computed } from 'vue';
+  import { onMounted, ref, unref, computed, watch } from 'vue';
   import { useControl } from '../composables/index.js';
 
   const props = defineProps(propsConfig);
@@ -178,9 +178,12 @@
 
   // Add to root element if map does not exist.
   onMounted(() => {
-    if (!unref(map)) {
-      unref(control).addTo(unref(root));
-    }
+    const stop = watch(control, (newValue) => {
+      if (newValue && !unref(map) && unref(root)) {
+        newValue.addTo(unref(root));
+        stop();
+      }
+    });
   });
 
   defineExpose({ control });

packages/vue-mapbox-gl/components/MapboxGeolocateControl.vue

@@ -34,6 +34,10 @@
       type: Boolean,
       default: true,
     },
+    showUserHeading: {
+      type: Boolean,
+      default: true,
+    },
     showUserLocation: {
       type: Boolean,
       default: true,

packages/vue-mapbox-gl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/vue-mapbox-gl",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "A small components library to use Mapbox GL in Vue 3.",
   "homepage": "https://github.com/studiometa/vue-mapbox-gl#readme",
   "bugs": {
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@mapbox/mapbox-gl-geocoder": "^5.0.1",
     "@studiometa/js-toolkit": "^2.7.0",
-    "mapbox-gl": "^2.11.1",
+    "mapbox-gl": "^2.12.0",
     "vue": "^3.2.45"
   },
   "peerDependencies": {