feat: new translations

.changeset/poor-fishes-turn.md

@@ -0,0 +1,5 @@
+---
+"@watergis/maplibre-gl-export": minor
+---
+
+feat: add Japanese language (ja)

.changeset/pretty-planes-grow.md

@@ -0,0 +1,5 @@
+---
+"@watergis/maplibre-gl-export": minor
+---
+
+feat: bring new translations (Vietnam, Ukranian, Chinese simplified and Chinese traditional) from mapbox-gl-export

packages/maplibre-gl-export/README.md

@@ -91,6 +91,11 @@ You can specify default option as follows.
   - `fi` finnish
   - `sv` swedish
   - `es` spanish
+  - `vi` Vietnam
+  - `uk` Ukranian
+  - `zhHans` Chinese Simplified
+  - `zhHant` Chinese Traditional
+  - `ja` Japanese
 - AllowedSizes
   - list of allowed page sizes for export
   - available values `'A2'`, `'A3'`, `'A4'`, `'A5'`, `'A6'`, `'B2'`, `'B3'`, `'B4'`, `'B5'`, `'B6'`

packages/maplibre-gl-export/src/lib/export-control.ts

@@ -1,7 +1,20 @@
 import { ControlPosition, IControl, Map as MaplibreMap } from 'maplibre-gl';
 import CrosshairManager from './crosshair-manager';
 import PrintableAreaManager from './printable-area-manager';
-import { english, french, finnish, german, swedish, spanish, Translation } from './local';
+import {
+	english,
+	french,
+	finnish,
+	german,
+	swedish,
+	spanish,
+	vietnam,
+	ukranian,
+	zhHans,
+	zhHant,
+	ja,
+	Translation
+} from './local';
 import MapGenerator, { Size, Format, PageOrientation, DPI, Unit } from './map-generator';
 
 type Options = {
@@ -11,7 +24,7 @@ type Options = {
 	DPI?: number;
 	Crosshair?: boolean;
 	PrintableArea?: boolean;
-	Local?: 'de' | 'en' | 'fr' | 'fi' | 'sv' | 'es';
+	Local?: 'de' | 'en' | 'fr' | 'fi' | 'sv' | 'es' | 'vi' | 'uk' | 'zhHans' | 'zhHant' | 'ja';
 	AllowedSizes?: ('A2' | 'A3' | 'A4' | 'A5' | 'A6' | 'B2' | 'B3' | 'B4' | 'B5' | 'B6')[];
 	Filename?: string;
 };
@@ -82,6 +95,16 @@ export default class MaplibreExportControl implements IControl {
 				return swedish;
 			case 'es':
 				return spanish;
+			case 'vi':
+				return vietnam;
+			case 'uk':
+				return ukranian;
+			case 'zhHans':
+				return zhHans;
+			case 'zhHant':
+				return zhHant;
+			case 'ja':
+				return ja;
 			default:
 				return english;
 		}

packages/maplibre-gl-export/src/lib/local/index.ts

@@ -4,6 +4,11 @@ import finnish from './fi';
 import german from './de';
 import swedish from './sv';
 import spanish from './es';
+import vietnam from './vi';
+import ukranian from './uk';
+import zhHans from './zhHans';
+import zhHant from './zhHant';
+import ja from './ja';
 
 type Translation = {
 	PageSize: string;
@@ -13,4 +18,17 @@ type Translation = {
 	Generate: string;
 };
 
-export { english, french, finnish, german, swedish, spanish, Translation };
+export {
+	english,
+	french,
+	finnish,
+	german,
+	swedish,
+	spanish,
+	vietnam,
+	ukranian,
+	zhHans,
+	zhHant,
+	ja,
+	Translation
+};

packages/maplibre-gl-export/src/lib/local/ja.ts

@@ -0,0 +1,9 @@
+const translation = {
+	PageSize: 'ページサイズ',
+	PageOrientation: 'ページ方向',
+	Format: 'フォーマット',
+	DPI: 'DPI（解像度）',
+	Generate: '出力'
+};
+
+export default translation;

packages/maplibre-gl-export/src/lib/local/uk.ts

@@ -0,0 +1,9 @@
+const translation = {
+	PageSize: 'Розмір сторінки',
+	PageOrientation: 'Орієнтація сторінки',
+	Format: 'Формат',
+	DPI: 'DPI',
+	Generate: 'Згенерувати'
+};
+
+export default translation;

packages/maplibre-gl-export/src/lib/local/vi.ts

@@ -0,0 +1,9 @@
+const translation = {
+	PageSize: 'Kích thước trang',
+	PageOrientation: 'Loại trang',
+	Format: 'Định dạng',
+	DPI: 'Mật độ điểm ảnh (DPI)',
+	Generate: 'Tạo'
+};
+
+export default translation;

packages/maplibre-gl-export/src/lib/local/zhHans.ts

@@ -0,0 +1,9 @@
+const translation = {
+	PageSize: '页面大小',
+	PageOrientation: '页面方向',
+	Format: '格式',
+	DPI: '像素',
+	Generate: '导出'
+};
+
+export default translation;

packages/maplibre-gl-export/src/lib/local/zhHant.ts

@@ -0,0 +1,9 @@
+const translation = {
+	PageSize: '頁面大小',
+	PageOrientation: '頁面方向',
+	Format: '格式',
+	DPI: '像素',
+	Generate: '導出'
+};
+
+export default translation;

sites/maplibre-gl-export.water-gis.com/index.html

@@ -12,6 +12,7 @@
 			rel="stylesheet"
 			href="node_modules/@watergis/maplibre-gl-export/dist/maplibre-gl-export.css"
 		/>
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
 		<style>
 			body {
 				margin: 0;
@@ -24,6 +25,13 @@
 				width: 100%;
 				z-index: 10;
 			}
+			.overlay {
+				position: absolute;
+				top: 10px;
+				right: 60px;
+				background-color: white;
+				z-index: 10;
+			}
 		</style>
 	</head>
 	<body>
@@ -35,6 +43,28 @@
 			>Fork me on GitHub</a
 		>
 		<div id="map"></div>
+		<div class="overlay p-2">
+			<div class="field">
+				<label class="label">Select a language</label>
+				<div class="control">
+					<div class="select is-medimum">
+						<select id="language">
+							<option value="en">English</option>
+							<option value="fr">French</option>
+							<option value="fi">Finish</option>
+							<option value="de">German</option>
+							<option value="sv">Swedish</option>
+							<option value="es">Spanish</option>
+							<option value="vi">Vietnam</option>
+							<option value="uk">Ukranian</option>
+							<option value="zhHans">Chinese simplified</option>
+							<option value="zhHant">Chinese traditional</option>
+							<option value="ja">Japanese</option>
+						</select>
+					</div>
+				</div>
+			</div>
+		</div>
 		<script type="module" src="src/index.js"></script>
 	</body>
 </html>

sites/maplibre-gl-export.water-gis.com/src/index.js

@@ -16,15 +16,37 @@ const map = new Map({
 	hash: true
 });
 map.addControl(new NavigationControl({}), 'top-right');
-map.addControl(
-	new MaplibreExportControl({
+
+const languageOption = document.getElementById('language');
+languageOption.value = 'en';
+
+let exportControl = new MaplibreExportControl({
+	PageSize: Size.A3,
+	PageOrientation: PageOrientation.Portrait,
+	Format: Format.PNG,
+	DPI: DPI[96],
+	Crosshair: true,
+	PrintableArea: true,
+	Local: languageOption.value
+});
+
+map.addControl(exportControl, 'top-right');
+
+languageOption.addEventListener('change', () => {
+	if (exportControl) {
+		map.removeControl(exportControl);
+	}
+
+	const language = document.getElementById('language');
+	exportControl = new MaplibreExportControl({
 		PageSize: Size.A3,
 		PageOrientation: PageOrientation.Portrait,
 		Format: Format.PNG,
 		DPI: DPI[96],
 		Crosshair: true,
 		PrintableArea: true,
-		Local: 'en'
-	}),
-	'top-right'
-);
+		Local: language.value
+	});
+
+	map.addControl(exportControl, 'top-right');
+});