Add HERE maps and traffic

3 files changed, 65 insertions, 50 deletions

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,
     });