feat: add setting for maps provider

package.json

@@ -19,7 +19,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite build && vite preview",
-    "format": "prettier --write --plugin-search-dir=. './**/*.js' './**/*.svelte' './**/*.css' './**/*.json'"
+    "format": "prettier --write --plugin-search-dir=. './**/*.js' './**/*.svelte' './**/*.css' './**/*.json'",
+    "migrate-locales": "python scripts/migrate_locales.py"
   },
   "dependencies": {
     "svelte-i18n": "^3.3.13",

public/locales/en.json

@@ -49,6 +49,9 @@
 		},
 		"language": {
 			"title": "Language"
+		},
+		"maps": {
+			"title": "Maps"
 		}
 	},
 	"weather": {

public/locales/ru.json

@@ -49,6 +49,9 @@
 		},
 		"language": {
 			"title": "Язык"
+		},
+		"maps": {
+			"title": "Карты"
 		}
 	},
 	"weather": {

src/components/Main.svelte

@@ -4,6 +4,8 @@
 	import SettingsIcon from '~icons/tabler/settings'
 
 	import { settings } from 'src/stores'
+
+	import { formatMapLink } from 'src/utils/maps'
 </script>
 
 <script>
@@ -14,19 +16,18 @@
 	// and vice versa
 	let settingsNotOpened = true
 
-	$: mapLinkParams = new URLSearchParams({
-		mlat: $settings.current_city.lat,
-		mlon: $settings.current_city.lon,
-	})
+	$: map_link = formatMapLink(
+		$settings.maps_provider,
+		$settings.current_city.lat,
+		$settings.current_city.lon
+	)
 </script>
 
 <div class="grid-item">
 	<div class="inline">
 		<div class="city">
 			<h4 class="city-name">{$settings.current_city.name}</h4>
-			<a
-				class="map"
-				href="http://www.openstreetmap.org/?{mapLinkParams.toString()}">
+			<a class="map" href={map_link}>
 				<MapIcon />
 			</a>
 		</div>

src/components/Settings.svelte

@@ -6,6 +6,7 @@
 	import Select from 'src/components/inputs/Select.svelte'
 
 	import { settings } from 'src/stores'
+	import { maps_providers } from 'src/utils/maps'
 </script>
 
 <script>
@@ -19,6 +20,10 @@
 		value: e[0],
 		name: e[1],
 	}))
+	let mapProvicersSelectValues = Object.values(maps_providers).map((e) => ({
+		name: e.name,
+		value: e.key,
+	}))
 </script>
 
 <h3>{$_('settings.title')}</h3>
@@ -44,6 +49,13 @@
 		on:change={() => (reloadRequired = true)} />
 </div>
 
+<div>
+	<Select
+		title={$_('settings.maps.title')}
+		options={mapProvicersSelectValues}
+		bind:value={$settings.maps_provider} />
+</div>
+
 <style>
 	.reload-required {
 		color: var(--second-fg-color);

src/stores/settings.js

@@ -3,7 +3,7 @@ import { localStore } from 'svelte-storages'
 import { migrateStore } from 'src/stores/migration'
 
 const initial = {
-	version: 1,
+	version: 2,
 	theme: 'system',
 	locale: undefined,
 	current_city: {
@@ -13,6 +13,8 @@ const initial = {
 	},
 	// get client timezone
 	tz: Intl.DateTimeFormat().resolvedOptions().timeZone,
+	/** @type {import('src/utils/types').OsmProvider} */
+	maps_provider: 'osm',
 }
 
 /** Settings store */

src/utils/maps.js

@@ -0,0 +1,34 @@
+/** @type {[{
+ *    key: import('src/utils/types').OsmProvider,
+ *    name: String,
+ *    base_url: String
+ * }]}
+ */
+export const maps_providers = [
+	{
+		key: 'osm',
+		name: 'OpenStreetMap',
+		base_url: 'http://www.openstreetmap.org/?',
+	},
+	{
+		key: 'google',
+		name: 'Google',
+		base_url: 'https://maps.google.com/?',
+	},
+]
+
+/**
+ * @param  {import('src/utils/types').OsmProvider} provider
+ * @return {String}
+ */
+export function formatMapLink(provider, lat, lon) {
+	let params = new URLSearchParams()
+	if (provider === 'osm') {
+		params.append('mlat', lat)
+		params.append('mlon', lon)
+	} else if (provider === 'google') {
+		params.append('q', [lat, lon])
+	}
+	let base = maps_providers.find((p) => p.key === provider).base_url
+	return base + params.toString()
+}

src/utils/types.d.ts

@@ -0,0 +1 @@
+export type OsmProvider = 'osm' | 'google'