aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-11-01 11:39:57 -0800
committerAnton Tananaev <anton.tananaev@gmail.com>2020-11-01 11:39:57 -0800
commit47fd60f2c88bd540938eb0d9ba1c6e964c27d7d9 (patch)
tree4963d86e2d9b0ef419f5675a7197aef645bbb471
parentfd5f383530a025eb40793cdf00a6f6b20639bd77 (diff)
downloadtrackermap-web-47fd60f2c88bd540938eb0d9ba1c6e964c27d7d9.tar.gz
trackermap-web-47fd60f2c88bd540938eb0d9ba1c6e964c27d7d9.tar.bz2
trackermap-web-47fd60f2c88bd540938eb0d9ba1c6e964c27d7d9.zip
Move map styles
-rw-r--r--modern/src/map/Map.js19
-rw-r--r--modern/src/map/mapStyles.js52
2 files changed, 54 insertions, 17 deletions
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index fec8d501..6cb3949b 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -3,6 +3,7 @@ import mapboxgl from 'mapbox-gl';
import React, { useRef, useLayoutEffect, useEffect, useState } from 'react';
import { deviceCategories } from '../common/deviceCategories';
import { loadIcon, loadImage } from './mapUtil';
+import { styleOsm } from './mapStyles';
const element = document.createElement('div');
element.style.width = '100%';
@@ -10,23 +11,7 @@ element.style.height = '100%';
export const map = new mapboxgl.Map({
container: element,
- style: {
- version: 8,
- sources: {
- osm: {
- type: 'raster',
- tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
- tileSize: 256,
- attribution: '© <a target="_top" rel="noopener" href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
- },
- },
- glyphs: 'https://cdn.traccar.com/map/fonts/{fontstack}/{range}.pbf',
- layers: [{
- id: 'osm',
- type: 'raster',
- source: 'osm',
- }],
- },
+ style: styleOsm(),
});
map.addControl(new mapboxgl.NavigationControl());
diff --git a/modern/src/map/mapStyles.js b/modern/src/map/mapStyles.js
new file mode 100644
index 00000000..ff323cb3
--- /dev/null
+++ b/modern/src/map/mapStyles.js
@@ -0,0 +1,52 @@
+export const styleCustom = (url, attribution) => ({
+ version: 8,
+ sources: {
+ osm: {
+ type: 'raster',
+ tiles: [url],
+ attribution: attribution,
+ },
+ },
+ glyphs: 'https://cdn.traccar.com/map/fonts/{fontstack}/{range}.pbf',
+ layers: [{
+ id: 'osm',
+ type: 'raster',
+ source: 'osm',
+ }],
+});
+
+export 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',
+);
+
+export 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,
+ }
+ ]
+});
+
+export const styleMapbox = (style) => `mapbox://styles/mapbox/${style}`;
+
+export const styleMapTiler = (style, key) => `https://api.maptiler.com/maps/${style}/style.json?key=${key}`;