aboutsummaryrefslogtreecommitdiff
path: root/modern/src/MainMap.js
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2020-03-22 12:17:27 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2020-03-22 12:17:27 -0700
commit5e98816922c284805714e35a678f1a7dfa3facb8 (patch)
tree2d03eb536bf55be5c34cea7050baae4a48b30e46 /modern/src/MainMap.js
parent268ec5bb5214ef0b1e1a1dcb837ae149fe9dcb83 (diff)
downloadtrackermap-web-5e98816922c284805714e35a678f1a7dfa3facb8.tar.gz
trackermap-web-5e98816922c284805714e35a678f1a7dfa3facb8.tar.bz2
trackermap-web-5e98816922c284805714e35a678f1a7dfa3facb8.zip
Use Mapbox map library
Diffstat (limited to 'modern/src/MainMap.js')
-rw-r--r--modern/src/MainMap.js96
1 files changed, 73 insertions, 23 deletions
diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index 00204b25..925b402a 100644
--- a/modern/src/MainMap.js
+++ b/modern/src/MainMap.js
@@ -1,34 +1,84 @@
-import 'ol/ol.css';
+import 'mapbox-gl/src/css/mapbox-gl.css';
import React, { Component } from 'react';
import { connect } from 'react-redux';
-import { Map, View } from 'ol';
-import { fromLonLat } from 'ol/proj';
-import olms from 'ol-mapbox-style';
-import TileLayer from 'ol/layer/Tile';
-import OSM from 'ol/source/OSM';
+import mapboxgl from 'mapbox-gl';
const mapStateToProps = state => ({
- positions: state.positions
+ data: {
+ type: 'FeatureCollection',
+ features: state.positions.map(position => ({
+ type: 'Feature',
+ geometry: {
+ type: 'Point',
+ coordinates: [position.longitude, position.latitude]
+ },
+ properties: {
+ ...position
+ }
+ }))
+ }
});
class MainMap extends Component {
componentDidMount() {
- this.map = new Map({
- target: this.el,
- view: new View({
- constrainResolution: true,
- center: fromLonLat([25.65, 60.98]),
- zoom: 9
- })
+ const map = new mapboxgl.Map({
+ container: this.mapContainer,
+ style: 'https://cdn.traccar.com/map/basic.json',
+ center: [25.65, 60.98],
+ zoom: 0
+ });
+
+ map.on('load', () => this.mapDidLoad(map));
+ }
+
+ loadImage(key, url) {
+ const image = new Image();
+ image.onload = () => {
+ const canvas = document.createElement('canvas');
+ canvas.width = image.width * window.devicePixelRatio;
+ canvas.height = image.height * window.devicePixelRatio;
+ canvas.style.width = `${image.width}px`;
+ canvas.style.height = `${image.height}px`;
+ const context = canvas.getContext('2d');
+ context.imageSmoothingEnabled = false;
+ context.drawImage(image, 0, 0, canvas.width, canvas.height);
+ this.map.addImage(key, context.getImageData(0, 0, canvas.width, canvas.height), {
+ pixelRatio: window.devicePixelRatio
+ });
+ }
+ image.src = url;
+ }
+
+ mapDidLoad(map) {
+ this.map = map;
+
+ this.loadImage('background', 'images/background.svg');
+
+ map.addSource('positions', {
+ 'type': 'geojson',
+ 'data': this.props.data
});
- if (window.location.hostname === 'localhost') {
- olms(this.map, 'https://cdn.traccar.com/map/basic.json');
- } else {
- this.map.addLayer(
- new TileLayer({
- source: new OSM()
- })
- );
+
+ map.addLayer({
+ 'id': 'device-background',
+ 'type': 'symbol',
+ 'source': 'positions',
+ 'layout': {
+ 'icon-image': 'background',
+ 'text-field': 'Test Device Name',
+ 'text-font': ['Roboto Regular'],
+ 'text-size': 11
+ },
+ 'paint':{
+ 'text-halo-color': 'white',
+ 'text-halo-width': 1
+ }
+ });
+ }
+
+ componentDidUpdate(prevProps) {
+ if (this.map && prevProps.data !== this.props.data) {
+ this.map.getSource('positions').setData(this.props.data);
}
}
@@ -39,7 +89,7 @@ class MainMap extends Component {
width: '100%',
height: '100%'
};
- return <div style={style} ref={el => this.el = el} />;
+ return <div style={style} ref={el => this.mapContainer = el} />;
}
}