mirror of
https://github.com/traccar/traccar-web.git
synced 2025-01-08 12:07:27 +08:00
Use official Google Map tiles
This commit is contained in:
Anton Tananaev
parent
8ab0fc98d7
commit
1527dd4c81
6
package-lock.json
generated
6
package-lock.json
generated
@ -28,6 +28,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",
|
||||
@ -9022,6 +9023,11 @@
|
||||
"kdbush": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"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=="
|
||||
},
|
||||
"node_modules/memoize-one": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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]);
|
||||
};
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user