geoSearch and Routing

package-lock.json

@@ -1638,6 +1638,16 @@
         "@types/yargs": "^13.0.0"
       }
     },
+    "@mapbox/corslite": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/@mapbox/corslite/-/corslite-0.0.7.tgz",
+      "integrity": "sha1-KfW2oYi6lG5RS98LZAHtT74To54="
+    },
+    "@mapbox/polyline": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/polyline/-/polyline-0.2.0.tgz",
+      "integrity": "sha1-biWYB0SqIjMflLZFpULALT/P7pc="
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -9885,11 +9895,39 @@
       "resolved": "https://registry.npmjs.org/leaflet-contextmenu/-/leaflet-contextmenu-1.4.0.tgz",
       "integrity": "sha1-4r2kga8QJggOq6oymX5TH9RPYFw="
     },
+    "leaflet-control-custom": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/leaflet-control-custom/-/leaflet-control-custom-1.0.0.tgz",
+      "integrity": "sha512-Me7m9/lc/dArlu758vmTlhebVJe5UROtvfluvYdyGetmVTrasva8Airowc8FO7Pz8GM5WqZ8pbgqM8YSh9CcRw=="
+    },
+    "leaflet-control-geocoder": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/leaflet-control-geocoder/-/leaflet-control-geocoder-1.13.0.tgz",
+      "integrity": "sha512-mgYGx/2WA5CcvhP+IJtw7VvJwSGAe5zxX+TKe6ruYkLj2W5I5V/K/nQiLvsUtqifBojBGoKIPNZ8m0mXJNIudg==",
+      "requires": {
+        "open-location-code": "^1.0.0"
+      }
+    },
+    "leaflet-defaulticon-compatibility": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/leaflet-defaulticon-compatibility/-/leaflet-defaulticon-compatibility-0.1.1.tgz",
+      "integrity": "sha512-vDBFdlUAwjSEGep9ih8kfJilf6yN8V9zTbF5NC/1ZwLeGko3RUQepspPnGCRMFV51dY3Lb3hziboicrFz+rxQA=="
+    },
     "leaflet-gpx": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/leaflet-gpx/-/leaflet-gpx-1.5.0.tgz",
       "integrity": "sha512-x6bubTA3/ySOF8K6VOGONWEED5/yOtRBkb2zJUp4rhdN4HIEKW9S+AWMAj626VxjwrqJY2kq/wn2Ev6ifu3RVA=="
     },
+    "leaflet-routing-machine": {
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/leaflet-routing-machine/-/leaflet-routing-machine-3.2.12.tgz",
+      "integrity": "sha512-HLde58G1YtD9xSIzZavJ6BPABZaV1hHeGst8ouhzuxmSC3s32NVtADT+njbIUMW1maHRCrsgTk/E4hz5QH7FrA==",
+      "requires": {
+        "@mapbox/corslite": "0.0.7",
+        "@mapbox/polyline": "^0.2.0",
+        "osrm-text-instructions": "^0.13.2"
+      }
+    },
     "leaflet-sidebar-v2": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/leaflet-sidebar-v2/-/leaflet-sidebar-v2-3.2.2.tgz",
@@ -11180,6 +11218,12 @@
         }
       }
     },
+    "open-location-code": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/open-location-code/-/open-location-code-1.0.3.tgz",
+      "integrity": "sha1-XqGjTuUiHGyvoEOS4b2Qb9dIj34=",
+      "optional": true
+    },
     "opn": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
@@ -11258,6 +11302,11 @@
         "os-tmpdir": "^1.0.0"
       }
     },
+    "osrm-text-instructions": {
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/osrm-text-instructions/-/osrm-text-instructions-0.13.4.tgz",
+      "integrity": "sha512-ge4ZTIetMQKAHKq2MwWf83ntzdJN20ndRKRaVNoZ3SkDkBNO99Qddz7r6+hrVx38I+ih6Rk5T1yslczAB6Q9Pg=="
+    },
     "p-defer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",

package.json

@@ -26,7 +26,11 @@
     "font-awesome": "^4.7.0",
     "leaflet": "^1.6.0",
     "leaflet-contextmenu": "^1.4.0",
+    "leaflet-control-custom": "^1.0.0",
+    "leaflet-control-geocoder": "^1.13.0",
+    "leaflet-defaulticon-compatibility": "^0.1.1",
     "leaflet-gpx": "^1.5.0",
+    "leaflet-routing-machine": "^3.2.12",
     "leaflet-sidebar-v2": "^3.2.2",
     "leaflet.fullscreen": "^1.6.0",
     "leaflet.gridlayer.googlemutant": "^0.9.0",

src/components/LeafletMap/LMap.js

@@ -1,10 +1,12 @@
-import L from 'leaflet';
+import L, { latLng } from 'leaflet';
 import './vendor';
+import './leaflet-map.css';
 
 import maps from './maps.js';
 import { MapMenu, MarkerMenu } from './contextMenus';
 import lmapSidebar from './sidebar';
 
+
 import {geojson} from './example_data';
 
 export var MapTypes = {
@@ -29,24 +31,30 @@ export class LMap {
         });
 
         this.mapType = type;
+        this.domID = id;
         this.options = options;
+        this.mapElements = [];
+        this.status = null;
+        this.clusterGroup = L.markerClusterGroup();
 
+        this._initialize();
+    }
+
+    _initialize(){
+        this.map.on('click', this.mapClickHandler, this);
         if(this.options.sidebar){
-            this.Sidebar = lmapSidebar(id);
+            this.Sidebar = lmapSidebar(this.domID);
             L.control.sidebar({
                 autopan: false,
                 closeButton: true,
-                container: id + "__lmap-sidebar",
+                container: this.domID + "__lmap-sidebar",
                 position: 'left'
             }).addTo(this.map);
         }
         
-        if(this.options.elevation){
-            this.createElevation();
-        }
-
-        this.mapElements = [];
-        this.clusterGroup = L.markerClusterGroup();
+        if(this.options.elevation) this.addElevation();
+        if(this.options.geosearch) this.addGeoSearching();
+        if(this.options.routing) this.addRouting();
     }
     
     setView(options){
@@ -68,7 +76,7 @@ export class LMap {
 		// }).addTo(this.map);
     }
 
-    addLayersControl(layers, options){
+    addTileLayers(layers, options){
         var baseMaps = {};
         layers.forEach(l => {
             var _map = maps[l], _layer;
@@ -83,6 +91,10 @@ export class LMap {
         });
         
         L.control.layers(baseMaps).addTo(this.map);
+        if(this.routingControl) {
+            this.routingControl.remove();
+            this.routingControl.addTo(this.map);
+        }
     }
 
     drawPath(latlngs, options){
@@ -136,15 +148,18 @@ export class LMap {
     }
 
     _createMarker(el){
+        let _this = this;
         let _icon = el.icon;
         let _latlng = el.cord.split(',');
 
         let marker = L.marker(_latlng, {
+            name: el.name,
             icon: this._getFontIcon(_icon.icon, _icon.color),
             ...MarkerMenu(el.name)
         });
 
         marker.bindPopup("<b>"+el.name+"</b><br>"+el.cord).openPopup();
+        marker.on('click', this.markerClickHandler, this);
 
         return marker;
     }
@@ -171,14 +186,110 @@ export class LMap {
         });
     }
 
-    createElevation(){
+    addElevation(){
         var hg = L.control.heightgraph({
             position: 'bottomright',
             width: 800,
-            height: 280
+            height: 280,
+            expand: false
         });
         hg.addTo(this.map);
         hg.addData(geojson);
         L.geoJson(geojson).addTo(this.map);
+        console.log(hg);
+    }
+
+    addGeoSearching(){
+        L.Control.geocoder({
+            position: 'topleft',
+            geocoder: L.Control.Geocoder.mapbox('pk.eyJ1IjoiaHVkYWxpbmciLCJhIjoiY2thN2xobWU1MDQ5ZTMwbWt3dHdzZzNiNSJ9.h8fncaoyA-IUhfWcjFZWiw', 
+                {
+                    serviceUrl: "https://api.mapbox.com/geocoding/v5/mapbox.places/"
+                }
+            )
+        }).addTo(this.map);
+    }
+
+    addRouting(){
+        var _this = this;
+        this.routingControl = L.control.custom({
+            position: 'topright',
+            content : '<button type="button" class="btn"></button>',
+            classes : 'btn-group-vertical btn-group-sm leaflet-control-routing-btn',
+            style   :
+            {
+                margin: '10px 10px 0px 0px',
+                padding: '0px 0 0 0',
+                cursor: 'pointer',
+                'background-color': 'white',
+                'border-radius': '5px',
+                'box-shadow': '0 0 5px 0px #8e8e8e'
+            },
+            events:
+            {
+                click: function(e)
+                {
+                    this.classList.toggle("open");
+                    if(this.classList.contains('open'))
+                        _this.enableRoutingContainer();
+                    else
+                        _this.disableRoutingContainer();
+                }
+            }
+        }).addTo(this.map);
+        
+        this.routingControlPan = L.Routing.control({
+            router: L.Routing.mapbox('pk.eyJ1IjoiaHVkYWxpbmciLCJhIjoiY2thN2xobWU1MDQ5ZTMwbWt3dHdzZzNiNSJ9.h8fncaoyA-IUhfWcjFZWiw'),
+            geocoder: L.Control.Geocoder.mapbox('pk.eyJ1IjoiaHVkYWxpbmciLCJhIjoiY2thN2xobWU1MDQ5ZTMwbWt3dHdzZzNiNSJ9.h8fncaoyA-IUhfWcjFZWiw', 
+                {
+                    serviceUrl: "https://api.mapbox.com/geocoding/v5/mapbox.places/"
+                }
+            )
+        });
+        console.log(this.routingControlPan);
+    }
+
+    enableRoutingContainer(){
+        this.status = "ROUTING";
+        this.routingControlPan.addTo(this.map);
+    }
+    disableRoutingContainer(){
+        this.status = null;
+        this.routingControlPan.remove();
+    }
+
+    mapClickHandler(e){
+        console.log('map', e);
+    }
+
+    markerClickHandler(e){
+        var latlng = e.target._latlng;
+        var name = e.target.options.name;
+        this._addRoutingPoint(latlng, name);
+        console.log('marker', e);
+    }
+
+    _addRoutingPoint(latlng, name){
+        if(this.status !== 'ROUTING' || !this.options.routing) return;
+
+        var curPoints = this.routingControlPan.getWaypoints();
+        if(curPoints.length == 2){
+            if(!curPoints[0].latLng) {
+                curPoints[0].latLng = latlng;
+                curPoints[0].name = name;
+                this.routingControlPan.setWaypoints(curPoints);
+                return;
+            }
+            if(!curPoints[1].latLng){
+                curPoints[1].latLng = latlng;
+                curPoints[1].name = name;
+                this.routingControlPan.setWaypoints(curPoints);
+                return;
+            }
+        }
+
+        curPoints.push(L.Routing.waypoint(latlng, name));
+        this.routingControlPan.setWaypoints(curPoints);
+
     }
 }

src/components/LeafletMap/leaflet-map.css

@@ -0,0 +1,13 @@
+.leaflet-control-routing-btn .btn{
+    line-height: 1;
+}
+.leaflet-control-routing-btn .btn::before{
+    content: "\21AF";
+    font-weight: bold;
+    font-size: 1rem;
+    line-height: 1rem;
+}
+
+.leaflet-control-routing-btn.open .btn::before{
+    content: "\0058";
+}

src/components/LeafletMap/leaflet-sidebar.css

@@ -0,0 +1,248 @@
+.leaflet-sidebar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  overflow: hidden;
+  z-index: 2000; }
+  .leaflet-sidebar.collapsed {
+    width: 40px; }
+  @media (min-width: 768px) {
+    .leaflet-sidebar {
+      top: 10px;
+      bottom: 10px;
+      /* width: 280px;
+      max-width: 280px; */
+      transition: width 500ms; } }
+  /* @media (min-width: 768px) {
+    .leaflet-sidebar {
+       } } */
+  @media (min-width: 768px) and (max-width: 991px) {
+    .leaflet-sidebar {
+      width: 305px;
+      max-width: 305px; } }
+  @media (min-width: 992px) and (max-width: 1199px) {
+    .leaflet-sidebar {
+      width: 390px;
+      max-width: 390px; } }
+  @media (min-width: 1200px) {
+    .leaflet-sidebar {
+      width: 460px;
+      max-width: 460px; } }
+
+.leaflet-sidebar-left {
+  left: 0; }
+  @media (min-width: 768px) {
+    .leaflet-sidebar-left {
+      left: 10px; } }
+
+.leaflet-sidebar-right {
+  right: 0; }
+  @media (min-width: 768px) {
+    .leaflet-sidebar-right {
+      right: 10px; } }
+
+.leaflet-sidebar-tabs {
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  background-color: #fff; }
+  .leaflet-sidebar-left .leaflet-sidebar-tabs {
+    left: 0; }
+  .leaflet-sidebar-right .leaflet-sidebar-tabs {
+    right: 0; }
+  .leaflet-sidebar-tabs, .leaflet-sidebar-tabs > ul {
+    position: absolute;
+    width: 40px;
+    margin: 0;
+    padding: 0;
+    list-style-type: none; }
+    .leaflet-sidebar-tabs > li, .leaflet-sidebar-tabs > ul > li {
+      width: 100%;
+      height: 40px;
+      color: #333;
+      font-size: 12pt;
+      overflow: hidden;
+      transition: all 80ms; }
+      .leaflet-sidebar-tabs > li:hover, .leaflet-sidebar-tabs > ul > li:hover {
+        color: #000;
+        background-color: #eee; }
+      .leaflet-sidebar-tabs > li.active, .leaflet-sidebar-tabs > ul > li.active {
+        color: #fff;
+        background-color: #0074d9; }
+      .leaflet-sidebar-tabs > li.disabled, .leaflet-sidebar-tabs > ul > li.disabled {
+        color: rgba(51, 51, 51, 0.4); }
+        .leaflet-sidebar-tabs > li.disabled:hover, .leaflet-sidebar-tabs > ul > li.disabled:hover {
+          background: transparent; }
+        .leaflet-sidebar-tabs > li.disabled > a, .leaflet-sidebar-tabs > ul > li.disabled > a {
+          cursor: default; }
+      .leaflet-sidebar-tabs > li > a, .leaflet-sidebar-tabs > ul > li > a {
+        display: block;
+        width: 100%;
+        height: 100%;
+        line-height: 40px;
+        color: inherit;
+        text-decoration: none;
+        text-align: center;
+        cursor: pointer; }
+  .leaflet-sidebar-tabs > ul + ul {
+    bottom: 0; }
+
+.leaflet-sidebar-content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.95);
+  overflow: hidden;}
+  .leaflet-sidebar-left .leaflet-sidebar-content {
+    left: 40px;
+    right: 0; }
+  .leaflet-sidebar-right .leaflet-sidebar-content {
+    left: 0;
+    right: 40px; }
+  .leaflet-sidebar.collapsed > .leaflet-sidebar-content {
+    overflow-y: hidden; }
+
+.collapsed > .leaflet-sidebar-content {
+  overflow-y: hidden; }
+
+.leaflet-sidebar-pane {
+  display: none;
+  height: 100%;
+  left: 0;
+  right: 0;
+  box-sizing: border-box;}
+  .leaflet-sidebar-pane.active {
+    display: block; }
+  /* @media (min-width: 768px) and (max-width: 991px) {
+    .leaflet-sidebar-pane {
+      min-width: 265px; } }
+  @media (min-width: 992px) and (max-width: 1199px) {
+    .leaflet-sidebar-pane {
+      min-width: 350px; } }
+  @media (min-width: 1200px) {
+    .leaflet-sidebar-pane {
+      min-width: 420px; } } */
+
+.leaflet-sidebar-header {
+  height: 40px;
+  margin: 0px;
+  padding: 0 20px;
+  line-height: 40px;
+  font-size: 14.4pt;
+  color: #fff;
+  background-color: #0074d9; }
+  .leaflet-sidebar-right .leaflet-sidebar-header {
+    padding-left: 40px; }
+
+.leaflet-sidebar-close {
+  position: absolute;
+  top: 0;
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  cursor: pointer; }
+  .leaflet-sidebar-left .leaflet-sidebar-close {
+    right: 0; }
+  .leaflet-sidebar-right .leaflet-sidebar-close {
+    left: 0; }
+
+.leaflet-sidebar {
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); }
+  @media (min-width: 768px) {
+    .leaflet-sidebar {
+      border-radius: 4px; }
+      .leaflet-sidebar.leaflet-touch {
+        border: 2px solid rgba(0, 0, 0, 0.2); } }
+
+.leaflet-sidebar-left.leaflet-touch {
+  box-shadow: none;
+  border-right: 2px solid rgba(0, 0, 0, 0.2); }
+
+@media (min-width: 768px) {
+  .leaflet-sidebar-left ~ .leaflet-control-container .leaflet-left {
+    transition: left 500ms; } }
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .leaflet-sidebar-left ~ .leaflet-control-container .leaflet-left {
+    left: 315px; } }
+
+@media (min-width: 992px) and (max-width: 1199px) {
+  .leaflet-sidebar-left ~ .leaflet-control-container .leaflet-left {
+    left: 400px; } }
+
+@media (min-width: 1200px) {
+  .leaflet-sidebar-left ~ .leaflet-control-container .leaflet-left {
+    left: 470px; } }
+
+.leaflet-sidebar-left.collapsed ~ .leaflet-control-container .leaflet-left {
+  left: 50px; }
+
+.leaflet-sidebar-right.leaflet-touch {
+  box-shadow: none;
+  border-left: 2px solid rgba(0, 0, 0, 0.2); }
+
+@media (min-width: 768px) {
+  .leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right {
+    transition: right 500ms; } }
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right {
+    right: 315px; } }
+
+@media (min-width: 992px) and (max-width: 1199px) {
+  .leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right {
+    right: 400px; } }
+
+@media (min-width: 1200px) {
+  .leaflet-sidebar-right ~ .leaflet-control-container .leaflet-right {
+    right: 470px; } }
+
+.leaflet-sidebar-right.collapsed ~ .leaflet-control-container .leaflet-right {
+  right: 50px; }
+
+.leaflet-sidebar-body{
+  height: calc(100% - 50px);
+  overflow: auto;
+  padding: 10px 0px 0px;
+}
+
+.leaflet-sidebar-body ul{
+  padding-left: 16px;
+}
+
+.leaflet-sidebar-body li{
+  list-style-type: none;
+}
+
+.leaflet-sidebar-body .e-dropdown .e-item{
+  position: relative;
+  cursor: pointer;
+  padding: 0px 6px;
+}
+.leaflet-sidebar-body .e-dropdown.open .e-item{
+  background-color: #ddf0fb;
+}
+
+.leaflet-sidebar-body .e-dropdown .e-item::before{
+  position: absolute;
+  top: 0;
+  left: -.7rem;
+  display: block;
+  padding: 0;
+  content: "\002B";
+  font-weight: bold;
+  transition: transform .3s;
+}
+
+.leaflet-sidebar-body .e-dropdown.open .e-item::before{
+  content: "\2212";
+}
+
+.leaflet-sidebar-body .e-dropdown .e-attr{
+  display: none;
+  transition: transform .3s;
+}
+.leaflet-sidebar-body .e-dropdown.open .e-attr{
+  display: block;
+}

src/components/LeafletMap/sidebar.js

@@ -17,14 +17,16 @@ class LMapSidebar{
                     <li><a href="#home" role="tab"><i class="fa fa-bars active"></i></a></li>
                 </ul>
             </div>
-            <div class="leaflet-sidebar-content">
-                <div class="leaflet-sidebar-pane" id="home">
-                    <h1 class="leaflet-sidebar-header">
+            <div class="leaflet-sidebar-content" >
+                <div class="leaflet-sidebar-pane" id="home" >
+                    <h1 class="leaflet-sidebar-header" >
                         Map Elements
                         <span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span>
                     </h1>
-                    <ul class="content">
-                    </ul>
+                    <div class="leaflet-sidebar-body" >
+                        <ul class="content">
+                        </ul>
+                    </div>
                 </div>
             </div>`;
         mapEle.prepend(mapSidebar);
@@ -39,14 +41,25 @@ class LMapSidebar{
 
     createElement(data){
         let _el = document.createElement('li');
+        _el.classList.add("e-dropdown");
+        _el.setAttribute('id', data.id);
 
-        _el.innerHTML = 
-            data.name + `<ul id="`+data.id+`">
-                <li>`+data.type+`</li>
-                <li>`+data.status+`</li>
-            </ul>`;
-        
+        let _item = document.createElement('div');
+        _item.classList.add("e-item");
+        _item.innerHTML = data.name;
+
+        let _attr = document.createElement('ul');
+        _attr.classList.add("e-attr");
+        _attr.innerHTML = `<li>Type: `+data.type+`</li>
+                          <li>Status: `+data.status+`</li>`;
+
+        _el.append(_item);
+        _el.append(_attr);
         document.querySelector("#" + this.id + " .content").append(_el);
+
+        _item.addEventListener('click', function(e){
+            this.parentElement.classList.toggle('open');
+        });
     }
 
     getID(){

src/components/LeafletMap/vendor.js

@@ -1,5 +1,10 @@
 import 'leaflet/dist/leaflet.css';
 
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';
+import 'leaflet-defaulticon-compatibility';
+
+import 'leaflet-control-custom/Leaflet.Control.Custom';
+
 import 'leaflet.markercluster/dist/leaflet.markercluster';
 import 'leaflet.markercluster/dist/MarkerCluster.css';
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
@@ -13,9 +18,15 @@ import 'leaflet.fullscreen/Control.FullScreen';
 import 'leaflet.fullscreen/Control.FullScreen.css';
 
 import 'leaflet-sidebar-v2/js/leaflet-sidebar';
-import 'leaflet-sidebar-v2/css/leaflet-sidebar.css';
+import './leaflet-sidebar.css';
 
 import 'leaflet-gpx/gpx';
 
 import 'leaflet.heightgraph/dist/L.Control.Heightgraph';
 import 'leaflet.heightgraph/dist/L.Control.Heightgraph.min.css';
+
+import 'leaflet-routing-machine/dist/leaflet-routing-machine';
+import 'leaflet-routing-machine/dist/leaflet-routing-machine.css';
+
+import 'leaflet-control-geocoder/dist/Control.Geocoder';
+import 'leaflet-control-geocoder/dist/Control.Geocoder.css';

src/views/Maps/index.js

@@ -7,7 +7,7 @@ import { data } from './tempData';
 export default class Maps extends React.Component{
     componentDidMount(){
         this.trackingMap = new LMap('tracking_map', MapTypes._TRACKING_, { center: [50.073658, 14.418540], zoom: 6, clustering: true });
-        this.trackingMap.addLayersControl([ '_OPENSTREET_', '_OPENTOPO_', '_AERIAL_', '_TERRAIN_', '_TRAFFIC_' ],{
+        this.trackingMap.addTileLayers([ '_OPENSTREET_', '_OPENTOPO_', '_AERIAL_', '_TERRAIN_', '_TRAFFIC_' ],{
             detectRetina: true,
             maxZoom: 19,
             maxNativeZoom: 17,
@@ -20,7 +20,7 @@ export default class Maps extends React.Component{
             center: [50.073658, 14.418540],
             zoom: 6
         });
-        this.positionMap.addLayersControl([ '_OPENSTREET_', '_OPENTOPO_', '_AERIAL_', '_TERRAIN_', '_TRAFFIC_' ],{
+        this.positionMap.addTileLayers([ '_OPENSTREET_', '_OPENTOPO_', '_AERIAL_', '_TERRAIN_', '_TRAFFIC_' ],{
             detectRetina: true,
             maxZoom: 19,
             maxNativeZoom: 17,
@@ -32,7 +32,7 @@ export default class Maps extends React.Component{
             center: [50.073658, 14.418540],
             zoom: 6,
         });
-        this.heatmap.addLayersControl([ '_OPENSTREET_', '_OPENTOPO_', '_AERIAL_', '_TERRAIN_', '_TRAFFIC_' ],{
+        this.heatmap.addTileLayers([ '_OPENSTREET_', '_OPENTOPO_', '_AERIAL_', '_TERRAIN_', '_TRAFFIC_' ],{
             detectRetina: true,
             maxZoom: 19,
             maxNativeZoom: 17,

src/views/Maps/mapfunctions.js

@@ -11,14 +11,17 @@ export default class MapFunctions extends React.Component{
             zoom: 8,
             clustering: true,
             sidebar: true,
-            elevation: true
+            elevation: true,
+            geosearch: true,
+            routing: true
         });
 
-        this.markersMap.addLayersControl([ '_OPENSTREET_', '_OPENTOPO_', '_AERIAL_', '_TERRAIN_', '_TRAFFIC_' ],{
+        this.markersMap.addTileLayers([ '_OPENSTREET_', '_OPENTOPO_', '_AERIAL_', '_TERRAIN_', '_TRAFFIC_' ],{
             detectRetina: true,
             maxZoom: 19,
             maxNativeZoom: 17,
         });
+        
         this.markersMap.addElements(data.map_elem);
     };
 

src/views/Maps/tempData.js

@@ -42,7 +42,7 @@ export var data = {
         },
         {
             id: "0003",
-            name: "Red Car",
+            name: "Small Car 1",
             type: "moving_elem",
             icon: {icon: "fa fa-car", color: '#dd18ff'},
             status: 'enabled',
@@ -62,7 +62,7 @@ export var data = {
         },
         {
             id: "0004",
-            name: "Red Car",
+            name: "Small Car 2",
             type: "moving_elem",
             icon: {icon: "fa fa-car", color: '#028fff'},
             status: 'enabled',
@@ -82,7 +82,7 @@ export var data = {
         },
         {
             id: "0005",
-            name: "Red Car",
+            name: "Small Car 3",
             type: "moving_elem",
             icon: {icon: "fa fa-car", color: '#ff9902'},
             status: 'enabled',
@@ -102,7 +102,7 @@ export var data = {
         },
         {
             id: "0006",
-            name: "Red Car",
+            name: "Small Car 4",
             type: "moving_elem",
             icon: {icon: "fa fa-car", color: '#2dda34'},
             status: 'enabled',
@@ -124,7 +124,7 @@ export var data = {
         ////////// heat 
         {
             id: "0101",
-            name: "High Temperature",
+            name: "Temperature 1",
             type: "fixed_elem",
             icon: {icon: "fa fa-thermometer-empty", color: 'red'},
             status: 'enabled',
@@ -137,7 +137,7 @@ export var data = {
         },
         {
             id: "0102",
-            name: "Low Temperature",
+            name: "Temperature 2",
             type: "fixed_elem",
             icon: {icon: "fa fa-thermometer-empty", color: 'green'},
             status: 'enabled',
@@ -150,7 +150,7 @@ export var data = {
         },
         {
             id: "0103",
-            name: "Low Temperature",
+            name: "Temperature 3",
             type: "fixed_elem",
             icon: {icon: "fa fa-thermometer-empty", color: '#f9e10e'},
             status: 'enabled',
@@ -163,7 +163,7 @@ export var data = {
         },
         {
             id: "0104",
-            name: "Low Temperature",
+            name: "Temperature 4",
             type: "fixed_elem",
             icon: {icon: "fa fa-thermometer-empty", color: 'green'},
             status: 'enabled',
@@ -176,7 +176,7 @@ export var data = {
         },
         {
             id: "0105",
-            name: "Low Temperature",
+            name: "Temperature 5",
             type: "fixed_elem",
             icon: {icon: "fa fa-thermometer-empty", color: '#e4145b'},
             status: 'enabled',