Add Google traffic overlayupstream

5 files changed, 29 insertions, 17 deletions

diff --git a/package-lock.json b/package-lock.json
index 1fd62dc7..5f791347 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,7 @@
         "events": "^3.3.0",
         "mapbox-gl": "^1.13.3",
         "maplibre-gl": "^4.3.2",
-        "maplibre-google-maps": "^1.0.4",
+        "maplibre-google-maps": "^1.1.0",
         "react": "^18.3.1",
         "react-country-flag": "3.1.0",
         "react-dom": "^18.3.1",
@@ -9024,9 +9024,9 @@
       }
     },
     "node_modules/maplibre-google-maps": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/maplibre-google-maps/-/maplibre-google-maps-1.0.4.tgz",
-      "integrity": "sha512-R09vVrcb4tf6NP9OhP1NdD3Qb0fm5K29OIn57mBXdGL36u6XLNF8Rxi3HEry4B2GX1SzRDJsB+WZBxxtpa2wDw=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/maplibre-google-maps/-/maplibre-google-maps-1.1.0.tgz",
+      "integrity": "sha512-bWeaLGvWriC8tMdgQfOdojnXGWyZ8Qva7mbs3qIqLHWAAuOEhlt2X0O4eGKuSKTMHGUIPEKlck3nquoWGhDQ7w=="
     },
     "node_modules/memoize-one": {
       "version": "5.2.1",
diff --git a/package.json b/package.json
index c2ac9c0b..be1d498f 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "events": "^3.3.0",
     "mapbox-gl": "^1.13.3",
     "maplibre-gl": "^4.3.2",
-    "maplibre-google-maps": "^1.0.4",
+    "maplibre-google-maps": "^1.1.0",
     "react": "^18.3.1",
     "react-country-flag": "3.1.0",
     "react-dom": "^18.3.1",
diff --git a/src/map/core/useMapStyles.js b/src/map/core/useMapStyles.js
index 1f7e2295..dd4a039c 100644
--- a/src/map/core/useMapStyles.js
+++ b/src/map/core/useMapStyles.js
@@ -90,6 +90,7 @@ export default () => {
         attribution: '© Google',
       }),
       available: Boolean(googleKey),
+      attribute: 'googleKey',
     },
     {
       id: 'googleSatellite',
@@ -100,16 +101,18 @@ export default () => {
         attribution: '© Google',
       }),
       available: Boolean(googleKey),
+      attribute: 'googleKey',
     },
     {
       id: 'googleHybrid',
       title: t('mapGoogleHybrid'),
       style: styleCustom({
-        tiles: [0, 1, 2, 3].map((i) => `https://mt${i}.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}&s=Ga`),
+        tiles: [`google://satellite/{z}/{x}/{y}?key=${googleKey}&layerType=layerRoadmap`],
         maxZoom: 20,
         attribution: '© Google',
       }),
-      available: true,
+      available: Boolean(googleKey),
+      attribute: 'googleKey',
     },
     {
       id: 'mapTilerBasic',
diff --git a/src/map/overlay/useMapOverlays.js b/src/map/overlay/useMapOverlays.js
index dafb5f83..18218128 100644
--- a/src/map/overlay/useMapOverlays.js
+++ b/src/map/overlay/useMapOverlays.js
@@ -17,6 +17,7 @@ const sourceOpenWeather = (style, key) => sourceCustom([
 export default () => {
   const t = useTranslation();
 
+  const googleKey = useAttributePreference('googleKey');
   const openWeatherKey = useAttributePreference('openWeatherKey');
   const tomTomKey = useAttributePreference('tomTomKey');
   const hereKey = useAttributePreference('hereKey');
@@ -24,6 +25,13 @@ export default () => {
 
   return useMemo(() => [
     {
+      id: 'googleTraffic',
+      title: t('mapGoogleTraffic'),
+      source: sourceCustom([`google://satellite/{z}/{x}/{y}?key=${googleKey}&layerType=layerTraffic&overlay=true`]),
+      available: Boolean(googleKey),
+      attribute: 'googleKey',
+    },
+    {
       id: 'openSeaMap',
       title: t('mapOpenSeaMap'),
       source: sourceCustom(['https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png']),
@@ -39,49 +47,49 @@ export default () => {
       id: 'openWeatherClouds',
       title: t('mapOpenWeatherClouds'),
       source: sourceOpenWeather('clouds_new', openWeatherKey),
-      available: !!openWeatherKey,
+      available: Boolean(openWeatherKey),
       attribute: 'openWeatherKey',
     },
     {
       id: 'openWeatherPrecipitation',
       title: t('mapOpenWeatherPrecipitation'),
       source: sourceOpenWeather('precipitation_new', openWeatherKey),
-      available: !!openWeatherKey,
+      available: Boolean(openWeatherKey),
       attribute: 'openWeatherKey',
     },
     {
       id: 'openWeatherPressure',
       title: t('mapOpenWeatherPressure'),
       source: sourceOpenWeather('pressure_new', openWeatherKey),
-      available: !!openWeatherKey,
+      available: Boolean(openWeatherKey),
       attribute: 'openWeatherKey',
     },
     {
       id: 'openWeatherWind',
       title: t('mapOpenWeatherWind'),
       source: sourceOpenWeather('wind_new', openWeatherKey),
-      available: !!openWeatherKey,
+      available: Boolean(openWeatherKey),
       attribute: 'openWeatherKey',
     },
     {
       id: 'openWeatherTemperature',
       title: t('mapOpenWeatherTemperature'),
       source: sourceOpenWeather('temp_new', openWeatherKey),
-      available: !!openWeatherKey,
+      available: Boolean(openWeatherKey),
       attribute: 'openWeatherKey',
     },
     {
       id: 'tomTomFlow',
       title: t('mapTomTomFlow'),
       source: sourceCustom([`https://api.tomtom.com/traffic/map/4/tile/flow/absolute/{z}/{x}/{y}.png?key=${tomTomKey}`]),
-      available: !!tomTomKey,
+      available: Boolean(tomTomKey),
       attribute: 'tomTomKey',
     },
     {
       id: 'tomTomIncidents',
       title: t('mapTomTomIncidents'),
       source: sourceCustom([`https://api.tomtom.com/traffic/map/4/tile/incidents/s3/{z}/{x}/{y}.png?key=${tomTomKey}`]),
-      available: !!tomTomKey,
+      available: Boolean(tomTomKey),
       attribute: 'tomTomKey',
     },
     {
@@ -90,14 +98,14 @@ export default () => {
       source: sourceCustom(
         [1, 2, 3, 4].map((i) => `https://${i}.traffic.maps.ls.hereapi.com/maptile/2.1/flowtile/newest/normal.day/{z}/{x}/{y}/256/png8?apiKey=${hereKey}`),
       ),
-      available: !!hereKey,
+      available: Boolean(hereKey),
       attribute: 'hereKey',
     },
     {
       id: 'custom',
       title: t('mapOverlayCustom'),
       source: sourceCustom(customMapOverlay),
-      available: !!customMapOverlay,
+      available: Boolean(customMapOverlay),
     },
-  ], [t, openWeatherKey, tomTomKey, hereKey, customMapOverlay]);
+  ], [t, googleKey, openWeatherKey, tomTomKey, hereKey, customMapOverlay]);
 };
diff --git a/src/resources/l10n/en.json b/src/resources/l10n/en.json
index 02a667c6..631634db 100644
--- a/src/resources/l10n/en.json
+++ b/src/resources/l10n/en.json
@@ -359,6 +359,7 @@
     "mapGoogleRoad": "Google Road",
     "mapGoogleHybrid": "Google Hybrid",
     "mapGoogleSatellite": "Google Satellite",
+    "mapGoogleTraffic": "Google Traffic",
     "mapGoogleKey": "Google API Key",
     "mapOpenTopoMap": "OpenTopoMap",
     "mapBingKey": "Bing Maps Key",