aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-06-12 09:34:33 -0700
committerAnton Tananaev <anton@traccar.org>2022-06-12 09:34:33 -0700
commit2179dd19dd0dbdded0b62d0d31ba1b3162ee145f (patch)
treec55cec0186e93f15b95e82980c00c113effe1dfd
parent9b2d9f747812a43282614304f9ae7a37e71523c1 (diff)
downloadtrackermap-web-2179dd19dd0dbdded0b62d0d31ba1b3162ee145f.tar.gz
trackermap-web-2179dd19dd0dbdded0b62d0d31ba1b3162ee145f.tar.bz2
trackermap-web-2179dd19dd0dbdded0b62d0d31ba1b3162ee145f.zip
Add HERE maps and traffic
-rw-r--r--modern/src/common/attributes/useCommonUserAttributes.js4
-rw-r--r--modern/src/map/core/useMapStyles.js101
-rw-r--r--modern/src/map/overlay/useMapOverlays.js10
-rw-r--r--modern/src/map/switcher/switcher.js4
-rw-r--r--web/l10n/en.json5
5 files changed, 74 insertions, 50 deletions
diff --git a/modern/src/common/attributes/useCommonUserAttributes.js b/modern/src/common/attributes/useCommonUserAttributes.js
index 57d10468..da19885e 100644
--- a/modern/src/common/attributes/useCommonUserAttributes.js
+++ b/modern/src/common/attributes/useCommonUserAttributes.js
@@ -25,6 +25,10 @@ export default (t) => useMemo(() => ({
name: t('mapTomTomKey'),
type: 'string',
},
+ hereKey: {
+ name: t('mapHereKey'),
+ type: 'string',
+ },
notificationTokens: {
name: t('attributeNotificationTokens'),
type: 'string',
diff --git a/modern/src/map/core/useMapStyles.js b/modern/src/map/core/useMapStyles.js
index 963ffead..6dc585b7 100644
--- a/modern/src/map/core/useMapStyles.js
+++ b/modern/src/map/core/useMapStyles.js
@@ -20,39 +20,6 @@ const styleCustom = (urls, attribution) => ({
}],
});
-const styleOsm = () => styleCustom(
- [
- 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
- ],
- '© <a target="_top" rel="noopener" href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-);
-
-const styleCarto = () => styleCustom(
- [
- 'https://a.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png',
- 'https://b.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png',
- 'https://c.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png',
- 'https://d.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png',
- ],
- '© <a target="_top" rel="noopener" href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a target="_top" rel="noopener" href="https://carto.com/attribution">CARTO</a>',
-);
-
-const styleBingMaps = (url) => styleCustom(
- [
- url.replace('{subdomain}', 't0'),
- url.replace('{subdomain}', 't1'),
- url.replace('{subdomain}', 't2'),
- url.replace('{subdomain}', 't3'),
- ],
- '© Microsoft Corporation',
-);
-
-const styleMapbox = (style) => `mapbox://styles/mapbox/${style}`;
-
-const styleMapTiler = (style, key) => `https://api.maptiler.com/maps/${style}/style.json?key=${key}`;
-
-const styleLocationIq = (style, key) => `https://tiles.locationiq.com/v3/${style}/vector.json?key=${key}`;
-
export default () => {
const t = useTranslation();
@@ -61,108 +28,146 @@ export default () => {
const locationIqKey = useAttributePreference('locationIqKey');
const bingMapsKey = useAttributePreference('bingMapsKey');
const tomTomKey = useAttributePreference('tomTomKey');
+ const hereKey = useAttributePreference('hereKey');
const customMapUrl = useSelector((state) => state.session.server?.mapUrl);
return [
{
id: 'locationIqStreets',
title: t('mapLocationIqStreets'),
- uri: styleLocationIq('streets', locationIqKey || 'pk.0f147952a41c555a5b70614039fd148b'),
+ style: `https://tiles.locationiq.com/v3/streets/vector.json?key=${locationIqKey || 'pk.0f147952a41c555a5b70614039fd148b'}`,
available: true,
},
{
id: 'locationIqEarth',
title: t('mapLocationIqEarth'),
- uri: styleLocationIq('earth', locationIqKey),
+ style: `https://tiles.locationiq.com/v3/earth/vector.json?key=${locationIqKey}`,
available: !!locationIqKey,
attribute: 'locationIqKey',
},
{
id: 'locationIqHybrid',
title: t('mapLocationIqHybrid'),
- uri: styleLocationIq('hybrid', locationIqKey),
+ style: `https://tiles.locationiq.com/v3/hybrid/vector.json?key=${locationIqKey}`,
available: !!locationIqKey,
attribute: 'locationIqKey',
},
{
id: 'osm',
title: t('mapOsm'),
- uri: styleOsm(),
+ style: styleCustom(
+ ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
+ '© <a target="_top" rel="noopener" href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+ ),
available: true,
},
{
id: 'carto',
title: t('mapCarto'),
- uri: styleCarto(),
+ style: styleCustom(
+ ['a', 'b', 'c', 'd'].map((i) => `https://${i}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png`),
+ '© <a target="_top" rel="noopener" href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a target="_top" rel="noopener" href="https://carto.com/attribution">CARTO</a>',
+ ),
available: true,
},
{
id: 'mapboxStreets',
title: t('mapMapboxStreets'),
- uri: styleMapbox('streets-v11'),
+ style: 'mapbox://styles/mapbox/streets-v11',
available: !!mapboxAccessToken,
attribute: 'mapboxAccessToken',
},
{
id: 'mapboxOutdoors',
title: t('mapMapboxOutdoors'),
- uri: styleMapbox('outdoors-v11'),
+ style: 'mapbox://styles/mapbox/outdoors-v11',
available: !!mapboxAccessToken,
attribute: 'mapboxAccessToken',
},
{
id: 'mapboxSatellite',
title: t('mapMapboxSatellite'),
- uri: styleMapbox('satellite-v9'),
+ style: 'mapbox://styles/mapbox/satellite-v9',
available: !!mapboxAccessToken,
attribute: 'mapboxAccessToken',
},
{
id: 'mapTilerBasic',
title: t('mapMapTilerBasic'),
- uri: styleMapTiler('basic', mapTilerKey),
+ style: `https://api.maptiler.com/maps/basic/style.json?key=${mapTilerKey}`,
available: !!mapTilerKey,
attribute: 'mapTilerKey',
},
{
id: 'mapTilerHybrid',
title: t('mapMapTilerHybrid'),
- uri: styleMapTiler('hybrid', mapTilerKey),
+ style: `https://api.maptiler.com/maps/hybrid/style.json?key=${mapTilerKey}`,
available: !!mapTilerKey,
attribute: 'mapTilerKey',
},
{
id: 'bingRoad',
title: t('mapBingRoad'),
- uri: styleBingMaps('http://ak.dynamic.{subdomain}.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=en-US&it=G,L&shading=hill&og=1885&n=z'),
+ style: styleCustom(
+ [0, 1, 2, 3].map((i) => `http://ak.dynamic.t${i}.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=en-US&it=G,L&shading=hill&og=1885&n=z`),
+ ),
available: !!bingMapsKey,
attribute: 'bingMapsKey',
},
{
id: 'bingAerial',
title: t('mapBingAerial'),
- uri: styleBingMaps('http://ecn.{subdomain}.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=12327'),
+ style: styleCustom(
+ [0, 1, 2, 3].map((i) => `http://ecn.t${i}.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=12327`),
+ ),
available: !!bingMapsKey,
attribute: 'bingMapsKey',
},
{
id: 'bingHybrid',
title: t('mapBingHybrid'),
- uri: styleBingMaps('http://ak.dynamic.{subdomain}.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=en-US&it=A,G,L&og=1885&n=z'),
+ style: styleCustom(
+ [0, 1, 2, 3].map((i) => `http://ak.dynamic.t${i}.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=en-US&it=A,G,L&og=1885&n=z`),
+ ),
available: !!bingMapsKey,
attribute: 'bingMapsKey',
},
{
id: 'tomTomBasic',
title: t('mapTomTomBasic'),
- uri: `https://api.tomtom.com/map/1/style/20.0.0-8/basic_main.json?key=${tomTomKey}`,
+ style: `https://api.tomtom.com/map/1/style/20.0.0-8/basic_main.json?key=${tomTomKey}`,
available: !!tomTomKey,
attribute: 'tomTomKey',
},
{
+ id: 'hereBasic',
+ title: t('mapHereBasic'),
+ style: `https://assets.vector.hereapi.com/styles/berlin/base/mapbox/tilezen?apikey=${hereKey}`,
+ available: !!hereKey,
+ attribute: 'hereKey',
+ },
+ {
+ id: 'hereHybrid',
+ title: t('mapHereHybrid'),
+ style: styleCustom(
+ [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}`),
+ ),
+ available: !!hereKey,
+ attribute: 'hereKey',
+ },
+ {
+ id: 'hereSatellite',
+ title: t('mapHereSatellite'),
+ style: styleCustom(
+ [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}`),
+ ),
+ available: !!hereKey,
+ attribute: 'hereKey',
+ },
+ {
id: 'custom',
title: t('mapCustom'),
- uri: styleCustom(customMapUrl),
+ style: styleCustom(customMapUrl),
available: !!customMapUrl,
},
];
diff --git a/modern/src/map/overlay/useMapOverlays.js b/modern/src/map/overlay/useMapOverlays.js
index e7ea7322..d82397d6 100644
--- a/modern/src/map/overlay/useMapOverlays.js
+++ b/modern/src/map/overlay/useMapOverlays.js
@@ -17,6 +17,7 @@ export default () => {
const openWeatherKey = useAttributePreference('openWeatherKey');
const tomTomKey = useAttributePreference('tomTomKey');
+ const hereKey = useAttributePreference('hereKey');
const customMapOverlay = useSelector((state) => state.session.server?.overlayUrl);
return [
@@ -76,6 +77,15 @@ export default () => {
attribute: 'tomTomKey',
},
{
+ id: 'hereFlow',
+ title: t('mapHereFlow'),
+ 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,
+ attribute: 'hereKey',
+ },
+ {
id: 'custom',
title: t('mapOverlayCustom'),
source: sourceCustom(customMapOverlay),
diff --git a/modern/src/map/switcher/switcher.js b/modern/src/map/switcher/switcher.js
index 848abc40..76710ced 100644
--- a/modern/src/map/switcher/switcher.js
+++ b/modern/src/map/switcher/switcher.js
@@ -38,7 +38,7 @@ export class SwitcherControl {
styleElement.type = 'button';
styleElement.innerText = style.title;
styleElement.dataset.id = style.id;
- styleElement.dataset.uri = JSON.stringify(style.uri);
+ styleElement.dataset.style = JSON.stringify(style.style);
styleElement.addEventListener('click', (event) => {
const { target } = event;
if (!target.classList.contains('active')) {
@@ -61,7 +61,7 @@ export class SwitcherControl {
onSelectStyle(target) {
this.onBeforeSwitch();
- this.map.setStyle(JSON.parse(target.dataset.uri), {
+ this.map.setStyle(JSON.parse(target.dataset.style), {
diff: false,
});
diff --git a/web/l10n/en.json b/web/l10n/en.json
index 46378c96..b00ecc03 100644
--- a/web/l10n/en.json
+++ b/web/l10n/en.json
@@ -291,6 +291,11 @@
"mapTomTomFlow": "TomTom Traffic Flow",
"mapTomTomIncidents": "TomTom Traffic Incidents",
"mapTomTomKey": "TomTom API Key",
+ "mapHereBasic": "Here Basic",
+ "mapHereHybrid": "Here Hybrid",
+ "mapHereSatellite": "Here Satellite",
+ "mapHereFlow": "Here Traffic Flow",
+ "mapHereKey": "Here API Key",
"mapShapePolygon": "Polygon",
"mapShapeCircle": "Circle",
"mapShapePolyline": "Polyline",