Implement new map layers (#366)

5 files changed, 103 insertions, 8 deletions

diff --git a/web/app/Style.js b/web/app/Style.js
index aa749ce9..418ba424 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -68,7 +68,7 @@ Ext.define('Traccar.Style', {
     mapScaleNormal: 1,
     mapScaleSelected: 1.5,
 
-    mapMaxZoom: 19,
+    mapMaxZoom: 18,
     mapDelay: 500,
 
     mapAccuracyColor: 'rgba(96, 96, 96, 1.0)',
diff --git a/web/app/store/MapTypes.js b/web/app/store/MapTypes.js
index dba506dd..77c10ebd 100644
--- a/web/app/store/MapTypes.js
+++ b/web/app/store/MapTypes.js
@@ -32,6 +32,18 @@ Ext.define('Traccar.store.MapTypes', {
         key: 'bingAerial',
         name: Strings.mapBingAerial
     }, {
+        key: 'bingHybrid',
+        name: Strings.mapBingHybrid
+    }, {
+        key: 'baidu',
+        name: Strings.mapBaidu
+    }, {
+        key: 'yandexMap',
+        name: Strings.mapYandexMap
+    }, {
+        key: 'yandexSat',
+        name: Strings.mapYandexSat
+    }, {
         key: 'custom',
         name: Strings.mapCustom
     }]
diff --git a/web/app/view/map/BaseMap.js b/web/app/view/map/BaseMap.js
index ac3b2694..ace0d82d 100644
--- a/web/app/view/map/BaseMap.js
+++ b/web/app/view/map/BaseMap.js
@@ -62,19 +62,85 @@ Ext.define('Traccar.view.map.BaseMap', {
                     imagerySet: 'Aerial'
                 })
             });
+        } else if (type === 'bingHybrid') {
+            layer = new ol.layer.Tile({
+                source: new ol.source.BingMaps({
+                    key: bingKey,
+                    imagerySet: 'AerialWithLabels'
+                })
+            });
         } else if (type === 'osm') {
             layer = new ol.layer.Tile({
                 source: new ol.source.OSM({})
             });
+        } else if (type === 'baidu') {
+            layer = new ol.layer.Tile({
+                source: new ol.source.XYZ({
+                    projection: 'BD-MC',
+                    tileUrlFunction: function (tileCoord) {
+                        var URLS_LENGTH = 5;
+
+                        var x = tileCoord[1];
+                        var y = tileCoord[2];
+                        var z = tileCoord[0];
+
+                        var hash = (x << z) + y;
+                        var index = hash % URLS_LENGTH;
+                        index = index < 0 ? index + URLS_LENGTH : index;
+
+                        if (x < 0) {
+                            x = 'M' + (-x)
+                        }
+                        if (y < 0) {
+                            y = 'M' + (-y)
+                        }
+                        return 'http://online{}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl'
+                            .replace('{}', index).replace('{x}', x).replace('{y}', y).replace('{z}', z);
+                    },
+                    tileGrid: new ol.tilegrid.TileGrid({
+                        extent: ol.proj.transformExtent([-180, -74, 180, 74], 'EPSG:4326', 'BD-MC'),
+                        origin: [0, 0],
+                        minZoom: 3,
+                        resolutions: [
+                            262144, 131072, 65536, 32768, 16384, 8192, 4096, 2048,
+                            1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5
+                        ]
+                    }),
+                    attributions: [
+                        new ol.Attribution({
+                            html: '&copy; <a href="http://map.baidu.com/">Baidu</a>'
+                        })
+                    ]
+                })
+            });
+        } else if (type === 'yandexMap') {
+            layer = new ol.layer.Tile({
+                source: new ol.source.XYZ({
+                    url: 'https://vec0{1-4}.maps.yandex.net/tiles?l=map&x={x}&y={y}&z={z}',
+                    projection: 'EPSG:3395',
+                    attributions: [
+                        new ol.Attribution({
+                            html: '&copy; <a href="https://yandex.com/maps/">Yandex</a>'
+                        })
+                    ]
+                })
+            });
+        } else if (type === 'yandexSat') {
+            layer = new ol.layer.Tile({
+                source: new ol.source.XYZ({
+                    url: 'https://sat0{1-4}.maps.yandex.net/tiles?l=sat&x={x}&y={y}&z={z}',
+                    projection: 'EPSG:3395',
+                    attributions: [
+                        new ol.Attribution({
+                            html: '&copy; <a href="https://yandex.com/maps/">Yandex</a>'
+                        })
+                    ]
+                })
+            });
         } else {
             layer = new ol.layer.Tile({
                 source: new ol.source.XYZ({
-                    urls: [
-                        'https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
-                        'https://cartodb-basemaps-b.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
-                        'https://cartodb-basemaps-c.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
-                        'https://cartodb-basemaps-d.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
-                    ],
+                    url: 'https://cartodb-basemaps-{a-d}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
                     attributions: [
                         new ol.Attribution({
                             html: [
@@ -143,4 +209,10 @@ Ext.define('Traccar.view.map.BaseMap', {
             this.map.updateSize();
         }
     }
+}, function () {
+
+    proj4.defs('BD-MC','+proj=merc +lon_0=0 +units=m +ellps=clrk66 +no_defs');
+    proj4.defs('EPSG:3395', '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
+    ol.proj.get('EPSG:3395').setExtent([-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]);
+
 });
diff --git a/web/l10n/en.json b/web/l10n/en.json
index f494978f..a810943b 100644
--- a/web/l10n/en.json
+++ b/web/l10n/en.json
@@ -132,6 +132,10 @@
     "mapBingKey": "Bing Maps Key",
     "mapBingRoad": "Bing Maps Road",
     "mapBingAerial": "Bing Maps Aerial",
+    "mapBingHybrid": "Bing Maps Hybrid",
+    "mapBaidu": "Baidu",
+    "mapYandexMap": "Yandex Map",
+    "mapYandexSat": "Yandex Satellite",
     "mapShapePolygon": "Polygon",
     "mapShapeCircle": "Circle",
     "mapShapePolyline": "Polyline",
diff --git a/web/load.js b/web/load.js
index fc676b76..4baa6901 100644
--- a/web/load.js
+++ b/web/load.js
@@ -1,5 +1,5 @@
 (function () {
-    var debugMode, touchMode, locale, localeParameter, extjsVersion, fontAwesomeVersion, olVersion, i, language, languages;
+    var debugMode, touchMode, locale, localeParameter, extjsVersion, proj4jsVersion, fontAwesomeVersion, olVersion, i, language, languages;
 
     function addStyleFile(file) {
         var link = document.createElement('link');
@@ -120,6 +120,7 @@
     extjsVersion = '6.2.0';
     fontAwesomeVersion = '4.7.0';
     olVersion = '4.0.0';
+    proj4jsVersion = '2.4.3';
 
     if (debugMode) {
         addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/ext-all-debug.js');
@@ -144,6 +145,12 @@
         addScriptFile('//cdnjs.cloudflare.com/ajax/libs/ol3/' + olVersion + '/ol.js');
     }
 
+    if (debugMode) {
+        addScriptFile('//cdnjs.cloudflare.com/ajax/libs/proj4js/' + proj4jsVersion + '/proj4-src.js');
+    } else {
+        addScriptFile('//cdnjs.cloudflare.com/ajax/libs/proj4js/' + proj4jsVersion + '/proj4.js');
+    }
+
     addSvgFile('images/default.svg', 'defaultSvg');
     addSvgFile('images/arrow.svg', 'arrowSvg');
     addSvgFile('images/car.svg', 'carSvg');