Utilizing mapbox as a provider for VGeosearch has been my recent project.
In certain scenarios where the user is Chinese, I need to initialize a map using mapbox (due to coordinate rules) and in other cases utilize Google maps. All of this is managed through Vue2-leaflet.
Here's the snippet of 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'),
};
}
}
Everything works smoothly when the user is not Chinese. However, in the alternate scenario, I repeatedly encounter the same error :
https://i.sstatic.net/4mcxd.png
While the map loads correctly, the geosearch functionality fails to operate properly.