aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-rw-r--r--modern/.vscode/launch.json12
-rw-r--r--modern/package.json2
-rw-r--r--modern/src/MainMap.js39
3 files changed, 20 insertions, 33 deletions
diff --git a/modern/.vscode/launch.json b/modern/.vscode/launch.json
index 9c243a0..8bd51ee 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 a19f528..79fa97d 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 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} />;
}
}