Replace map with OpenLayers

3 files changed, 20 insertions, 33 deletions

diff --git a/modern/.vscode/launch.json b/modern/.vscode/launch.json
index 9c243a03..8bd51ee6 100644
--- a/modern/.vscode/launch.json
+++ b/modern/.vscode/launch.json
@@ -1,15 +1,15 @@
 {
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
     {
+      "name": "Chrome",
       "type": "chrome",
       "request": "launch",
-      "name": "Launch Chrome against localhost",
       "url": "http://localhost:3000",
-      "webRoot": "${workspaceFolder}"
+      "webRoot": "${workspaceFolder}/src",
+      "sourceMapPathOverrides": {
+        "webpack:///src/*": "${webRoot}/*"
+      }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/modern/package.json b/modern/package.json
index a19f5286..79fa97d8 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -6,6 +6,8 @@
     "@material-ui/core": "^4.9.7",
     "@material-ui/icons": "^4.9.1",
     "leaflet": "^1.6.0",
+    "ol": "^6.2.1",
+    "ol-mapbox-style": "^6.0.1",
     "react": "^16.13.0",
     "react-container-dimensions": "^1.4.1",
     "react-dom": "^16.13.0",
diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index 0b68d840..1bda9660 100644
--- a/modern/src/MainMap.js
+++ b/modern/src/MainMap.js
@@ -1,40 +1,25 @@
+import 'ol/ol.css';
 import React, { Component } from 'react';
-import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
-import { connect } from 'react-redux'
-import DivIcon from './leaflet/DivIcon';
+import { connect } from 'react-redux';
+import olms from 'ol-mapbox-style';
 
 const mapStateToProps = state => ({
   positions: state.positions
 });
 
 class MainMap extends Component {
-  state = {
-    lat: 0,
-    lng: 0,
-    zoom: 3,
+  componentDidMount() {
+    olms(this.el, 'https://cdn.traccar.com/map/basic.json');
   }
 
   render() {
-    const position = [this.state.lat, this.state.lng]
-
-    const markers = this.props.positions.map(position =>
-      <DivIcon key={position.id.toString()} position={{ lat: position.latitude, lng: position.longitude }} className="" iconSize={[50, 50]}>
-        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 50 50">
-          <circle cx="25" cy="25" r="20" stroke="#fff" stroke-width="2.5" fill="#008000" />
-          <path d="m25 5v5" stroke="#fff" stroke-width="2.5" transform="rotate(45 25 25)" />
-          <image x="13" y="13" fill="#fff" href="/category/car.svg" />
-        </svg>
-      </DivIcon>
-    );
-
-    return (
-      <Map style={{height: this.props.height, width: this.props.width}} center={position} zoom={this.state.zoom}>
-        <TileLayer
-          attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
-          url="https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png" />
-        {markers}
-      </Map>
-    )
+    const style = {
+      position: 'relative',
+      overflow: 'hidden',
+      width: '100%',
+      height: '100%'
+    };
+    return <div style={style} ref={el => this.el = el} />;
   }
 }