aboutsummaryrefslogtreecommitdiff
path: root/modern/src/MainMap.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-03-18 23:03:31 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2020-03-18 23:03:31 -0700
commit3d05383151ad7ce44c6297fc46bf5bf8457db7c6 (patch)
treece31dbe9264748ebd71fc436ade314e4622a046d /modern/src/MainMap.js
parent13fb1b0ec962b3262acd4d71ea6b382ce23cafaa (diff)
downloadtrackermap-web-3d05383151ad7ce44c6297fc46bf5bf8457db7c6.tar.gz
trackermap-web-3d05383151ad7ce44c6297fc46bf5bf8457db7c6.tar.bz2
trackermap-web-3d05383151ad7ce44c6297fc46bf5bf8457db7c6.zip
Replace map with OpenLayers
Diffstat (limited to 'modern/src/MainMap.js')
-rw-r--r--modern/src/MainMap.js39
1 files changed, 12 insertions, 27 deletions
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} />;
}
}