AlexLavoie42 / Nuxt-Mapbox

Elegant Mapbox integration with Nuxt
81 stars 11 forks source link

Layer exist on locale change #55

Closed alivadjid closed 1 year ago

alivadjid commented 1 year ago

Hello! First, thanks for this very usefull library!

I got a problem when i'm using nuxt3, mapbox and i18n

"@nuxtjs/i18n": "8.0.0-rc.1",
"mapbox-gl": "2.15.0",
"nuxt": "3.6.5",
"nuxt-mapbox": "1.4.2",

in app I change locale with

<template>
  <v-list>
    <v-list-item class="menu">
      <v-list-item v-for="item in languageOptions" :key="item.title" :to="switchLocalePath(item.title)">
        <span> {{ item.title }}</span>
      </v-list-item>
    </v-list-item>
  </v-list>
</template>

<script setup lang="ts">
const languageOptions = ref([
  { title: 'en' },
  { title: 'fr' },
]);
const switchLocalePath = useSwitchLocalePath();
</script>

MapComponent:

<template>
  <MapboxMap
      :map-id="mapId"
      :class="$style.mapbox"
      :options="{
      style: config.public.mapboxStyle
      }"
  >
    <MapboxLayer :layer="{id: 'first-layer }" />
    <MapboxLayer :layer="{id: 'second-layer' }" />
  </MapboxMap>
</template>

When I change locale, route is changing to new locale, map component trying to remount, but it's crashing with errors

Error: Layer with id "first-layer" already exists on this map
    NuxtJS 6
        addLayer
        addLayer
        addLayer
        setup
        tryCallback
        useMapbox

Error: Layer with id "second-layer" already exists on this map
    NuxtJS 6
        addLayer
        addLayer
        addLayer
        setup
        tryCallback
        useMapbox
[evented.js:151:20](http://localhost:3000/_nuxt/node_modules/.pnpm/mapbox-gl@2.15.0/node_modules/mapbox-gl/src/util/evented.js)

I tried to put v-if on MapboxLayer and check is layer exist on Map, but this don't work.

function isLayerExist(layerName) {
  useMapbox(mapId.value, (map) => {
    return map.getLayer(layerName);
  });
}

Have ideas how to solve it?

AlexLavoie42 commented 1 year ago

When persistent map instances are enabled maps must have different IDs across routes. I recommend either turning this off or using the route name in the map id to ensure it's unique.

alivadjid commented 1 year ago

When persistent map instances are enabled maps must have different IDs across routes. I recommend either turning this off or using the route name in the map id to ensure it's unique.

Route name in the map id, this works. Thanks!