Use official Google Map tiles

traccar · Jun 12, 2024 · 1527dd4 · 1527dd4
1 parent 8ab0fc9
commit 1527dd4
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "events": "^3.3.0",
     "mapbox-gl": "^1.13.3",
     "maplibre-gl": "^4.3.2",
+    "maplibre-google-maps": "^1.0.4",
     "react": "^18.3.1",
     "react-country-flag": "3.1.0",
     "react-dom": "^18.3.1",

diff --git a/src/common/attributes/useCommonUserAttributes.js b/src/common/attributes/useCommonUserAttributes.js
@@ -49,6 +49,10 @@ export default (t) => useMemo(() => ({
     name: t('attributePopupInfo'),
     type: 'string',
   },
+  googleKey: {
+    name: t('mapGoogleKey'),
+    type: 'string',
+  },
   locationIqKey: {
     name: t('mapLocationIqKey'),
     type: 'string',

diff --git a/src/map/core/MapView.jsx b/src/map/core/MapView.jsx
@@ -2,6 +2,7 @@
 import mapboxglRtlTextUrl from '@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min?url';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import maplibregl from 'maplibre-gl';
+import { googleProtocol } from 'maplibre-google-maps';
 import React, {
   useRef, useLayoutEffect, useEffect, useState,
 } from 'react';
@@ -17,6 +18,7 @@ element.style.height = '100%';
 element.style.boxSizing = 'initial';
 
 maplibregl.setRTLTextPlugin(mapboxglRtlTextUrl);
+maplibregl.addProtocol('google', googleProtocol);
 
 export const map = new maplibregl.Map({
   container: element,

diff --git a/src/map/core/useMapStyles.js b/src/map/core/useMapStyles.js
@@ -30,6 +30,7 @@ const styleCustom = ({ tiles, minZoom, maxZoom, attribution }) => {
 export default () => {
   const t = useTranslation();
 
+  const googleKey = useAttributePreference('googleKey');
   const mapTilerKey = useAttributePreference('mapTilerKey');
   const locationIqKey = useAttributePreference('locationIqKey') || 'pk.0f147952a41c555a5b70614039fd148b';
   const bingMapsKey = useAttributePreference('bingMapsKey');
@@ -84,21 +85,21 @@ export default () => {
       id: 'googleRoad',
       title: t('mapGoogleRoad'),
       style: styleCustom({
-        tiles: [0, 1, 2, 3].map((i) => `https://mt${i}.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}&s=Ga`),
+        tiles: [`google://roadmap/{z}/{x}/{y}?key=${googleKey}`],
         maxZoom: 20,
         attribution: '© Google',
       }),
-      available: true,
+      available: Boolean(googleKey),
     },
     {
       id: 'googleSatellite',
       title: t('mapGoogleSatellite'),
       style: styleCustom({
-        tiles: [0, 1, 2, 3].map((i) => `https://mt${i}.google.com/vt/lyrs=s&hl=en&x={x}&y={y}&z={z}&s=Ga`),
+        tiles: [`google://satellite/{z}/{x}/{y}?key=${googleKey}`],
         maxZoom: 20,
         attribution: '© Google',
       }),
-      available: true,
+      available: Boolean(googleKey),
     },
     {
       id: 'googleHybrid',
@@ -114,14 +115,14 @@ export default () => {
       id: 'mapTilerBasic',
       title: t('mapMapTilerBasic'),
       style: `https://api.maptiler.com/maps/basic/style.json?key=${mapTilerKey}`,
-      available: !!mapTilerKey,
+      available: Boolean(mapTilerKey),
       attribute: 'mapTilerKey',
     },
     {
       id: 'mapTilerHybrid',
       title: t('mapMapTilerHybrid'),
       style: `https://api.maptiler.com/maps/hybrid/style.json?key=${mapTilerKey}`,
-      available: !!mapTilerKey,
+      available: Boolean(mapTilerKey),
       attribute: 'mapTilerKey',
     },
     {
@@ -131,7 +132,7 @@ export default () => {
         tiles: [0, 1, 2, 3].map((i) => `https://t${i}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=en-US&it=G,L&shading=hill&og=1885&n=z`),
         maxZoom: 21,
       }),
-      available: !!bingMapsKey,
+      available: Boolean(bingMapsKey),
       attribute: 'bingMapsKey',
     },
     {
@@ -141,7 +142,7 @@ export default () => {
         tiles: [0, 1, 2, 3].map((i) => `https://ecn.t${i}.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=12327`),
         maxZoom: 19,
       }),
-      available: !!bingMapsKey,
+      available: Boolean(bingMapsKey),
       attribute: 'bingMapsKey',
     },
     {
@@ -151,21 +152,21 @@ export default () => {
         tiles: [0, 1, 2, 3].map((i) => `https://t${i}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=en-US&it=A,G,L&og=1885&n=z`),
         maxZoom: 19,
       }),
-      available: !!bingMapsKey,
+      available: Boolean(bingMapsKey),
       attribute: 'bingMapsKey',
     },
     {
       id: 'tomTomBasic',
       title: t('mapTomTomBasic'),
       style: `https://api.tomtom.com/map/1/style/20.0.0-8/basic_main.json?key=${tomTomKey}`,
-      available: !!tomTomKey,
+      available: Boolean(tomTomKey),
       attribute: 'tomTomKey',
     },
     {
       id: 'hereBasic',
       title: t('mapHereBasic'),
       style: `https://assets.vector.hereapi.com/styles/berlin/base/mapbox/tilezen?apikey=${hereKey}`,
-      available: !!hereKey,
+      available: Boolean(hereKey),
       attribute: 'hereKey',
     },
     {
@@ -175,7 +176,7 @@ export default () => {
         tiles: [1, 2, 3, 4].map((i) => `https://${i}.aerial.maps.ls.hereapi.com/maptile/2.1/maptile/newest/hybrid.day/{z}/{x}/{y}/256/png8?apiKey=${hereKey}`),
         maxZoom: 20,
       }),
-      available: !!hereKey,
+      available: Boolean(hereKey),
       attribute: 'hereKey',
     },
     {
@@ -185,7 +186,7 @@ export default () => {
         tiles: [1, 2, 3, 4].map((i) => `https://${i}.aerial.maps.ls.hereapi.com/maptile/2.1/maptile/newest/satellite.day/{z}/{x}/{y}/256/png8?apiKey=${hereKey}`),
         maxZoom: 19,
       }),
-      available: !!hereKey,
+      available: Boolean(hereKey),
       attribute: 'hereKey',
     },
     {
@@ -214,7 +215,7 @@ export default () => {
         tiles: [`https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=${mapboxAccessToken}`],
         maxZoom: 22,
       }),
-      available: !!mapboxAccessToken,
+      available: Boolean(mapboxAccessToken),
       attribute: 'mapboxAccessToken',
     },
     {
@@ -224,7 +225,7 @@ export default () => {
         tiles: [`https://api.mapbox.com/styles/v1/mapbox/dark-v11/tiles/{z}/{x}/{y}?access_token=${mapboxAccessToken}`],
         maxZoom: 22,
       }),
-      available: !!mapboxAccessToken,
+      available: Boolean(mapboxAccessToken),
       attribute: 'mapboxAccessToken',
     },
     {
@@ -234,7 +235,7 @@ export default () => {
         tiles: [`https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/tiles/{z}/{x}/{y}?access_token=${mapboxAccessToken}`],
         maxZoom: 22,
       }),
-      available: !!mapboxAccessToken,
+      available: Boolean(mapboxAccessToken),
       attribute: 'mapboxAccessToken',
     },
     {
@@ -244,7 +245,7 @@ export default () => {
         tiles: [`https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}?access_token=${mapboxAccessToken}`],
         maxZoom: 22,
       }),
-      available: !!mapboxAccessToken,
+      available: Boolean(mapboxAccessToken),
       attribute: 'mapboxAccessToken',
     },
     {
@@ -253,7 +254,7 @@ export default () => {
       style: styleCustom({
         tiles: [customMapUrl],
       }),
-      available: !!customMapUrl,
+      available: Boolean(customMapUrl),
     },
   ], [t, mapTilerKey, locationIqKey, bingMapsKey, tomTomKey, hereKey, mapboxAccessToken, customMapUrl]);
 };
diff --git 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",
+    "mapGoogleKey": "Google API Key",
     "mapOpenTopoMap": "OpenTopoMap",
     "mapBingKey": "Bing Maps Key",
     "mapBingRoad": "Bing Maps Road",