Use Mapbox map library

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} />;
   }
 }