Add Google traffic overlay

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",

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",

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',

src/map/overlay/useMapOverlays.js

@@ -17,12 +17,20 @@ 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');
   const customMapOverlay = useSelector((state) => state.session.server.overlayUrl);
 
   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'),
@@ -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]);
 };

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",