aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-06-12 07:15:23 -0700
committerAnton Tananaev <anton@traccar.org>2022-06-12 07:15:23 -0700
commit970df221bd7fb81d4d161ee91aa73cc56b05dfbe (patch)
tree9fd4fcb3da6d40480ccb6e104e1ef157dc575b60 /modern/src
parent127a8bfc5df8cbe66d5f60023fcf983e15ee13e8 (diff)
downloadtrackermap-web-970df221bd7fb81d4d161ee91aa73cc56b05dfbe.tar.gz
trackermap-web-970df221bd7fb81d4d161ee91aa73cc56b05dfbe.tar.bz2
trackermap-web-970df221bd7fb81d4d161ee91aa73cc56b05dfbe.zip
Support Bing Maps
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/common/attributes/useCommonUserAttributes.js4
-rw-r--r--modern/src/map/core/useMapStyles.js79
2 files changed, 52 insertions, 31 deletions
diff --git a/modern/src/common/attributes/useCommonUserAttributes.js b/modern/src/common/attributes/useCommonUserAttributes.js
index c1c7d981..ecb39daa 100644
--- a/modern/src/common/attributes/useCommonUserAttributes.js
+++ b/modern/src/common/attributes/useCommonUserAttributes.js
@@ -13,6 +13,10 @@ export default (t) => useMemo(() => ({
name: t('mapMapTilerKey'),
type: 'string',
},
+ bingMapsKey: {
+ name: t('mapBingKey'),
+ 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 944cd3ea..013772b3 100644
--- a/modern/src/map/core/useMapStyles.js
+++ b/modern/src/map/core/useMapStyles.js
@@ -2,55 +2,50 @@ import { useSelector } from 'react-redux';
import { useTranslation } from '../../common/components/LocalizationProvider';
import { useAttributePreference } from '../../common/util/preferences';
-const styleCustom = (url, attribution) => ({
+const styleCustom = (urls, attribution) => ({
version: 8,
sources: {
- osm: {
+ custom: {
type: 'raster',
- tiles: [url],
+ tiles: urls,
attribution,
tileSize: 256,
},
},
glyphs: 'https://cdn.traccar.com/map/fonts/{fontstack}/{range}.pbf',
layers: [{
- id: 'osm',
+ id: 'custom',
type: 'raster',
- source: 'osm',
+ source: 'custom',
}],
});
const styleOsm = () => styleCustom(
- 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+ [
+ 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+ ],
'© <a target="_top" rel="noopener" href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
);
-const styleCarto = () => ({
- version: 8,
- sources: {
- 'raster-tiles': {
- type: 'raster',
- tiles: [
- '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',
- ],
- tileSize: 256,
- attribution: '© <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>',
- },
- },
- glyphs: 'https://cdn.traccar.com/map/fonts/{fontstack}/{range}.pbf',
- layers: [
- {
- id: 'simple-tiles',
- type: 'raster',
- source: 'raster-tiles',
- minzoom: 0,
- maxzoom: 22,
- },
+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}`;
@@ -64,6 +59,7 @@ export default () => {
const mapboxAccessToken = useAttributePreference('mapboxAccessToken');
const mapTilerKey = useAttributePreference('mapTilerKey');
const locationIqKey = useAttributePreference('locationIqKey');
+ const bingMapsKey = useAttributePreference('bingMapsKey');
const customMapUrl = useSelector((state) => state.session.server?.mapUrl);
return [
@@ -135,6 +131,27 @@ export default () => {
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'),
+ available: !!bingMapsKey,
+ attribute: 'bingMapsKey',
+ },
+ {
+ id: 'bingAerial',
+ title: t('mapBingAerial'),
+ uri: styleBingMaps('http://ecn.{subdomain}.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'),
+ available: !!bingMapsKey,
+ attribute: 'bingMapsKey',
+ },
+ {
id: 'custom',
title: t('mapCustom'),
uri: styleCustom(customMapUrl),