temp data update

src/_nav.js

@@ -128,13 +128,13 @@ export default {
       url: '/maps',
       icon: 'icon-location-pin',
       children: [
-        // {
-        //   name: 'MapTypes',
-        //   url: '/maps/maptypes',
-        // },
         {
-          name: 'Markers',
-          url: '/maps/markers',
+          name: 'MapTypes',
+          url: '/maps/maptypes',
+        },
+        {
+          name: 'MapFunctions',
+          url: '/maps/mapfunctions',
         },
       ]
     },

src/components/LeafletMap/LMap.js

@@ -28,20 +28,23 @@ export class LMap {
             ...MapMenu
         });
 
-        this.Sidebar = lmapSidebar(id);
-        L.control.sidebar({
-            autopan: false,
-            closeButton: true,
-            container: id + "__lmap-sidebar",
-            position: 'left'
-        }).addTo(this.map);
-
-        this.createElevation();
-        
-
         this.mapType = type;
         this.options = options;
 
+        if(this.options.sidebar){
+            this.Sidebar = lmapSidebar(id);
+            L.control.sidebar({
+                autopan: false,
+                closeButton: true,
+                container: id + "__lmap-sidebar",
+                position: 'left'
+            }).addTo(this.map);
+        }
+        
+        if(this.options.elevation){
+            this.createElevation();
+        }
+
         this.mapElements = [];
         this.clusterGroup = L.markerClusterGroup();
     }
@@ -101,11 +104,10 @@ export class LMap {
             else marker.addTo(this.map);
         });
 
-        if(this.options.clustering){
+        if(this.options.clustering)
             this.map.addLayer(this.clusterGroup);
-        }
-
-        this.Sidebar.setData(elements);
+        if(this.options.sidebar)
+            this.Sidebar.setData(elements);
     }
 
     removeElement(id){

src/routes.js

@@ -36,7 +36,7 @@ const Widgets = React.lazy(() => import('./views/Widgets/Widgets'));
 const Users = React.lazy(() => import('./views/Users/Users'));
 const User = React.lazy(() => import('./views/Users/User'));
 const Maps = React.lazy(() => import('./views/Maps'));
-const Markers = React.lazy(() => import('./views/Maps/markers'));
+const MapFunctions = React.lazy(() => import('./views/Maps/mapfunctions'));
 
 // https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
 const routes = [
@@ -82,7 +82,7 @@ const routes = [
   { path: '/users', exact: true,  name: 'Users', component: Users },
   { path: '/users/:id', exact: true, name: 'User Details', component: User },
   { path: '/maps/maptypes', exact: true, name: 'Maps', component: Maps },
-  { path: '/maps/markers', exact: true, name: 'Markers', component: Markers },
+  { path: '/maps/mapfunctions', exact: true, name: 'MapFunctions', component: MapFunctions },
 ];
 
 export default routes;

src/views/Maps/actions.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Row, Col, Card, CardBody, CardHeader } from 'reactstrap';
-import { LMap, MapTypes } from '../../components/LeafletMap';
-
-import { data } from './tempData';
-
-export default class Markers extends React.Component{
-    componentDidMount(){
-        this.markersMap = new LMap('position_map', MapTypes._POSITION_, { center: [50.073658, 14.418540], zoom: 6, clustering: true});
-        this.markersMap.addLayersControl([ '_OPENSTREET_', '_OPENTOPO_', '_AERIAL_', '_TERRAIN_', '_TRAFFIC_' ],{
-            detectRetina: true,
-            maxZoom: 19,
-            maxNativeZoom: 17,
-        });
-        this.markersMap.addElements(data.map_elem);
-    };
-
-    render(){
-        
-        return (
-            <Row>
-                <Col sm="12" md="6">
-                    <Card>
-                        <CardHeader>
-                            Marker Clustering / Popup / Context Menu
-                        </CardHeader>
-                        <CardBody>
-                            <div id="position_map" style={{height: '400px'}}></div>
-                        </CardBody>
-                    </Card>
-                </Col>
-            </Row>
-        );
-    }
-}

src/views/Maps/languages.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Row, Col, Card, CardBody, CardHeader } from 'reactstrap';
-import { LMap, MapTypes } from '../../components/LeafletMap';
-
-import { data } from './tempData';
-
-export default class Markers extends React.Component{
-    componentDidMount(){
-        this.markersMap = new LMap('position_map', MapTypes._POSITION_, { center: [50.073658, 14.418540], zoom: 6, clustering: true});
-        this.markersMap.addLayersControl([ '_OPENSTREET_', '_OPENTOPO_', '_AERIAL_', '_TERRAIN_', '_TRAFFIC_' ],{
-            detectRetina: true,
-            maxZoom: 19,
-            maxNativeZoom: 17,
-        });
-        this.markersMap.addElements(data.map_elem);
-    };
-
-    render(){
-        
-        return (
-            <Row>
-                <Col sm="12" md="6">
-                    <Card>
-                        <CardHeader>
-                            Marker Clustering / Popup / Context Menu
-                        </CardHeader>
-                        <CardBody>
-                            <div id="position_map" style={{height: '400px'}}></div>
-                        </CardBody>
-                    </Card>
-                </Col>
-            </Row>
-        );
-    }
-}

src/views/Maps/markers.js → src/views/Maps/mapfunctions.js

@@ -4,9 +4,16 @@ import { LMap, MapTypes } from '../../components/LeafletMap';
 
 import { data } from './tempData';
 
-export default class Markers extends React.Component{
+export default class MapFunctions extends React.Component{
     componentDidMount(){
-        this.markersMap = new LMap('position_map', MapTypes._POSITION_, { center: [50.073658, 14.418540], zoom: 6, clustering: true});
+        this.markersMap = new LMap('position_map', MapTypes._POSITION_, { 
+            center: [46.9547232,8.8598507],
+            zoom: 8,
+            clustering: true,
+            sidebar: true,
+            elevation: true
+        });
+
         this.markersMap.addLayersControl([ '_OPENSTREET_', '_OPENTOPO_', '_AERIAL_', '_TERRAIN_', '_TRAFFIC_' ],{
             detectRetina: true,
             maxZoom: 19,

src/views/Maps/streetview.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Row, Col, Card, CardBody, CardHeader } from 'reactstrap';
-import { LMap, MapTypes } from '../../components/LeafletMap';
-
-import { data } from './tempData';
-
-export default class Markers extends React.Component{
-    componentDidMount(){
-        this.markersMap = new LMap('position_map', MapTypes._POSITION_, { center: [50.073658, 14.418540], zoom: 6, clustering: true});
-        this.markersMap.addLayersControl([ '_OPENSTREET_', '_OPENTOPO_', '_AERIAL_', '_TERRAIN_', '_TRAFFIC_' ],{
-            detectRetina: true,
-            maxZoom: 19,
-            maxNativeZoom: 17,
-        });
-        this.markersMap.addElements(data.map_elem);
-    };
-
-    render(){
-        
-        return (
-            <Row>
-                <Col sm="12" md="6">
-                    <Card>
-                        <CardHeader>
-                            Marker Clustering / Popup / Context Menu
-                        </CardHeader>
-                        <CardBody>
-                            <div id="position_map" style={{height: '400px'}}></div>
-                        </CardBody>
-                    </Card>
-                </Col>
-            </Row>
-        );
-    }
-}

src/views/Maps/tempData.js

@@ -40,10 +40,90 @@ export var data = {
                 '6': {cord: '32.434343, 43.043043', timestamp: 2342342444}
             }
         },
+        {
+            id: "0003",
+            name: "Red Car",
+            type: "moving_elem",
+            icon: {icon: "fa fa-car", color: '#dd18ff'},
+            status: 'enabled',
+            cord: '46.9547232,7.3598507',
+            prop: {
+                is_moving: true,
+                tags: ['is_car', 'is_beatiful', 'has_wheels']
+            },
+            data: {
+                '1': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '2': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '3': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '4': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '5': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '6': {cord: '32.434343, 43.043043', timestamp: 2342342444}
+            }
+        },
+        {
+            id: "0004",
+            name: "Red Car",
+            type: "moving_elem",
+            icon: {icon: "fa fa-car", color: '#028fff'},
+            status: 'enabled',
+            cord: '47.5546492,7.5594406',
+            prop: {
+                is_moving: true,
+                tags: ['is_car', 'is_beatiful', 'has_wheels']
+            },
+            data: {
+                '1': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '2': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '3': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '4': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '5': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '6': {cord: '32.434343, 43.043043', timestamp: 2342342444}
+            }
+        },
+        {
+            id: "0005",
+            name: "Red Car",
+            type: "moving_elem",
+            icon: {icon: "fa fa-car", color: '#ff9902'},
+            status: 'enabled',
+            cord: '46.5285767,6.5824555',
+            prop: {
+                is_moving: true,
+                tags: ['is_car', 'is_beatiful', 'has_wheels']
+            },
+            data: {
+                '1': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '2': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '3': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '4': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '5': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '6': {cord: '32.434343, 43.043043', timestamp: 2342342444}
+            }
+        },
+        {
+            id: "0006",
+            name: "Red Car",
+            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: {
+                '1': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '2': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '3': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '4': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '5': {cord: '32.434343, 43.043043', timestamp: 2342342444},
+                '6': {cord: '32.434343, 43.043043', timestamp: 2342342444}
+            }
+        },
         
         ////////// heat 
         {
-            id: "0003",
+            id: "0101",
             name: "High Temperature",
             type: "fixed_elem",
             icon: {icon: "fa fa-thermometer-empty", color: 'red'},
@@ -56,7 +136,7 @@ export var data = {
             }
         },
         {
-            id: "0004",
+            id: "0102",
             name: "Low Temperature",
             type: "fixed_elem",
             icon: {icon: "fa fa-thermometer-empty", color: 'green'},
@@ -67,6 +147,45 @@ export var data = {
                 is_moving: true,
                 tags: ['is_sensor', 'is_small', 'fast_sensor']
             }
+        },
+        {
+            id: "0103",
+            name: "Low Temperature",
+            type: "fixed_elem",
+            icon: {icon: "fa fa-thermometer-empty", color: '#f9e10e'},
+            status: 'enabled',
+            cord: '46.109581,8.270543',
+            severity: 'critical',
+            prop: {
+                is_moving: true,
+                tags: ['is_sensor', 'is_small', 'fast_sensor']
+            }
+        },
+        {
+            id: "0104",
+            name: "Low Temperature",
+            type: "fixed_elem",
+            icon: {icon: "fa fa-thermometer-empty", color: 'green'},
+            status: 'enabled',
+            cord: '47.3775499,8.4666756',
+            severity: 'critical',
+            prop: {
+                is_moving: true,
+                tags: ['is_sensor', 'is_small', 'fast_sensor']
+            }
+        },
+        {
+            id: "0105",
+            name: "Low Temperature",
+            type: "fixed_elem",
+            icon: {icon: "fa fa-thermometer-empty", color: '#e4145b'},
+            status: 'enabled',
+            cord: '46.7650062,9.7738806',
+            severity: 'critical',
+            prop: {
+                is_moving: true,
+                tags: ['is_sensor', 'is_small', 'fast_sensor']
+            }
         }
     ]
 }

src/views/Maps/viewmodes.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Row, Col, Card, CardBody, CardHeader } from 'reactstrap';
-import { LMap, MapTypes } from '../../components/LeafletMap';
-
-import { data } from './tempData';
-
-export default class Markers extends React.Component{
-    componentDidMount(){
-        this.markersMap = new LMap('position_map', MapTypes._POSITION_, { center: [50.073658, 14.418540], zoom: 6, clustering: true});
-        this.markersMap.addLayersControl([ '_OPENSTREET_', '_OPENTOPO_', '_AERIAL_', '_TERRAIN_', '_TRAFFIC_' ],{
-            detectRetina: true,
-            maxZoom: 19,
-            maxNativeZoom: 17,
-        });
-        this.markersMap.addElements(data.map_elem);
-    };
-
-    render(){
-        
-        return (
-            <Row>
-                <Col sm="12" md="6">
-                    <Card>
-                        <CardHeader>
-                            Marker Clustering / Popup / Context Menu
-                        </CardHeader>
-                        <CardBody>
-                            <div id="position_map" style={{height: '400px'}}></div>
-                        </CardBody>
-                    </Card>
-                </Col>
-            </Row>
-        );
-    }
-}