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}`;