diff options
| -rw-r--r-- | modern/.vscode/launch.json | 12 | ||||
| -rw-r--r-- | modern/package.json | 2 | ||||
| -rw-r--r-- | modern/src/MainMap.js | 39 |
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="© <a href="http://osm.org/copyright">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} />; } } |