Hi,
is the library already compatible with Vue 3 ?
If not, are there any plans on supporting Vue 3 ?
Thanks !

How can we get access to the GeolocateControl instance so that we can use the trigger() function?

https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-rtl-text/

Hello,
the new MapboxGeolocateControl is not exported from the src/components/index.js file, so it is not available in the last build (1.3.1). I don't know enough Vuepress to understand why the demo is working,

Btw, thanks for all the updates you made these last days !

I'm getting the following error:

Error: There is already a source with this ID

When I'm using two MapboxCluster

 <MapboxMap
          map-style="mapbox://styles/mapbox/streets-v11"
          style="height: 100%"
          access-token="pk.eyJ1IjoicmFmbnVzcyIsImEiOiIzMVE1dnc0In0.3FNMKIlQ_afYktqki-6m0g"
          @mb-created="(mapInstance) => (map = mapInstance)"
        >
          <MapboxCluster
            :data="myLocationGeojson"
          />
          <MapboxCluster
            :data="hotspotGeojson"
          />
        </MapboxMap>

The id seems to be "mb-cluster-0-source" for both MapboxSource created.
Is there a way to define this id at construction?

Good day,

Is there a way to access the marker location after draggend? I get the event to trigger with the below code, but can't seem to access the markers new location. I have access to the current location via Vue dev tools but it is set according to my manual geo or my address geocode lat lng.

@mb-dragend='markerMoved'

const markerMoved = () => {
console.log('moved');
}

This one is simple. It looks like clusterProperties got missed when implementing the props. I've forked this locally and modified the compiled code but do not have access to the individual components. So, here is my suggestion:

In vue-mapbox-gl/components/MapboxCluster.vue, add this new prop:

clusterProperties: {
		type: Object,
		default: null,
},

In the MapboxCluster setup function, I had to also extract and return the newly added prop, like this:

const { data, clusterMaxZoom, clusterRadius, clusterProperties, } = props;
return {
	type: "geojson",
	cluster: true,
	data,
	clusterMaxZoom,
	clusterRadius,
	clusterProperties,
};

Vue may handle this automatically, I'm not sure.

Thats it. Now, we can set custom properties to use in our cluster styling. I used this to color clusters differently based on if one of the markers inside has an "alert" tied to it.

This could be usefull to have better error display, especially since all mapbox child components are supposed to be use inside the mapbox-map component :

This exemple

<mapbox-map>
</mapbox-map>
<mapbox-marker>
</mapbox-marker>

will through TypeError: "this.$map is not a function", referencing the injectMap mixin

A type error like : "Make sure all your mapbox components are wrapped inside a " could be easier to understand.

Hey,

I've been trying to get the following working:

https://docs.mapbox.com/mapbox-gl-js/example/geojson-line/

Here is a codesandbox with my attempt so far:

https://codesandbox.io/s/hopeful-christian-7nqqkm

Any ideas?

Is there a way to get current user location coordinates when it updated by MapboxGeolocateControl

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

• Update actions/checkout action to v4
• Update actions/setup-node action to v4
• Update dependency @studiometa/eslint-config to v4
• Update dependency @studiometa/prettier-config to v4
• Update dependency eslint to v9
• Update dependency prettier to v3
• Update dependency unplugin-vue to v5
• 🔐 Create all pending approval PRs at once 🔐

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• Update dependency @studiometa/js-toolkit to v2.12.1
• Update dependency vue to v3.4.34
• Lock file maintenance

Pending Status Checks

These updates await pending status checks. To force their creation now, click the checkbox below.

• Update dependency tailwindcss to v3.4.7

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency esbuild to ^0.23.0

Detected dependencies

Custom use it's pretty straight forward but it would be great if it was available as a component and it dealt with everything like MapboxNavigationControl does.

https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol

Hey @titouanmathis, is there any reason why you don't allow for a custom id and auto generate ones with add an incremental index, for the 4 components included in a cluster (source, clusters layer, cluster-point layer unclustered layer)?

I've noticed some issues when sometimes (haven't figured out when), the index ends up different from 0. Would it be possible to add a prop so that one can set a specific prefix? I can help with a PR if that can help.

Hello,
according to the docs for mapbox-gl-geooder, there is a clear event that is "Emitted when the input is cleared".

That would translate to a @mb-clear event for this component. Could you please add it in a next release ?

Thanks for taking this into consideration

If not, is there a way to add fullscreen controls manually?

Hi,

I read the doc but can't find how to customize markers icon.
I first tried with the MapboxImage component but impossible to link the id with the MapboxMarker component.
I then tried to pass a custom element props in MapboxMarker component but all my markers appeared stacked in one place (I have a v-for in MapboxMarker component to set lng-lat props).

Do you please have some working exemples ?

Best regards

We have a problem that when given a default center, that fitBounds does not zoom to the area with the given bounds and the new center of those bounds.

We set up the map according to the docs

    <MapboxMap 
         :access-token="token" 
         :center="[10.16493, 50.00602]" 
         :zoom="6" 
         map-style="mapbox://styles/mapbox/streets-v11" 
         @mb-created="(mapboxInstance) => map = mapboxInstance" 
         @mb-load="adjustBounds"
    >
        <MapboxMarker v-for="place in places" :key="place" :lng-lat="[place.longitude, place.latitude]" />
    </MapboxMap>

This is the code that should fit the map to the new bounds

const map = ref();

watch(
    () => props.places,
    () => {
        adjustBounds();
    }
);

const adjustBounds = () => {
    if (props.places.length === 0) {
        return;
    }

    let bounds = new Mapbox.LngLatBounds();

    for (const place of props.places) {
        bounds.extend([place.longitude, place.latitude]);
    }

    map.value.fitBounds(bounds, {
        padding: 50,
        duration: 3000,
    });
};

We debugged a little and the fitBounds function returns a new map object but with the default center set above, not with the new one internally computed. The nw and se boundaries of the map are new, but the center is not. Hence the map is showing the markers in a section of the map, but it stays focused on the default center and doesn't zoom.

Has anyone an example how he adjust the bounds with a given set of places returned form a search?

Both of these projects are trying to accomplish the same thing using vue. I think it would be much more beneficial to have more devs working on one project then split between two that accomplish the same goal. Just a thought. Ty

v-mapbox project https://github.com/geospoc/v-mapbox

Support new GL JS v3 to enable new mapbox features

Since mapbox-gl 2.0.0, it is not possible to generate a map with accessToken set to "no-token". See here or here

any way to set the height to max/100% of the map instead of a px value? much appreciated.

Think you meant yarn or npm

This is my code. I'm getting this error. Cannot read properties of undefined (reading 'addTo')

<template>

            <MapboxGeocoder 
              :access-token="mapbox_token"
              :types="'address'"
              :country="'us'"
              :proximity="[-122.3995752 , 37.7881856]"
              map-style="mapbox://styles/mapbox/streets-v11"
              @mb-created="instance => control = instance"
              @mb-result="addAddress($event)"/>
 
</template>


<script>

    import { ref } from 'vue'
    import { MapboxMap, MapboxGeocoder } from '@studiometa/vue-mapbox-gl';
    import '@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css';
   

    export default {
    
    components: {
        MapboxMap,
        MapboxGeocoder
    },
    props: {
      
    },
    emits: [
        'AddressSelected'
    ],  
    setup(props, {emit}){
        const control = ref();
        const mapbox_token = process.env.MIX_MAPBOX_SECRET
        const addAddress = (data) => { 
            emit('AddressSelected', data.result)
        }

        return{
            mapbox_token,
            control,
            addAddress
        }
    },

    }

    </script>

In the MapboxCluster component, there is the click handler function, this function moves the view to match the zoom level and the center of the clustered point.

My problem is that I want to avoid that behavior when I am drawing on some other layer, right now that is not possible because even I have defaultPrevented the event that the param is not taking on account before the view's movement.

Is there any workaround to this problem?

Hello,
the docs for MapboxMap mention a @mb-ready event that is not fired, the right one is @mb-created.

https://vue-mapbox-gl.meta.fr/components/MapboxMap.html#accessing-the-mapbox-instance

• Sort the items in the listing by their distance to the center of the map
• Add an option to disable/enable automatic filtering of the items in view (à la Airbnb)
• Pass the filterFeaturesInView method as a slot props in each slot to allow using it on demand
• Add a props to pass an initial search query string to the MapboxGeocoder component
• Separate each parts of the store locator into multiple components for easier composition

Add a section on the documentation on "how to load a custom marker image for the StoreLocator component"

Add the important details:

• image must be png
• Adapt icon-size param if you load a png in size 2x or 3x
• icon-image param must use the same name as in addImage fn

Code:

<template>
    <store-locator
      :items="items"
      :mapbox-cluster="{
        'unclustered-point-layer-type': 'circle',
        'unclustered-point-layer-type': 'symbol',
        'unclustered-point-layout': {
          'icon-image': 'pin',
          'icon-size': 1
        },
        'unclustered-point-paint': {},
      }"
      access-token="..."
      :mapbox-map="{
        mapStyle: '...',
        center: [ 2.0, 48.0 ],
        zoom: 1,
      }"
      @map-created="onMapCreated">
      <!-- template -->
    </store-locator>
</template>

<script>
  export default {
    props: {
      items: {
        type: Array,
        required: true,
      },
   },
    methods: {
      onMapCreated(map) {
       const imgPath = 'imag.png';
        map.loadImage(imagePath, (error, image) => {
          if (error) { throw error; }
          map.addImage('pin', image);
        });
      },
    },
  };
</script>

The geocoder does not emit the created event with the instance of the geocoder.

First of all, thanks for this project 👍🏻

Map is working.

But when I do type check with nuxi typecheck command I get:

    "vue-tsc": "1.6.5"

Installing these deps did not help:

{
"@types/mapbox__mapbox-gl-geocoder": "^4.7.3",
 "@types/mapbox-gl": "^2.7.11"
}

Solved it by adding into shims.d.ts file:

declare module '@studiometa/vue-mapbox-gl' {
    export const MapboxMap: any;
    export const MapboxMarker: any;
    export const MapboxCluster: any;
    export const MapboxGeocoder: any;
    export const MapboxGeolocateControl: any;
    export const MapboxImage: any;
    export const MapboxImages: any;
    export const MapboxLayer: any;
    export const MapboxNavigationControl: any;
    export const MapboxPopup: any;
    export const MapboxSource: any;
    export const StoreLocator: any;
}

Could index.d.ts be added to library?

I get the following error, when I install the package without the @mapbox/mapbox-gl-geocoder.

✘ [ERROR] Could not resolve "@mapbox/mapbox-gl-geocoder"

    ../../node_modules/@studiometa/vue-mapbox-gl/index.js:580:27:
      580 │ import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder";
          ╵                            ~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@mapbox/mapbox-gl-geocoder" as external to exclude it from the bundle,
  which will remove this error.

The documentation suggests the installation is optional, see here https://vue-mapbox-gl.studiometa.dev/guide/installation/

# The geocoder package is only required if you use the `MapboxGeocoder` component
npm install @mapbox/mapbox-gl-geocoder

The code does require the package though. So who is correct?

The current Geocoder Implementation does not allow for any results to be displayed, more detailed than locality. Please make it possible to adjust this setting or allow streets to be searchable as well! As documented in https://docs.mapbox.com/api/search/geocoding/!

An error occurred while parsing the WebWorker bundle. This is most likely due to improper transpilation by Babel; please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

Any idea?

I'm using with "nuxt 3"

Cooperative Gestures and perhaps some other newer options are missing from the MapboxMap props declarations. Could this be added or perhaps allow the developer to pass any options they like to reduce work on your side?

Thanks

did not find an example of a custom Mapbox Cluster, is it possible to do this?

The component MapboxGeocoder work but i have this error in my console when i use it :

TypeError: Cannot set properties of undefined (setting '_eventEmitter')
    at MapboxGeocoder

I don't know if the error comes from my code or the component itself

my code :

import { MapboxMap, MapboxImage, MapboxCluster, MapboxPopup } from '@studiometa/vue-mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import axios from 'redaxios'
import Runner from '../assets/img/runner.png'
import 'flexboxgrid'
import '@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css'
import mapboxgl from 'mapbox-gl'
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'

const tokenMapBox = import.meta.env.VITE_MAPBOX_API_KEY
const tokenNocodb = import.meta.env.VITE_XC_API_TOKEN

const mapCenter = ref([3, 47])
const isOpen = ref(false)
const position = ref([0, 0])
const content = ref()
const map = ref(null)
const geocoder = ref(null)

const geojsonData = ref({
  type: 'FeatureCollection',
  features: []
})

onMounted(() => {
  getConcess()

  // Initialize MapboxGeocoder
  geocoder.value = new MapboxGeocoder({
    accessToken: tokenMapBox,
    mapboxgl: mapboxgl
  })

  // Append the geocoder to the map container
  map.value.addControl(geocoder.value)
})


const getConcess = async () => {
  const response = await axios.get('', {
    headers: {
    }
  })

  let data = response.data.list


  data.forEach((item) => {
    geojsonData.value.features.push({
      type: 'Feature',
      properties: {
        id: item.Id,
        title: item.titre,
        date: item.date_start,
        ville: item.ville,
        lat: item.latitude,
        lon: item.longitude
      },
      geometry: { type: 'Point', coordinates: [item.longitude, item.latitude] }
    })
  })
}


const flyto = (features) => {
  const { lat, lon, title, date, ville } = features
  map.value.flyTo({ center: [lon, lat], zoom: 14 })
  isOpen.value = false
  openPopup({
    geometry: { coordinates: [lon, lat] },
    properties: { title: title, date: date, ville: ville }
  })
}


const openPopup = async ({ geometry, properties }) => {
  await nextTick()
  console.log(geometry, properties)
  position.value = [...geometry.coordinates]
  isOpen.value = true

  content.value = Object.fromEntries(
    Object.entries(properties).map(([key, value]) => {
      try {
        return [key, JSON.parse(value)]
      } catch (err) {
        // Silence is golden.
      }
      return [key, value]
    })
  )
}
</script>

<template>
  <div class="row">
    <div class="col-xs-3 list">
      <ul>
        <li
          v-for="feature in geojsonData.features"
          :key="feature.properties.id"
          @click="flyto(feature.properties)"
        >
          <h2>{{ feature.properties.title }}</h2>
          <p>{{ feature.properties.date }}</p>
          <p>{{ feature.properties.ville }}</p>
        </li>
      </ul>
    </div>
    <div class="col-xs-9">
      <MapboxMap
        style="height: 400px"
        :access-token="tokenMapBox"
        map-style="mapbox://styles/mapbox/streets-v11"
        :center="mapCenter"
        :zoom="4"
        @mb-created="(mapInstance) => (map = mapInstance)"
      >
        <MapboxPopup
          v-if="isOpen"
          :key="position.join('-')"
          :lng-lat="position"
          anchor="bottom"
          @mb-close="() => (isOpen = false)"
        >
          <h2>{{ content.title }}</h2>
          <p>{{ content.date }}</p>
          <p>{{ content.ville }}</p>
        </MapboxPopup>
        <MapboxImage id="runner" :src="Runner">
          <MapboxCluster
            :data="geojsonData"
            unclustered-point-layer-type="symbol"
            :unclustered-point-layout="{
              'icon-image': 'runner',
              'icon-size': 0.2
            }"
            :unclustered-point-paint="null"
            @mb-feature-click="openPopup"
            :clustersPaint="{
              'circle-color': '#002c5f',
              'circle-radius': 30
            }"
          />
        </MapboxImage>
        <MapboxGeocoder />
      </MapboxMap>
    </div>
  </div>
</template>```

if anyone can help me that would be great !

I'd like to pan and zoom the map to a marker once a marker is clicked. I've tried to add @md-click and @click to the MapboxMarker components to perform these actions manually, but these events are not triggered by the child component.

Would this be as simple as adding 'click' to https://github.com/studiometa/vue-mapbox-gl/blob/master/packages/vue-mapbox-gl/components/MapboxMarker.vue#L76 ?

Hi,
it would be useful to implement the trigger() method of the GeolocateControl (https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol#trigger) in the MapboxGeolocateControl component.

We could provide a way to access the Control instance outside of the component, just like we can access the Mapbox instance via @mb-ready @mb-created. Alternatively, maybe that a prop could do the job.

Thanks in advance for taking this into consideration !

Hi,

Mapbox GL JS is currently @3.1.2 with @3.2 in beta.
When I try to install Vue Mapbox GL v2.3.4 it is incompatible with that version:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/mapbox-gl
npm ERR!   mapbox-gl@"^3.1.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer mapbox-gl@"^2.8.2" from @studiometa/[email protected]
npm ERR! node_modules/@studiometa/vue-mapbox-gl
npm ERR!   @studiometa/vue-mapbox-gl@"^2.3.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

I'd really like to update to that major 🚀
Is this in the works and will it be addressed soon?

Should be https://vue-mapbox-gl.studiometa.dev/guide/introduction/ instead of https://vue-mapbox-gl.meta.fr/guide/introduction/

Hi,
the prop visualizePitch in MapboxNavigationControl is missing.

It would be great to add it, or to provide a generic options prop to allow for options that are not yet implemented to be used (the same strategy chosen in MapboxGeocoder).

Link : https://docs.mapbox.com/mapbox-gl-js/api/markers/#navigationcontrol

Thanks !