From 280199956d5202a4e16174bacdae5ce594b9ca17 Mon Sep 17 00:00:00 2001
From: razorness <684302+razorness@users.noreply.github.com>
Date: Thu, 18 May 2023 20:10:00 +0200
Subject: [PATCH] added map language support

---
 package.json                        |  3 +-
 src/App.vue                         | 19 +++++-
 src/lib/components/map.component.ts | 26 +++++++-
 src/lib/defaults.ts                 |  3 +-
 src/lib/lib/map.lib.ts              |  8 ++-
 src/lib/lib/mapRegistry.ts          |  6 +-
 src/lib/types.ts                    | 72 +++++++++++++++++++++
 yarn.lock                           | 98 ++++++++++++++++++++++++++++-
 8 files changed, 223 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 4f1ccc0..bb56097 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.vue b/src/App.vue
index 6a20680..f8495b1 100644
--- a/src/App.vue
+++ b/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),
diff --git a/src/lib/components/map.component.ts b/src/lib/components/map.component.ts
index 8fb23b4..3c3fa96 100644
--- a/src/lib/components/map.component.ts
+++ b/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
diff --git a/src/lib/defaults.ts b/src/lib/defaults.ts
index 78830df..4009f36 100644
--- a/src/lib/defaults.ts
+++ b/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',
diff --git a/src/lib/lib/map.lib.ts b/src/lib/lib/map.lib.ts
index d209852..9b323f0 100644
--- a/src/lib/lib/map.lib.ts
+++ b/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);
 	}
 
diff --git a/src/lib/lib/mapRegistry.ts b/src/lib/lib/mapRegistry.ts
index 158e9a1..1120973 100644
--- a/src/lib/lib/mapRegistry.ts
+++ b/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;
diff --git a/src/lib/types.ts b/src/lib/types.ts
index bc85415..933dc3d 100644
--- a/src/lib/types.ts
+++ b/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'
diff --git a/yarn.lock b/yarn.lock
index 8cb8134..c892a75 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -285,7 +285,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mapbox/tiny-sdf@npm:^2.0.5":
+"@mapbox/tiny-sdf@npm:^2.0.5, @mapbox/tiny-sdf@npm:^2.0.6":
   version: 2.0.6
   resolution: "@mapbox/tiny-sdf@npm:2.0.6"
   checksum: efff5b5a7599aaa995e3c2fd8f2acd071226096458eebb694ffd7258043c46c52b1d09bb3c7343d2126eb257b3cd7d34e6dc7ccaaad7619e6f3e7dd76229a3cd
@@ -315,6 +315,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@maptiler/client@npm:^1.3.0":
+  version: 1.4.0
+  resolution: "@maptiler/client@npm:1.4.0"
+  dependencies:
+    "@types/geojson": ^7946.0.10
+  checksum: a9f903794f1d1f0a586be7c80da89d7c153897e3eee64e07f8831392f775df0b3049b85c3f18159653b8a019ca49a51e8eb50316d3005d949ed0f7a8208c8222
+  languageName: node
+  linkType: hard
+
 "@mdi/js@npm:^7.2.96":
   version: 7.2.96
   resolution: "@mdi/js@npm:7.2.96"
@@ -650,6 +659,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/kdbush@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "@types/kdbush@npm:3.0.2"
+  checksum: 00f02d8081461e73c6cc3f7ac03953eb57a4f8c53284113ba6b4caf1f9462174ac753f582890c9a93178ea255ec1506dc340e6fc598eca805b0aad998c70087a
+  languageName: node
+  linkType: hard
+
 "@types/mapbox__point-geometry@npm:*, @types/mapbox__point-geometry@npm:^0.1.2":
   version: 0.1.2
   resolution: "@types/mapbox__point-geometry@npm:0.1.2"
@@ -1441,6 +1457,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"events@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "events@npm:3.3.0"
+  checksum: f6f487ad2198aa41d878fa31452f1a3c00958f46e9019286ff4787c84aac329332ab45c9cdc8c445928fc6d7ded294b9e005a7fce9426488518017831b272780
+  languageName: node
+  linkType: hard
+
 "fast-deep-equal@npm:^3.1.1":
   version: 3.1.3
   resolution: "fast-deep-equal@npm:3.1.3"
@@ -1949,6 +1972,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"js-base64@npm:^3.7.4":
+  version: 3.7.5
+  resolution: "js-base64@npm:3.7.5"
+  checksum: 67a78c8b1c47b73f1c6fba1957e9fe6fd9dc78ac93ac46cc2e43472dcb9cf150d126fb0e593192e88e0497354fa634d17d255add7cc6ee3c7b4d29870faa8e18
+  languageName: node
+  linkType: hard
+
 "json-parse-even-better-errors@npm:^3.0.0":
   version: 3.0.0
   resolution: "json-parse-even-better-errors@npm:3.0.0"
@@ -1995,7 +2025,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kdbush@npm:^3.0.0":
+"kdbush@npm:3.0.0, kdbush@npm:^3.0.0":
   version: 3.0.0
   resolution: "kdbush@npm:3.0.0"
   checksum: bc5fa433958e42664a8a92457e4f0d1db55b3b8e36956aac0102964adb2eab043bdbff156570dc8d867144ceff588fb7a1c6e099ba9be068cd1767a73e1ace92
@@ -2132,6 +2162,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"maplibre-gl@npm:3.0.0-pre.4":
+  version: 3.0.0-pre.4
+  resolution: "maplibre-gl@npm:3.0.0-pre.4"
+  dependencies:
+    "@mapbox/geojson-rewind": ^0.5.2
+    "@mapbox/jsonlint-lines-primitives": ^2.0.2
+    "@mapbox/mapbox-gl-supported": ^2.0.1
+    "@mapbox/point-geometry": ^0.1.0
+    "@mapbox/tiny-sdf": ^2.0.6
+    "@mapbox/unitbezier": ^0.0.1
+    "@mapbox/vector-tile": ^1.3.1
+    "@mapbox/whoots-js": ^3.1.0
+    "@types/geojson": ^7946.0.10
+    "@types/kdbush": ^3.0.2
+    "@types/mapbox__point-geometry": ^0.1.2
+    "@types/mapbox__vector-tile": ^1.3.0
+    "@types/pbf": ^3.0.2
+    csscolorparser: ~1.0.3
+    earcut: ^2.2.4
+    geojson-vt: ^3.2.1
+    gl-matrix: ^3.4.3
+    global-prefix: ^3.0.0
+    kdbush: 3.0.0
+    murmurhash-js: ^1.0.0
+    pbf: ^3.2.1
+    potpack: ^2.0.0
+    quickselect: ^2.0.0
+    supercluster: ^7.1.5
+    tinyqueue: ^2.0.3
+    vt-pbf: ^3.1.3
+  checksum: 5886139a82216c644ec8be72b833a01ff2fbafb01d085227dc3e4ffcfa34348763decbe91696ab006a8086b49064dab1b178d4cfbaae620001dc0bf0d2f7aaf3
+  languageName: node
+  linkType: hard
+
 "maplibre-gl@npm:^2.4.0":
   version: 2.4.0
   resolution: "maplibre-gl@npm:2.4.0"
@@ -2367,6 +2431,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"modular-maptiler-sdk@npm:^1.0.16":
+  version: 1.0.16
+  resolution: "modular-maptiler-sdk@npm:1.0.16"
+  dependencies:
+    "@maptiler/client": ^1.3.0
+    events: ^3.3.0
+    js-base64: ^3.7.4
+    maplibre-gl: 3.0.0-pre.4
+    uuid: ^9.0.0
+  checksum: 5875a7cb916de03c0637230b1a918e95c9e34d13de7f4c8918fc3fa2c872febb7bbc87fe3758dee5d30e7acaf195b432ffa61364bb996c6ec4a578eccfd4b975
+  languageName: node
+  linkType: hard
+
 "ms@npm:2.1.2":
   version: 2.1.2
   resolution: "ms@npm:2.1.2"
@@ -2705,6 +2782,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"potpack@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "potpack@npm:2.0.0"
+  checksum: 6dd41692349936b436c29c28cf9ff1268c03ed6ec96c4384b2d9eb95e58e422fab75d428648f475507dd167934984d1002df2010b83e5747b5c358bea371e8f7
+  languageName: node
+  linkType: hard
+
 "proc-log@npm:^3.0.0":
   version: 3.0.0
   resolution: "proc-log@npm:3.0.0"
@@ -3398,6 +3482,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uuid@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "uuid@npm:9.0.0"
+  bin:
+    uuid: dist/bin/uuid
+  checksum: 8dd2c83c43ddc7e1c71e36b60aea40030a6505139af6bee0f382ebcd1a56f6cd3028f7f06ffb07f8cf6ced320b76aea275284b224b002b289f89fe89c389b028
+  languageName: node
+  linkType: hard
+
 "validate-npm-package-license@npm:^3.0.4":
   version: 3.0.4
   resolution: "validate-npm-package-license@npm:3.0.4"
@@ -3511,6 +3604,7 @@ __metadata:
     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