diff options
| -rw-r--r-- | modern/public/category/car.svg | 4 | ||||
| -rw-r--r-- | modern/public/images/background.svg | 10 | ||||
| -rw-r--r-- | modern/src/MainMap.js | 96 |
3 files changed, 83 insertions, 27 deletions
diff --git a/modern/public/category/car.svg b/modern/public/category/car.svg deleted file mode 100644 index 7dad87d2..00000000 --- a/modern/public/category/car.svg +++ /dev/null @@ -1,4 +0,0 @@ -<?xml version="1.0"?> -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff" width="24px" height="24px"> - <path d="M 10 3 C 6.16 3 4.0007812 7.3392969 3.3007812 9.0292969 C 3.2407813 9.0392969 3.1808594 9.0503125 3.1308594 9.0703125 C 3.0008594 9.1203125 8.8817842e-16 10.36 0 14 C 0 15.49 0.62039063 16.250859 1.1503906 16.630859 C 1.4534283 16.848834 1.7927087 16.933479 2.1328125 16.970703 C 2.5695992 18.706125 4.1307191 20 6 20 C 7.858438 20 9.4100868 18.720168 9.8574219 17 L 14.142578 17 C 14.589913 18.720168 16.141562 20 18 20 C 19.873415 20 21.436431 18.700223 21.869141 16.958984 C 23.171684 16.837562 24 16.373111 24 15 L 24 13 C 24 10.28 21.099922 9.0291406 18.919922 8.6191406 C 18.879922 8.5391406 18.839297 8.4508594 18.779297 8.3808594 C 16.769297 5.8608594 14.48 3 10 3 z M 11 5.0800781 C 13.58 5.4100781 15.120938 7.04 16.710938 9 L 11 9 L 11 5.0800781 z M 9 5.1894531 L 9 9 L 5.5195312 9 C 6.1595313 7.68 7.36 5.7694531 9 5.1894531 z M 6 14 C 7.103 14 8 14.897 8 16 C 8 17.103 7.103 18 6 18 C 4.897 18 4 17.103 4 16 C 4 14.897 4.897 14 6 14 z M 18 14 C 19.103 14 20 14.897 20 16 C 20 17.103 19.103 18 18 18 C 16.897 18 16 17.103 16 16 C 16 14.897 16.897 14 18 14 z" fill="#ffffff"/> -</svg> diff --git a/modern/public/images/background.svg b/modern/public/images/background.svg new file mode 100644 index 00000000..df2204d9 --- /dev/null +++ b/modern/public/images/background.svg @@ -0,0 +1,10 @@ +<svg width="50px" height="50px" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="shadow"> + <feDropShadow dx="0" dy="0.1" stdDeviation="0.3" flood-color="grey"/> + </filter> + </defs> + + <circle cx="5" cy="50%" r="4" + style="fill:white; filter:url(#shadow);"/> +</svg> 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} />; } } |
