map control

package-lock.json

@@ -9601,6 +9601,11 @@
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.6.0.tgz",
       "integrity": "sha512-CPkhyqWUKZKFJ6K8umN5/D2wrJ2+/8UIpXppY7QDnUZW5bZL5+SEI2J7GBpwh4LIupOKqbNSQXgqmrEJopHVNQ=="
     },
+    "leaflet.gridlayer.googlemutant": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/leaflet.gridlayer.googlemutant/-/leaflet.gridlayer.googlemutant-0.9.0.tgz",
+      "integrity": "sha512-hkLEHLcdcCaq1OKgUla5ar6fCaUK6yBYIY9HyAclPcMwhnpJTnLmYYPbVJbq3Niz0YiO75gls4A6D6jkBJXpuw=="
+    },
     "leaflet.markercluster": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz",

package.json

@@ -25,6 +25,7 @@
     "flag-icon-css": "^3.4.6",
     "font-awesome": "^4.7.0",
     "leaflet": "^1.6.0",
+    "leaflet.gridlayer.googlemutant": "^0.9.0",
     "leaflet.markercluster": "^1.4.1",
     "node-sass": "^4.14.1",
     "prop-types": "^15.7.2",

public/index.html

@@ -79,5 +79,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://maps.googleapis.com/maps/api/js" async defer></script>
   </body>
 </html>

src/components/LeafletMap/index.js

@@ -3,6 +3,9 @@ import 'leaflet/dist/leaflet.css';
 import 'leaflet.markercluster/dist/leaflet.markercluster';
 import 'leaflet.markercluster/dist/MarkerCluster.css';
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
+import 'leaflet.gridlayer.googlemutant/Leaflet.GoogleMutant';
+
+import maps from './maps.js';
 
 export var MapTypes = {
     _TRACKING_: 'TRACKING_MAP',
@@ -31,7 +34,28 @@ export class LMap {
     }
 
     setTileLayer(templateUrl, options) {
-        L.tileLayer(templateUrl, options).addTo(this.map);
+        // L.tileLayer(templateUrl, options).addTo(this.map);
+        // L.gridLayer.googleMutant({
+		// 	maxZoom: 24,
+		// 	type:'roadmap'
+		// }).addTo(this.map);
+    }
+
+    addLayersControl(layers, options){
+        var baseMaps = {};
+        layers.forEach(l => {
+            var _map = maps[l], _layer;
+
+            if(_map.type == 'leaflet')
+                _layer = L.tileLayer(_map.url, {..._map.options, ...options});
+            else
+                _layer = L.gridLayer.googleMutant(_map.options);
+
+            if(!Object.keys(baseMaps).length) _layer.addTo(this.map);
+            baseMaps[_map.name] = _layer;
+        });
+
+        L.control.layers(baseMaps).addTo(this.map);
     }
 
     drawPath(latlngs, options){

src/components/LeafletMap/maps.js

@@ -0,0 +1,46 @@
+export default {
+    _OPENSTREET_ : {
+        url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+        name: 'Street',
+        provider: 'OpenStreetMap.Mapnik',
+        type: 'leaflet',
+        options: {
+            maxZoom: 19,
+	        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        }
+    },
+    _OPENTOPO_ : {
+        url: "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
+        name: 'Topo',
+        provider: 'OpenTopoMap',
+        type: 'leaflet',
+        options: {
+            maxZoom: 17,
+	        attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
+        }
+    },
+    _AERIAL_:{
+        name: 'Aerial',
+        type: 'google',
+        options: {
+            maxZoom: 24,
+            type: 'satellite'
+        }
+    },
+    _TERRAIN_:{
+        name: 'Terrain',
+        type: 'google',
+        options: {
+            maxZoom: 24,
+            type: 'terrain'
+        }
+    },
+    _TRAFFIC_:{
+        name: 'Traffic',
+        type: 'google',
+        options: {
+            maxZoom: 24,
+            type: 'roadmap'
+        }
+    }
+}

src/views/Maps/index.js

@@ -2,10 +2,21 @@ import React from 'react';
 import { Row, Col, Card, CardBody, CardHeader } from 'reactstrap';
 import { LMap, MapTypes, MapIcons } from '../../components/LeafletMap';
 
+function getRandomMarker(limit){
+    var _markers = [];
+    for(var i = 0; i < limit; i++){
+        _markers.push({
+            latlng: [Math.random()*60 + 20, Math.random()*60 - 15],
+            icon: MapIcons[Object.keys(MapIcons)[Math.floor(Math.random()*2)]]
+        });
+    };
+    return _markers;
+}
+
 export default class Maps extends React.Component{
     componentDidMount(){
         this.trackingMap = new LMap('tracking_map', { center: [50.073658, 14.418540], zoom: 6}, MapTypes._TRACKING_);
-        this.trackingMap.setTileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        this.trackingMap.addLayersControl([ '_OPENSTREET_', '_OPENTOPO_', '_AERIAL_', '_TERRAIN_', '_TRAFFIC_' ],{
             detectRetina: true,
             maxZoom: 19,
             maxNativeZoom: 17,
@@ -21,33 +32,12 @@ export default class Maps extends React.Component{
 
 
         this.positionMap = new LMap('position_map', { center: [50.073658, 14.418540], zoom: 6}, MapTypes._POSITION_);
-        this.positionMap.setTileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        this.positionMap.addLayersControl([ '_OPENSTREET_', '_OPENTOPO_', '_AERIAL_', '_TERRAIN_', '_TRAFFIC_' ],{
             detectRetina: true,
             maxZoom: 19,
             maxNativeZoom: 17,
         });
-        this.positionMap.drawMarker([
-            {
-                latlng: [50.073658, 14.418540],
-                icon: MapIcons._RED_
-            },
-            {
-                latlng: [51, 16],
-                icon: MapIcons._BULE_
-            },
-            {
-                latlng: [51.5, 15.8],
-                icon: MapIcons._GREEN_
-            },
-            {
-                latlng: [52, 15],
-                icon: MapIcons._RED_
-            },
-            {
-                latlng: [52, 13],
-                icon: MapIcons._BULE_
-            }
-        ]);
+        this.positionMap.drawMarker(getRandomMarker(50));
     };
 
     render(){
@@ -60,7 +50,7 @@ export default class Maps extends React.Component{
                             Tracking Map
                         </CardHeader>
                         <CardBody>
-                            <div id="tracking_map" style={{height: '320px'}}></div>
+                            <div id="tracking_map" style={{height: '400px'}}></div>
                         </CardBody>
                     </Card>
                 </Col>
@@ -70,7 +60,7 @@ export default class Maps extends React.Component{
                             Position Map
                         </CardHeader>
                         <CardBody>
-                            <div id="position_map" style={{height: '320px'}}></div>
+                            <div id="position_map" style={{height: '400px'}}></div>
                         </CardBody>
                     </Card>
                 </Col>