added map language support

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-maplibre-gl",
-	"version": "2.0.7",
+	"version": "2.1.0",
 	"description": "Vue 3 plugin for maplibre-gl",
 	"keywords": [
 		"vue",
@@ -50,6 +50,7 @@
 		"geojson": "^0.5.0",
 		"maplibre-gl": "^2.4.0",
 		"mitt": "^3.0.0",
+		"modular-maptiler-sdk": "^1.0.16",
 		"sass": "^1.62.1",
 		"taze": "^0.10.1",
 		"typescript": "^5.0.4",

src/App.vue

@@ -8,6 +8,7 @@
 				:center="center"
 				:zoom="zoom"
 				:attribution-control="false"
+				language="fr"
 				@map:load="onLoad"
 				@map:zoomstart="isZooming = true"
 				@map:zoomend="isZooming = false"
@@ -70,12 +71,22 @@
 			<input type="checkbox" v-model="showMap" id="showmap">
 			<label for="showmap">Show Map</label>
 		</div>
+		<div>
+			<label for="cars">Language:</label>
+			<select :value="map.language" @input="setLanguage">
+				<option value="">n/a</option>
+				<option value="de">German</option>
+				<option value="en">English</option>
+				<option value="fr">French</option>
+				<option value="ja">Japanese</option>
+			</select>
+		</div>
 	</div>
 </template>
 
 <script lang="ts">
 	import { defineComponent, onMounted, ref, toRef, watch } from 'vue';
-	import { MglDefaults, MglEvent, Position, StyleSwitchItem, useMap } from '@/lib/main';
+	import { MglDefaults, MglEvent, Position, StyleSwitchItem, useMap, ValidLanguages } from '@/lib/main';
 	import { mdiCursorDefaultClick } from '@mdi/js';
 	import { CircleLayerSpecification, LineLayerSpecification, LngLatLike, MapLayerMouseEvent } from 'maplibre-gl';
 	import MglMap from '@/lib/components/map.component';
@@ -168,9 +179,13 @@
 				console.log('EVENT', e.type, e.lngLat);
 			}
 
+			function setLanguage(e: Event) {
+				console.log('setLanguage', e);
+				map.language = (e.target as HTMLSelectElement).value as ValidLanguages;
+			}
 
 			return {
-				showCustomControl, loaded, markerCoordinates, geoJsonSource, onLoad, onMouseenter,
+				showCustomControl, loaded, map, markerCoordinates, geoJsonSource, onLoad, onMouseenter, setLanguage,
 				isZooming                 : false,
 				controlPosition           : ref(Position.TOP_LEFT),
 				showMap                   : ref(true),

src/lib/components/map.component.ts

@@ -24,13 +24,14 @@ import {
 	RequestTransformFunction,
 	StyleSpecification
 } from 'maplibre-gl';
-import { componentIdSymbol, emitterSymbol, isInitializedSymbol, isLoadedSymbol, mapSymbol, MglEvents, sourceIdSymbol } from '@/lib/types';
+import { componentIdSymbol, emitterSymbol, isInitializedSymbol, isLoadedSymbol, mapSymbol, MglEvents, sourceIdSymbol, ValidLanguages } from '@/lib/types';
 import { defaults } from '@/lib/defaults';
 import { MapLib } from '@/lib/lib/map.lib';
 import { Position } from '@/lib/components/controls/position.enum';
 import mitt from 'mitt';
 import { registerMap } from '@/lib/lib/mapRegistry';
 import { debounce } from '@/lib/lib/debounce';
+import { setPrimaryLanguage } from 'modular-maptiler-sdk/src/language';
 
 export default /*#__PURE__*/ defineComponent({
 	name : 'MglMap',
@@ -58,6 +59,7 @@ export default /*#__PURE__*/ defineComponent({
 		interactive                 : { type: Boolean as PropType<boolean>, default: () => defaults.interactive },
 		keyboard                    : { type: Boolean as PropType<boolean>, default: () => defaults.keyboard },
 		locale                      : { type: Object as PropType<Record<string, string>>, default: () => defaults.locale },
+		language                    : { type: String as PropType<ValidLanguages | null>, default: () => defaults.language || null },
 		localIdeographFontFamily    : { type: String as PropType<string>, default: () => defaults.localIdeographFontFamily },
 		logoPosition                : {
 			type     : [ String ] as PropType<Position>,
@@ -103,6 +105,7 @@ export default /*#__PURE__*/ defineComponent({
 			  map                = shallowRef<MaplibreMap | null>(null),
 			  isInitialized      = ref(false),
 			  isLoaded           = ref(false),
+			  isStyleReady       = ref(false),
 			  boundMapEvents     = new Map<string, Function>(),
 			  emitter            = mitt<MglEvents>(),
 			  registryItem       = registerMap(component as any, props.mapKey);
@@ -189,6 +192,26 @@ export default /*#__PURE__*/ defineComponent({
 				map.value?.setZoom(v);
 			}
 		});
+		watch(toRef(props, 'language'), v => {
+			if (isStyleReady.value && map.value && registryItem.language !== (v || null)) {
+				setPrimaryLanguage(map.value as any, v || '');
+				registryItem.language = v || null;
+			}
+		});
+		watch(toRef(registryItem, 'language'), v => {
+			if (isStyleReady.value && map.value) {
+				setPrimaryLanguage(map.value as any, v || '');
+			}
+		});
+
+		function onStyleReady() {
+			isStyleReady.value = true;
+			if (props.language) {
+				registryItem.language = props.language;
+			} else if (registryItem.language) {
+				setPrimaryLanguage(map.value! as any, props.language || '');
+			}
+		}
 
 		function initialize() {
 
@@ -207,6 +230,7 @@ export default /*#__PURE__*/ defineComponent({
 			registryItem.map    = map.value;
 			isInitialized.value = true;
 			boundMapEvents.set('__load', () => (isLoaded.value = true, registryItem.isLoaded = true));
+			map.value.once('styledata', onStyleReady);
 			map.value.on('load', boundMapEvents.get('__load') as any);
 
 			// bind events

src/lib/defaults.ts

@@ -1,7 +1,8 @@
 import { LngLatLike, MapOptions as MaplibreMapOptions } from 'maplibre-gl';
 import { reactive } from 'vue';
+import { ValidLanguages } from '@/lib/types';
 
-export type MapOptions = Omit<MaplibreMapOptions, 'container' | 'style'> & { style: object | string };
+export type MapOptions = Omit<MaplibreMapOptions, 'container' | 'style'> & { style: object | string, language?: ValidLanguages };
 
 export const defaults = reactive<MapOptions>({
 	style      : 'https://demotiles.maplibre.org/style.json',

src/lib/lib/map.lib.ts

@@ -1,6 +1,6 @@
-import { Map, MapOptions, MarkerOptions } from 'maplibre-gl';
+import { Map, MapOptions, MarkerOptions, SymbolLayerSpecification } from 'maplibre-gl';
 import { MglMap } from '@/lib/components';
-import { MglEvent } from '@/lib/types';
+import { MglEvent, ValidLanguages } from '@/lib/types';
 
 export type MapEventHandler = (e: any) => void;
 
@@ -27,7 +27,9 @@ export class MapLib {
 		'wheel'
 	];
 
-	static createEventHandler(component: InstanceType<typeof MglMap>, map: Map, ctx: { emit: (t: string, payload: any) => void }, eventName: string): MapEventHandler {
+	static createEventHandler(component: InstanceType<typeof MglMap>, map: Map, ctx: {
+		emit: (t: string, payload: any) => void
+	}, eventName: string): MapEventHandler {
 		return (payload = {}) => ctx.emit(eventName, { type: payload.type, map, component, event: payload } as MglEvent);
 	}
 

src/lib/lib/mapRegistry.ts

@@ -1,12 +1,14 @@
 import { MglMap } from '@/lib/components';
 import maplibregl from 'maplibre-gl';
 import { reactive } from 'vue';
+import { ValidLanguages } from '@/lib/types';
 
 export interface MapInstance {
 	component?: InstanceType<typeof MglMap>;
 	map?: maplibregl.Map;
 	isMounted: boolean;
 	isLoaded: boolean;
+	language: ValidLanguages | null;
 }
 
 const instances  = new Map<symbol | string, MapInstance>(),
@@ -16,7 +18,7 @@ const instances  = new Map<symbol | string, MapInstance>(),
 export function useMap(key: symbol | string = defaultKey): MapInstance {
 	let component = instances.get(key);
 	if (!component) {
-		component = reactive({ isLoaded: false, isMounted: false });
+		component = reactive({ isLoaded: false, isMounted: false, language: null });
 		instances.set(key, component);
 	}
 	return component;
@@ -25,7 +27,7 @@ export function useMap(key: symbol | string = defaultKey): MapInstance {
 export function registerMap(instance: InstanceType<typeof MglMap>, key: symbol | string = defaultKey): MapInstance {
 	let component = instances.get(key);
 	if (!component) {
-		component = reactive({ isLoaded: false, isMounted: false });
+		component = reactive({ isLoaded: false, isMounted: false, language: null });
 		instances.set(key, component);
 	}
 	component.isLoaded  = false;

src/lib/types.ts

@@ -42,3 +42,75 @@ export function AllOptions<T extends object>(obj: AllProps<Required<T>>) {
 export function AllSourceOptions<T = SourceSpecification>(obj: AllProps<Required<Omit<T, 'type'>>>) {
 	return Object.keys(obj) as Array<keyof T>;
 }
+
+export type ValidLanguages =
+	'sq'
+	| 'am'
+	| 'ar'
+	| 'hy'
+	| 'az'
+	| 'eu'
+	| 'be'
+	| 'bs'
+	| 'br'
+	| 'bg'
+	| 'ca'
+	| 'zh'
+	| 'co'
+	| 'hr'
+	| 'cs'
+	| 'da'
+	| 'nl'
+	| 'en'
+	| 'eo'
+	| 'et'
+	| 'fi'
+	| 'fr'
+	| 'fy'
+	| 'ka'
+	| 'de'
+	| 'el'
+	| 'he'
+	| 'hi'
+	| 'hu'
+	| 'is'
+	| 'id'
+	| 'ga'
+	| 'it'
+	| 'ja'
+	| 'ja-Hira'
+	| 'ja_kana'
+	| 'ja_rm'
+	| 'ja-Latn'
+	| 'kn'
+	| 'kk'
+	| 'ko'
+	| 'ko-Latn'
+	| 'ku'
+	| 'la'
+	| 'lv'
+	| 'lt'
+	| 'lb'
+	| 'mk'
+	| 'ml'
+	| 'mt'
+	| 'no'
+	| 'oc'
+	| 'pl'
+	| 'pt'
+	| 'ro'
+	| 'rm'
+	| 'ru'
+	| 'gd'
+	| 'sr'
+	| 'sr-Latn'
+	| 'sk'
+	| 'sl'
+	| 'es'
+	| 'sv'
+	| 'ta'
+	| 'te'
+	| 'th'
+	| 'tr'
+	| 'uk'
+	| 'cy'