Replace map with OpenLayers

1 files changed, 12 insertions, 27 deletions

diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index 0b68d84..1bda966 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} />;
   }
 }