typescript - Use mapbox as a provider for VGeosearch

Question

I try to use mapbox as a provider for VGeosearch

My use case is when the user is chinese I need to instantiate a map with mapbox (for coordinates rules) and in other cases used Google maps, all this with Vue2-leaflet

So, my code :

Vue template :

<template>
  <LMap>
    <LTileLayer :url="isChinese ? mapBoxUrl : googleMapsUrl" />

    <Vue2LeafletGoogleMutant
      v-if="!isChinese"
      :apikey="appParameters.googleMapKey"
      :lang="appParameters.language"
    />

    <VGeosearch
      id="geosearch"
      :options="{
        provider: geosearchOptions.provider,
        style: 'bar',
        showMarker: geosearchOptions.showMarker,
        autoClose: geosearchOptions.autoClose,
        searchLabel: geosearchOptions.searchLabel,
      }"
    />
  </LMap>
</template>

Typescript :

export default class Map extends Vue {
  // Some things I deleted beacause no interest

  @Getter(ReferencesGetter.country, { namespace: ReferencesModule.name })
  readonly getCountry!: (code: string) => Country;

  @Getter(UserGetter.hasNationality, { namespace: UserModule.name })
  readonly isUserInChina!: (country: Country) => boolean;

  readonly mapBoxUrl = `https://api.mapbox.com/styles/v1/mapbox/streets-zh-v1/tiles/{z}/{x}/{y}{r}?access_token=${this.appParameters.mapBoxKey}`;

  readonly googleMapsUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';

  isChinese = false;

  geosearchOptions = {} as SearchControlProps;

  async mounted() {
    // this returns true in my use case
    this.isChinese = this.isUserInChina(this.getCountry(CountryIsoCodes.China));
    this.geosearchOptions = {
      provider: this.isChinese
        ? new OpenStreetMapProvider({
          'accept-language': CountryIsoCodes.China.toLowerCase(),
        })
        : new GoogleProvider({
          params: {
            key: this.appParameters.googleMapKey,
            language: this.appParameters.language,
            region: this.appParameters.language,
          },
        }),
      showMarker: true,
      autoClose: true,
      searchLabel: this.$t('message.action.enterAddress'),
    };
  }
}

All is good when my user is not chinese, but in the other case I always have the same error :

Whereras the map is loaded in the good way, but the geosearch bar doesn't work

question from:https://stackoverflow.com/questions/65599387/use-mapbox-as-a-provider-for-vgeosearch

Answer 1

Simple answer.

You can't declare props after initialization. So set it in the mounted function doesn't works.