track matching

src/components/LeafletMap/LElement.js

@@ -1,6 +1,7 @@
 import L from 'leaflet';
-import { streetView, fontAwesomeIcon } from './Utils';
+import { streetView, fontAwesomeIcon, getDirections } from './Utils';
 import {t} from './languages';
+import {direction} from './demo-direction';
 
 class LElement {
     constructor(data, parent){
@@ -122,17 +123,55 @@ class LElement {
         }
 
         if(this._data.data.length) {
+            console.log(this._data.name)
+            var _this = this;
             let _lns = [];
             for(var i = 0; i < this._data.data.length; i++){
                 let _ln = this._data.data[i].cord;
-                _lns.push(_ln.split(','));
+                _ln = _ln.split(',');
+                _lns.push({lat: _ln[0], lng: _ln[1]});
             }
-            this._track = L.polyline(_lns);
 
-            if(this._trackStatus) this._track.addTo(this._parent.map);
+            getDirections({ coordinates: _lns}, function(res){
+                var json = JSON.parse(res);
+                if(json.code != "Ok") return;
+                _this.drawTracks(json);
+            });
+            
         }
     }
 
+    drawTracks(geoJson){
+        this._geoTracks = geoJson;
+        
+        let coords = this._geoTracks.routes[0].geometry.coordinates;
+        var points = [];
+        for(var i = 0; i< coords.length; i++){
+            var point = coords[i];
+            points.push([point[1], point[0]]);
+        }
+        // var color = "#" + Math.floor(Math.random()*16777215).toString(16);
+        this._track = L.polyline(points, {color: this.getColor()});
+        if(this._trackStatus) this._track.addTo(this._parent.map);
+
+
+        // let legs = this._geoTracks.routes[0].legs;
+        // for(var i=0; i< legs.length; i++){
+        //     let steps = legs[i].steps;
+        //     var points = [];            
+        //     for(var j = 0; j < steps.length; j++){
+        //         let intersec = steps[j].intersections;
+        //         for(var k = 0; k < intersec.length; k++){
+        //             var point = intersec[k].location;
+        //             points.push([point[1], point[0]]);
+        //         }
+        //     }
+        //     console.log(points);
+        //     var color = "#" + Math.floor(Math.random()*16777215).toString(16);
+        //     var _track = L.polyline(points, {color: color}).addTo(this._parent.map);
+        // }
+    }
+
     getProperties(){
         return this._data.prop;
     }

src/components/LeafletMap/LMap.js

@@ -7,7 +7,6 @@ import {t, setLanguage} from './languages';
 import maps from './maps.js';
 import lmapSidebar from './sidebar';
 import createElement from './LElement';
-import { getDirections } from './Utils';
 
 // import {geojson} from './example_data';
 // import { demoTracks, blueMountain } from './demo-tracks';
@@ -185,7 +184,8 @@ export class LMap {
     getAllZones(){
         return this.zones;
     }
-    
+    // ___________________________________________________________
+
     addPrintControl(){
         L.easyPrint({
             filename: 'map',

src/components/LeafletMap/Utils.js

@@ -26,13 +26,48 @@ export function getDirections(data, callback){
     let profiles = ['driving-traffic', 'driving', 'walking', 'cycling'];
     var profile = data.profile && profiles.includes(data.profile) ? data.profile : 'driving';
     
-    var start = data.coordinates.start;
-    var end = data.coordinates.end;
-    if(!start || !end) return;
+    var coors = '';
+    if(data.coordinates && data.coordinates.length){
+        for(var i = 0; i < data.coordinates.length; i++){
+            let point = data.coordinates[i];
+            if(coors.length) coors += ';';
+            coors += point.lng + ',' + point.lat;
+        }
+    }
+
+    let url = 'https://api.mapbox.com/directions/v5/mapbox/' + profile + '/' + coors;
+    url += '?geometries=geojson&overview=full&alternatives=true&steps=true'
+    url += '&access_token=' + mapbox_token;
+
+    var HttpRequest = new XMLHttpRequest();
+    HttpRequest.onreadystatechange = function() { 
+        if (HttpRequest.readyState == 4 && HttpRequest.status == 200)
+            callback(HttpRequest.responseText);
+    }
 
+    HttpRequest.open( "GET", url, true );            
+    HttpRequest.send( null );
+}
+
+export function getMatchs(data, callback){
+    if(!data) return;
+    if(!data.coordinates) return;
+
+    let profiles = ['driving-traffic', 'driving', 'walking', 'cycling'];
+    var profile = data.profile && profiles.includes(data.profile) ? data.profile : 'driving';
+    
+    var coors = '';
+    if(data.coordinates && data.coordinates.length){
+        for(var i = 0; i < data.coordinates.length; i++){
+            let point = data.coordinates[i];
+            if(coors.length) coors += ';';
+            coors += point.lng + ',' + point.lat;
+        }
+    }
 
-    let url = 'https://api.mapbox.com/directions/v5/mapbox/' + profile + '/' + start.lat + ',' + start.lng + ';' + end.lat + ',' + end.lng;
-    url += '?overview=false&alternatives=true&steps=true&access_token=' + mapbox_token;
+    let url = 'https://api.mapbox.com/matching/v5/mapbox/' + profile + '/' + coors;
+    url += '?overview=full&alternatives=true&steps=true'
+    url += '&access_token=' + mapbox_token;
 
     var HttpRequest = new XMLHttpRequest();
     HttpRequest.onreadystatechange = function() { 

src/components/LeafletMap/demo-direction.js

@@ -0,0 +1,872 @@
+export const direction = {
+    "routes": [
+      {
+        "weight_name": "routability",
+        "legs": [
+          {
+            "summary": "",
+            "steps": [
+              {
+                "intersections": [
+                  {
+                    "bearings": [
+                      187
+                    ],
+                    "location": [
+                      46.667412,
+                      6.677662
+                    ],
+                    "entry": [
+                      true
+                    ],
+                    "geometry_index": 0,
+                    "out": 0
+                  },
+                  {
+                    "entry": [
+                      false,
+                      true
+                    ],
+                    "out": 1,
+                    "location": [
+                      46.666161,
+                      6.667652
+                    ],
+                    "geometry_index": 1,
+                    "in": 0,
+                    "bearings": [
+                      7,
+                      166
+                    ],
+                    "duration": 2.25
+                  }
+                ],
+                "name": "",
+                "distance": 1357.264,
+                "maneuver": {
+                  "bearing_after": 187,
+                  "type": "depart",
+                  "bearing_before": 0,
+                  "location": [
+                    46.667412,
+                    6.677662
+                  ],
+                  "instruction": "Head south"
+                },
+                "weight": 2144.469,
+                "geometry": "kfwg@ivy{Gp}@xFvKcB",
+                "duration": 2144.469,
+                "mode": "driving",
+                "driving_side": "right"
+              },
+              {
+                "intersections": [
+                  {
+                    "entry": [
+                      true,
+                      true,
+                      true,
+                      false
+                    ],
+                    "out": 0,
+                    "location": [
+                      46.666668,
+                      6.665615
+                    ],
+                    "geometry_index": 2,
+                    "in": 3,
+                    "bearings": [
+                      94,
+                      165,
+                      269,
+                      346
+                    ],
+                    "duration": 10
+                  },
+                  {
+                    "entry": [
+                      true,
+                      true,
+                      true,
+                      false
+                    ],
+                    "out": 1,
+                    "location": [
+                      46.6922,
+                      6.663966
+                    ],
+                    "geometry_index": 3,
+                    "in": 3,
+                    "bearings": [
+                      1,
+                      94,
+                      180,
+                      274
+                    ],
+                    "duration": 6
+                  }
+                ],
+                "name": "",
+                "distance": 7749,
+                "maneuver": {
+                  "type": "turn",
+                  "location": [
+                    46.666668,
+                    6.665615
+                  ],
+                  "bearing_before": 166,
+                  "modifier": "left",
+                  "bearing_after": 94,
+                  "instruction": "Turn left"
+                },
+                "weight": 4001.2,
+                "geometry": "a{tg@sqy{GhIq~C|PotG",
+                "duration": 4001.2,
+                "mode": "driving",
+                "driving_side": "right"
+              },
+              {
+                "intersections": [
+                  {
+                    "entry": [
+                      true,
+                      false,
+                      true
+                    ],
+                    "out": 2,
+                    "location": [
+                      46.736599,
+                      6.661098
+                    ],
+                    "geometry_index": 4,
+                    "in": 1,
+                    "bearings": [
+                      180,
+                      274,
+                      355
+                    ],
+                    "duration": 10
+                  },
+                  {
+                    "entry": [
+                      true,
+                      true,
+                      false,
+                      true
+                    ],
+                    "out": 0,
+                    "location": [
+                      46.736366,
+                      6.695499
+                    ],
+                    "geometry_index": 7,
+                    "in": 2,
+                    "bearings": [
+                      0,
+                      100,
+                      180,
+                      280
+                    ],
+                    "duration": 6
+                  }
+                ],
+                "name": "",
+                "distance": 8872.001,
+                "maneuver": {
+                  "type": "turn",
+                  "location": [
+                    46.736599,
+                    6.661098
+                  ],
+                  "bearing_before": 94,
+                  "modifier": "left",
+                  "bearing_after": 355,
+                  "instruction": "Turn left"
+                },
+                "weight": 4578.743,
+                "geometry": "y~sg@ufg|Gae@|AqiAo@keB?mV?mbBgI}}@?gbAm@g\\}A",
+                "duration": 4578.743,
+                "mode": "driving",
+                "driving_side": "right"
+              },
+              {
+                "intersections": [
+                  {
+                    "bearings": [
+                      186
+                    ],
+                    "location": [
+                      46.738705,
+                      6.740664
+                    ],
+                    "entry": [
+                      true
+                    ],
+                    "geometry_index": 12,
+                    "in": 0
+                  }
+                ],
+                "name": "",
+                "distance": 0,
+                "maneuver": {
+                  "bearing_after": 0,
+                  "type": "arrive",
+                  "bearing_before": 6,
+                  "location": [
+                    46.738705,
+                    6.740664
+                  ],
+                  "instruction": "You have arrived at your 1st destination"
+                },
+                "weight": 0,
+                "geometry": "cpch@{sg|G??",
+                "duration": 0,
+                "mode": "driving",
+                "driving_side": "right"
+              }
+            ],
+            "distance": 17978.266,
+            "duration": 10724.412,
+            "weight": 10724.412
+          },
+          {
+            "summary": "",
+            "steps": [
+              {
+                "intersections": [
+                  {
+                    "bearings": [
+                      186
+                    ],
+                    "location": [
+                      46.738705,
+                      6.740664
+                    ],
+                    "entry": [
+                      true
+                    ],
+                    "geometry_index": 0,
+                    "out": 0
+                  },
+                  {
+                    "entry": [
+                      false,
+                      true
+                    ],
+                    "out": 1,
+                    "location": [
+                      46.738705,
+                      6.740665
+                    ],
+                    "geometry_index": 1,
+                    "in": 0,
+                    "bearings": [
+                      6,
+                      186
+                    ],
+                    "duration": 15
+                  }
+                ],
+                "name": "",
+                "distance": 5041,
+                "maneuver": {
+                  "bearing_after": 186,
+                  "type": "depart",
+                  "bearing_before": 0,
+                  "location": [
+                    46.738705,
+                    6.740664
+                  ],
+                  "instruction": "Head south"
+                },
+                "weight": 2607,
+                "geometry": "cpch@{sg|G??f\\|AfbAl@|}@?lbBfIlV?",
+                "duration": 2607,
+                "mode": "driving",
+                "driving_side": "right"
+              },
+              {
+                "intersections": [
+                  {
+                    "entry": [
+                      false,
+                      true,
+                      true,
+                      true
+                    ],
+                    "out": 1,
+                    "location": [
+                      46.736366,
+                      6.695499
+                    ],
+                    "geometry_index": 6,
+                    "in": 0,
+                    "bearings": [
+                      0,
+                      100,
+                      180,
+                      280
+                    ],
+                    "duration": 10
+                  },
+                  {
+                    "entry": [
+                      true,
+                      true,
+                      true,
+                      false
+                    ],
+                    "out": 1,
+                    "location": [
+                      46.782009,
+                      6.687314
+                    ],
+                    "geometry_index": 8,
+                    "in": 3,
+                    "bearings": [
+                      8,
+                      101,
+                      189,
+                      281
+                    ],
+                    "duration": 6
+                  }
+                ],
+                "name": "",
+                "distance": 10288.082,
+                "maneuver": {
+                  "type": "turn",
+                  "location": [
+                    46.736366,
+                    6.695499
+                  ],
+                  "bearing_before": 180,
+                  "modifier": "left",
+                  "bearing_after": 100,
+                  "instruction": "Turn left"
+                },
+                "weight": 5307.014,
+                "geometry": "yuzg@geg|G~QsoBb_@skDjt@w}G",
+                "duration": 5307.014,
+                "mode": "driving",
+                "driving_side": "right"
+              },
+              {
+                "intersections": [
+                  {
+                    "bearings": [
+                      281
+                    ],
+                    "location": [
+                      46.827881,
+                      6.678773
+                    ],
+                    "entry": [
+                      true
+                    ],
+                    "geometry_index": 9,
+                    "in": 0
+                  }
+                ],
+                "name": "",
+                "distance": 0,
+                "maneuver": {
+                  "type": "arrive",
+                  "location": [
+                    46.827881,
+                    6.678773
+                  ],
+                  "bearing_before": 101,
+                  "modifier": "left",
+                  "bearing_after": 0,
+                  "instruction": "You have arrived at your 2nd destination, on the left"
+                },
+                "weight": 0,
+                "geometry": "imwg@gay|G??",
+                "duration": 0,
+                "mode": "driving",
+                "driving_side": "right"
+              }
+            ],
+            "distance": 15329.082,
+            "duration": 7914.015,
+            "weight": 7914.015
+          },
+          {
+            "summary": "",
+            "steps": [
+              {
+                "intersections": [
+                  {
+                    "bearings": [
+                      101
+                    ],
+                    "location": [
+                      46.827881,
+                      6.678773
+                    ],
+                    "entry": [
+                      true
+                    ],
+                    "geometry_index": 0,
+                    "out": 0
+                  }
+                ],
+                "name": "",
+                "distance": 498.918,
+                "maneuver": {
+                  "bearing_after": 101,
+                  "type": "depart",
+                  "bearing_before": 0,
+                  "location": [
+                    46.827881,
+                    6.678773
+                  ],
+                  "instruction": "Head east"
+                },
+                "weight": 256.586,
+                "geometry": "imwg@gay|GdDuZ",
+                "duration": 256.586,
+                "mode": "driving",
+                "driving_side": "right"
+              },
+              {
+                "intersections": [
+                  {
+                    "entry": [
+                      true,
+                      true,
+                      false
+                    ],
+                    "out": 1,
+                    "location": [
+                      46.832314,
+                      6.677947
+                    ],
+                    "geometry_index": 1,
+                    "in": 2,
+                    "bearings": [
+                      1,
+                      178,
+                      281
+                    ],
+                    "duration": 3
+                  }
+                ],
+                "name": "",
+                "distance": 7614,
+                "maneuver": {
+                  "type": "turn",
+                  "location": [
+                    46.832314,
+                    6.677947
+                  ],
+                  "bearing_before": 101,
+                  "modifier": "right",
+                  "bearing_after": 178,
+                  "instruction": "Turn right"
+                },
+                "weight": 3918.772,
+                "geometry": "chwg@}|y|GheBw@jnA?xtFqA",
+                "duration": 3918.772,
+                "mode": "driving",
+                "driving_side": "right"
+              },
+              {
+                "intersections": [
+                  {
+                    "entry": [
+                      false,
+                      true,
+                      true
+                    ],
+                    "out": 1,
+                    "location": [
+                      46.833004,
+                      6.60955
+                    ],
+                    "geometry_index": 4,
+                    "in": 0,
+                    "bearings": [
+                      0,
+                      118,
+                      180
+                    ],
+                    "duration": 10
+                  },
+                  {
+                    "entry": [
+                      true,
+                      true,
+                      false
+                    ],
+                    "out": 0,
+                    "location": [
+                      46.866028,
+                      6.585423
+                    ],
+                    "geometry_index": 11,
+                    "in": 2,
+                    "bearings": [
+                      133,
+                      218,
+                      305
+                    ],
+                    "duration": 1.5
+                  },
+                  {
+                    "entry": [
+                      true,
+                      true,
+                      true,
+                      false
+                    ],
+                    "out": 1,
+                    "location": [
+                      46.897144,
+                      6.528586
+                    ],
+                    "geometry_index": 17,
+                    "in": 3,
+                    "bearings": [
+                      90,
+                      129,
+                      270,
+                      322
+                    ],
+                    "duration": 6
+                  }
+                ],
+                "name": "",
+                "distance": 13696,
+                "maneuver": {
+                  "type": "turn",
+                  "location": [
+                    46.833004,
+                    6.60955
+                  ],
+                  "bearing_before": 180,
+                  "modifier": "left",
+                  "bearing_after": 118,
+                  "instruction": "Turn left"
+                },
+                "weight": 7061.158,
+                "geometry": "s|ig@gaz|GnJsTlNgVfTaZ||@ok@vFkPxD}_@`Zsf@vc@uf@rg@aZfs@oNfpA_\\|yAsg@lt@si@``@sg@~Nqg@",
+                "duration": 7061.158,
+                "mode": "driving",
+                "driving_side": "right"
+              },
+              {
+                "intersections": [
+                  {
+                    "entry": [
+                      true,
+                      true,
+                      false,
+                      true
+                    ],
+                    "out": 1,
+                    "location": [
+                      46.910133,
+                      6.520737
+                    ],
+                    "geometry_index": 19,
+                    "in": 2,
+                    "bearings": [
+                      113,
+                      142,
+                      292,
+                      322
+                    ],
+                    "duration": 2.25
+                  }
+                ],
+                "name": "",
+                "distance": 5730,
+                "maneuver": {
+                  "type": "turn",
+                  "location": [
+                    46.910133,
+                    6.520737
+                  ],
+                  "bearing_before": 112,
+                  "modifier": "slight right",
+                  "bearing_after": 142,
+                  "instruction": "Make a slight right"
+                },
+                "weight": 2949.107,
+                "geometry": "qqxf@ici}G`vAsdApo@kq@vg@sb@vv@_g@bBeD|AwAnCXrBO",
+                "duration": 2949.107,
+                "mode": "driving",
+                "driving_side": "right"
+              },
+              {
+                "intersections": [
+                  {
+                    "entry": [
+                      true,
+                      true,
+                      false
+                    ],
+                    "out": 0,
+                    "location": [
+                      46.942657,
+                      6.481326
+                    ],
+                    "geometry_index": 27,
+                    "in": 2,
+                    "bearings": [
+                      109,
+                      293,
+                      352
+                    ],
+                    "duration": 10
+                  }
+                ],
+                "name": "",
+                "distance": 289,
+                "maneuver": {
+                  "type": "turn",
+                  "location": [
+                    46.942657,
+                    6.481326
+                  ],
+                  "bearing_before": 172,
+                  "modifier": "left",
+                  "bearing_after": 109,
+                  "instruction": "Turn left"
+                },
+                "weight": 158.629,
+                "geometry": "g{pf@qno}G`@aBVy@jAk@b@_@|@uA`@c@~@A",
+                "duration": 158.629,
+                "mode": "driving",
+                "driving_side": "right"
+              },
+              {
+                "intersections": [
+                  {
+                    "entry": [
+                      true,
+                      true,
+                      false
+                    ],
+                    "out": 0,
+                    "location": [
+                      46.944439,
+                      6.479677
+                    ],
+                    "geometry_index": 34,
+                    "in": 2,
+                    "bearings": [
+                      98,
+                      277,
+                      357
+                    ],
+                    "duration": 17.5
+                  },
+                  {
+                    "bearings": [
+                      99,
+                      196,
+                      278
+                    ],
+                    "entry": [
+                      true,
+                      true,
+                      false
+                    ],
+                    "location": [
+                      46.944908,
+                      6.479609
+                    ],
+                    "geometry_index": 35,
+                    "in": 2,
+                    "out": 0
+                  },
+                  {
+                    "bearings": [
+                      98,
+                      160,
+                      279
+                    ],
+                    "entry": [
+                      true,
+                      true,
+                      false
+                    ],
+                    "location": [
+                      46.945625,
+                      6.479497
+                    ],
+                    "geometry_index": 36,
+                    "in": 2,
+                    "out": 0
+                  }
+                ],
+                "name": "",
+                "distance": 211,
+                "maneuver": {
+                  "type": "turn",
+                  "location": [
+                    46.944439,
+                    6.479677
+                  ],
+                  "bearing_before": 177,
+                  "modifier": "left",
+                  "bearing_after": 98,
+                  "instruction": "Turn left"
+                },
+                "weight": 38.03,
+                "geometry": "}ppf@uyo}GL}AToCPmC",
+                "duration": 38.03,
+                "mode": "driving",
+                "driving_side": "right"
+              },
+              {
+                "intersections": [
+                  {
+                    "entry": [
+                      true,
+                      true,
+                      false
+                    ],
+                    "out": 0,
+                    "location": [
+                      46.946331,
+                      6.479404
+                    ],
+                    "geometry_index": 37,
+                    "in": 2,
+                    "bearings": [
+                      5,
+                      99,
+                      278
+                    ],
+                    "duration": 10
+                  },
+                  {
+                    "entry": [
+                      true,
+                      true,
+                      false,
+                      true
+                    ],
+                    "out": 0,
+                    "location": [
+                      46.934006,
+                      6.528181
+                    ],
+                    "geometry_index": 55,
+                    "in": 2,
+                    "bearings": [
+                      0,
+                      89,
+                      180,
+                      270
+                    ],
+                    "duration": 6
+                  }
+                ],
+                "name": "",
+                "distance": 11666.348,
+                "maneuver": {
+                  "type": "turn",
+                  "location": [
+                    46.946331,
+                    6.479404
+                  ],
+                  "bearing_before": 98,
+                  "modifier": "left",
+                  "bearing_after": 5,
+                  "instruction": "Turn left"
+                },
+                "weight": 6015.837,
+                "geometry": "gopf@qep}G{@CcH{@{@x@Wj@Tn@d@`@OzBoB|FeBhCwD`C{AZmFdCwHTsHlC}L}Am{Av[whBbPke@?acB?anChVgo@b^gNlM",
+                "duration": 6015.837,
+                "mode": "driving",
+                "driving_side": "right"
+              },
+              {
+                "intersections": [
+                  {
+                    "bearings": [
+                      137
+                    ],
+                    "location": [
+                      46.922989,
+                      6.577245
+                    ],
+                    "entry": [
+                      true
+                    ],
+                    "geometry_index": 59,
+                    "in": 0
+                  }
+                ],
+                "name": "",
+                "distance": 0,
+                "maneuver": {
+                  "type": "arrive",
+                  "location": [
+                    46.922989,
+                    6.577245
+                  ],
+                  "bearing_before": 317,
+                  "modifier": "right",
+                  "bearing_after": 0,
+                  "instruction": "You have arrived at your destination, on the right"
+                },
+                "weight": 0,
+                "geometry": "wrcg@ssk}G??",
+                "duration": 0,
+                "mode": "driving",
+                "driving_side": "right"
+              }
+            ],
+            "distance": 39705.266,
+            "duration": 20398.119,
+            "weight": 20398.119
+          }
+        ],
+        "distance": 73012.609,
+        "duration": 39036.546,
+        "weight": 39036.547
+      }
+    ],
+    "waypoints": [
+      {
+        "distance": 4326.634,
+        "name": "",
+        "location": [
+          46.667412,
+          6.677662
+        ]
+      },
+      {
+        "distance": 4784.942,
+        "name": "",
+        "location": [
+          46.738705,
+          6.740665
+        ]
+      },
+      {
+        "distance": 417.021,
+        "name": "",
+        "location": [
+          46.827881,
+          6.678773
+        ]
+      },
+      {
+        "distance": 847.53,
+        "name": "",
+        "location": [
+          46.922989,
+          6.577246
+        ]
+      }
+    ],
+    "code": "Ok",
+    "uuid": "-WU5SF7Vlvhm_xxoUWUvhFZed8cb6e3x0g0VOsbVmKGxERscFovv2w=="
+  }

src/views/LMaps/mapfunctions.js

@@ -27,77 +27,77 @@ export default class MapFunctions extends React.Component{
         ////********* function for map *///////////
         this.positionMap.addElements(data.map_elem);
 
-        var _allEl = this.positionMap.getAllElements();
-        console.log('get all elements', _allEl);
+        // var _allEl = this.positionMap.getAllElements();
+        // console.log('get all elements', _allEl);
         
-        var _oneEl = this.positionMap.getElementByID("0001");
-        console.log("get one element", _oneEl);
+        // var _oneEl = this.positionMap.getElementByID("0001");
+        // console.log("get one element", _oneEl);
 
-        // this.positionMap.removeElement("0001");
-        // this.positionMap.removeAllElements();
+        // // this.positionMap.removeElement("0001");
+        // // this.positionMap.removeAllElements();
 
-        this.positionMap.drawZone('Zone', [
-            [46.0295228,5.9216256],[47.0295228,5.9216256],[47.0295228,8.9216256],[46.0295228,8.9216256]
-        ]);
+        // this.positionMap.drawZone('Zone', [
+        //     [46.0295228,5.9216256],[47.0295228,5.9216256],[47.0295228,8.9216256],[46.0295228,8.9216256]
+        // ]);
 
-        var _zones = this.positionMap.getAllZones();
-        console.log('zones', _zones);
+        // var _zones = this.positionMap.getAllZones();
+        // console.log('zones', _zones);
 
-        var _zone = this.positionMap.getZoneByName('Zone');
-        console.log('zone', _zone);
+        // var _zone = this.positionMap.getZoneByName('Zone');
+        // console.log('zone', _zone);
 
-        ///////******* functions for Element *****////////
-        var curStatus = _oneEl.getStatus();
-        console.log('element status', curStatus);
+        // ///////******* functions for Element *****////////
+        // var curStatus = _oneEl.getStatus();
+        // console.log('element status', curStatus);
 
-        // _oneEl.setStatus('disabled');
+        // // _oneEl.setStatus('disabled');
 
-        var curPos = _oneEl.getPosition();
-        console.log('current element position', curPos);
+        // var curPos = _oneEl.getPosition();
+        // console.log('current element position', curPos);
 
-        _oneEl.setPosition("50.234234,14.323424");
-        _oneEl.setPosition({lat: 50.234234, lng: 14.323424});
+        // _oneEl.setPosition("50.234234,14.323424");
+        // _oneEl.setPosition({lat: 50.234234, lng: 14.323424});
 
-        var curIcon = _oneEl.getIcon();
-        console.log('current element icon', curIcon);
+        // var curIcon = _oneEl.getIcon();
+        // console.log('current element icon', curIcon);
 
-        _oneEl.setIcon({icon: 'fa fa-car', color: 'black'});
+        // _oneEl.setIcon({icon: 'fa fa-car', color: 'black'});
         
-        var curColor = _oneEl.getColor();
-        console.log('current element icon', curColor);
+        // var curColor = _oneEl.getColor();
+        // console.log('current element icon', curColor);
 
-        _oneEl.setColor("#0014ff");
+        // _oneEl.setColor("#0014ff");
 
-        _oneEl.showTrack();
-        _oneEl.hideTrack();
+        // _oneEl.showTrack();
+        // _oneEl.hideTrack();
         
-        var curTrack = _oneEl.getTrack();
-        console.log("current element track", curTrack);
+        // var curTrack = _oneEl.getTrack();
+        // console.log("current element track", curTrack);
 
-        _oneEl.setTrack([
-            {cord: '50.073658, 14.418540', timestamp: 2342342444},
-            {cord: '50.173658, 14.518540', timestamp: 2342342444},
-            {cord: '50.273658, 14.618540', timestamp: 2342342444},
-            {cord: '50.373658, 14.718540', timestamp: 2342342444},
-            {cord: '50.473658, 14.818540', timestamp: 2342342444},
-            {cord: '50.573658, 14.918540', timestamp: 2342342444},
-            {cord: '50.673658, 14.918540', timestamp: 2342342444},
-            {cord: '50.773658, 14.818540', timestamp: 2342342444}
-        ]);
+        // _oneEl.setTrack([
+        //     {cord: '50.073658, 14.418540', timestamp: 2342342444},
+        //     {cord: '50.173658, 14.518540', timestamp: 2342342444},
+        //     {cord: '50.273658, 14.618540', timestamp: 2342342444},
+        //     {cord: '50.373658, 14.718540', timestamp: 2342342444},
+        //     {cord: '50.473658, 14.818540', timestamp: 2342342444},
+        //     {cord: '50.573658, 14.918540', timestamp: 2342342444},
+        //     {cord: '50.673658, 14.918540', timestamp: 2342342444},
+        //     {cord: '50.773658, 14.818540', timestamp: 2342342444}
+        // ]);
 
-        _oneEl.addTrack({cord: '50.773658, 14.818540', timestamp: 2342342444});
+        // _oneEl.addTrack({cord: '50.773658, 14.818540', timestamp: 2342342444});
 
-        var curProp = _oneEl.getProperties();
-        console.log('current element Properties', curProp);
+        // var curProp = _oneEl.getProperties();
+        // console.log('current element Properties', curProp);
 
-        _oneEl.setProperties({});
-        _oneEl.addProperty({});
+        // _oneEl.setProperties({});
+        // _oneEl.addProperty({});
 
 
-        var allData = _oneEl.getAllData();
-        console.log('current element data', allData);
+        // var allData = _oneEl.getAllData();
+        // console.log('current element data', allData);
 
-        _oneEl.refreshElement();
+        // _oneEl.refreshElement();
     };
 
     render(){

src/views/LMaps/tempData.js

@@ -1,65 +1,65 @@
 export var data = {
     "map_elem": [
-        {
-            id: "0001",
-            name: "Blue Car",
-            type: "moving_elem",
-            icon: {icon: "fa fa-car", color: 'blue'},
-            status: 'enabled',
-            cord: '50.073658, 14.418540',
-            prop: {
-                is_moving: true,
-                tags: ['is_car', 'is_beatiful', 'has_wheels']
-            },
-            data: [
-                {cord: '50.073658, 14.418540', timestamp: 2342342444},
-                {cord: '50.173658, 14.518540', timestamp: 2342342444},
-                {cord: '50.273658, 14.618540', timestamp: 2342342444},
-                {cord: '50.373658, 14.718540', timestamp: 2342342444},
-                {cord: '50.473658, 14.818540', timestamp: 2342342444},
-                {cord: '50.573658, 14.918540', timestamp: 2342342444},
-                {cord: '50.673658, 14.918540', timestamp: 2342342444},
-                {cord: '50.773658, 14.818540', timestamp: 2342342444}
-            ]
-        },
-        {
-            id: "0002",
-            name: "Red Car",
-            type: "moving_elem",
-            icon: {icon: "fa fa-car", color: 'red'},
-            status: 'enabled',
-            cord: '49.7580791,13.3540124',
-            prop: {
-                is_moving: true,
-                tags: ['is_car', 'is_beatiful', 'has_wheels']
-            },
-            data: [
-                {cord: '49.7580791,13.3540124', timestamp: 2342342444},
-                {cord: '49.6580791,13.3540124', timestamp: 2342342444},
-                {cord: '49.6580791,13.2540124', timestamp: 2342342444},
-                {cord: '49.5580791,13.2540124', timestamp: 2342342444},
-                {cord: '49.5580791,13.1540124', timestamp: 2342342444},
-                {cord: '49.4580791,13.1540124', timestamp: 2342342444}
-            ]
-        },
+        // {
+        //     id: "0001",
+        //     name: "Blue Car",
+        //     type: "moving_elem",
+        //     icon: {icon: "fa fa-car", color: 'blue'},
+        //     status: 'enabled',
+        //     cord: '50.073658, 14.418540',
+        //     prop: {
+        //         is_moving: true,
+        //         tags: ['is_car', 'is_beatiful', 'has_wheels']
+        //     },
+        //     data: [
+        //         {cord: '50.073658, 14.418540', timestamp: 2342342444},
+        //         {cord: '50.173658, 14.518540', timestamp: 2342342444},
+        //         {cord: '50.273658, 14.618540', timestamp: 2342342444},
+        //         {cord: '50.373658, 14.718540', timestamp: 2342342444},
+        //         {cord: '50.473658, 14.818540', timestamp: 2342342444},
+        //         {cord: '50.573658, 14.918540', timestamp: 2342342444},
+        //         {cord: '50.673658, 14.918540', timestamp: 2342342444},
+        //         {cord: '50.773658, 14.818540', timestamp: 2342342444}
+        //     ]
+        // },
+        // {
+        //     id: "0002",
+        //     name: "Red Car",
+        //     type: "moving_elem",
+        //     icon: {icon: "fa fa-car", color: 'red'},
+        //     status: 'enabled',
+        //     cord: '49.7580791,13.3540124',
+        //     prop: {
+        //         is_moving: true,
+        //         tags: ['is_car', 'is_beatiful', 'has_wheels']
+        //     },
+        //     data: [
+        //         {cord: '49.7580791,13.3540124', timestamp: 2342342444},
+        //         {cord: '49.6580791,13.3540124', timestamp: 2342342444},
+        //         {cord: '49.6580791,13.2540124', timestamp: 2342342444},
+        //         {cord: '49.5580791,13.2540124', timestamp: 2342342444},
+        //         {cord: '49.5580791,13.1540124', timestamp: 2342342444},
+        //         {cord: '49.4580791,13.1540124', timestamp: 2342342444}
+        //     ]
+        // },
         {
             id: "0003",
             name: "Small Car 1",
             type: "moving_elem",
             icon: {icon: "fa fa-car", color: '#dd18ff'},
             status: 'enabled',
-            cord: '46.9547232,7.3598507',
+            cord: '46.7650062,8.7738806',
             prop: {
                 is_moving: true,
                 tags: ['is_car', 'is_beatiful', 'has_wheels']
             },
             data: [
-                {cord: '46.9547232,7.3598507', timestamp: 2342342444},
-                {cord: '46.9547232,7.4598507', timestamp: 2342342444},
-                {cord: '46.8547232,7.4598507', timestamp: 2342342444},
-                {cord: '46.8547232,7.5598507', timestamp: 2342342444},
-                {cord: '46.7547232,7.5598507', timestamp: 2342342444},
-                {cord: '46.7547232,7.6598507', timestamp: 2342342444}
+                {cord: '46.7650062,8.7738806', timestamp: 2342342444},
+                {cord: '47.555634,9.615231', timestamp: 2342342444},
+                // {cord: '46.8547232,7.4598507', timestamp: 2342342444},
+                // {cord: '46.8547232,7.5598507', timestamp: 2342342444},
+                // {cord: '46.7547232,7.5598507', timestamp: 2342342444},
+                // {cord: '46.7547232,7.6598507', timestamp: 2342342444}
             ]
         },
         {
@@ -75,11 +75,11 @@ export var data = {
             },
             data: [
                 {cord: '47.5546492,7.5594406', timestamp: 2342342444},
-                {cord: '47.6546492,7.5594406', timestamp: 2342342444},
-                {cord: '47.6546492,7.6594406', timestamp: 2342342444},
-                {cord: '47.4546492,7.6594406', timestamp: 2342342444},
-                {cord: '47.4546492,7.7594406', timestamp: 2342342444},
-                {cord: '47.3546492,7.7594406', timestamp: 2342342444}
+                {cord: '46.6546492,9.5594406', timestamp: 2342342444},
+                // {cord: '47.6546492,7.6594406', timestamp: 2342342444},
+                // {cord: '47.4546492,7.6594406', timestamp: 2342342444},
+                // {cord: '47.4546492,7.7594406', timestamp: 2342342444},
+                // {cord: '47.3546492,7.7594406', timestamp: 2342342444}
             ]
         },
         {
@@ -95,61 +95,62 @@ export var data = {
             },
             data: [
                 {cord: '46.5285767,6.5824555', timestamp: 2342342444},
-                {cord: '46.6285767,6.6824555', timestamp: 2342342444},
-                {cord: '46.7285767,6.7824555', timestamp: 2342342444},
-                {cord: '46.8285767,6.6824555', timestamp: 2342342444},
-                {cord: '46.9285767,6.5824555', timestamp: 2342342444},
-                {cord: '46.7285767,6.4824555', timestamp: 2342342444}
-            ]
-        },
-        {
-            id: "0006",
-            name: "Small Car 4",
-            type: "moving_elem",
-            icon: {icon: "fa fa-car", color: '#2dda34'},
-            status: 'enabled',
-            cord: '46.0295228,8.9216256',
-            prop: {
-                is_moving: true,
-                tags: ['is_car', 'is_beatiful', 'has_wheels']
-            },
-            data: [
-                {cord: '46.0295228,8.9216256', timestamp: 2342342444},
-                {cord: '46.5295228,8.5216256', timestamp: 2342342444},
-                {cord: '46.7295228,8.4216256', timestamp: 2342342444},
-                {cord: '46.4295228,8.6216256', timestamp: 2342342444},
-                {cord: '46.6295228,8.4216256', timestamp: 2342342444},
-                {cord: '46.7295228,8.2216256', timestamp: 2342342444}
+                {cord: '47.9547232,7.3598507', timestamp: 2342342444},
+                // {cord: '46.6285767,6.6824555', timestamp: 2342342444},
+                // {cord: '46.7285767,6.7824555', timestamp: 2342342444},
+                // {cord: '46.8285767,6.6824555', timestamp: 2342342444},
+                // {cord: '46.9285767,6.5824555', timestamp: 2342342444},
+                // {cord: '46.7285767,6.4824555', timestamp: 2342342444}
             ]
         },
+        // {
+        //     id: "0006",
+        //     name: "Small Car 4",
+        //     type: "moving_elem",
+        //     icon: {icon: "fa fa-car", color: '#2dda34'},
+        //     status: 'enabled',
+        //     cord: '46.0295228,8.9216256',
+        //     prop: {
+        //         is_moving: true,
+        //         tags: ['is_car', 'is_beatiful', 'has_wheels']
+        //     },
+        //     data: [
+        //         {cord: '46.0295228,8.9216256', timestamp: 2342342444},
+        //         {cord: '46.5295228,8.5216256', timestamp: 2342342444},
+        //         {cord: '46.7295228,8.4216256', timestamp: 2342342444},
+        //         {cord: '46.4295228,8.6216256', timestamp: 2342342444},
+        //         {cord: '46.6295228,8.4216256', timestamp: 2342342444},
+        //         {cord: '46.7295228,8.2216256', timestamp: 2342342444}
+        //     ]
+        // },
         
         ////////// heat 
-        {
-            id: "0101",
-            name: "Temperature 1",
-            type: "fixed_elem",
-            icon: {icon: "fa fa-thermometer-empty", color: 'red'},
-            status: 'enabled',
-            cord: '49.9578316,15.8388234',
-            severity: 'critical',
-            prop: {
-                is_moving: true,
-                tags: ['is_sensor', 'is_small', 'fast_sensor']
-            }
-        },
-        {
-            id: "0102",
-            name: "Temperature 2",
-            type: "fixed_elem",
-            icon: {icon: "fa fa-thermometer-empty", color: 'green'},
-            status: 'enabled',
-            cord: '50.7704562,15.0586805',
-            severity: 'critical',
-            prop: {
-                is_moving: true,
-                tags: ['is_sensor', 'is_small', 'fast_sensor']
-            }
-        },
+        // {
+        //     id: "0101",
+        //     name: "Temperature 1",
+        //     type: "fixed_elem",
+        //     icon: {icon: "fa fa-thermometer-empty", color: 'red'},
+        //     status: 'enabled',
+        //     cord: '49.9578316,15.8388234',
+        //     severity: 'critical',
+        //     prop: {
+        //         is_moving: true,
+        //         tags: ['is_sensor', 'is_small', 'fast_sensor']
+        //     }
+        // },
+        // {
+        //     id: "0102",
+        //     name: "Temperature 2",
+        //     type: "fixed_elem",
+        //     icon: {icon: "fa fa-thermometer-empty", color: 'green'},
+        //     status: 'enabled',
+        //     cord: '50.7704562,15.0586805',
+        //     severity: 'critical',
+        //     prop: {
+        //         is_moving: true,
+        //         tags: ['is_sensor', 'is_small', 'fast_sensor']
+        //     }
+        // },
         {
             id: "0103",
             name: "Temperature 3",