|
| 1 | +import { Socket } from 'phoenix' |
| 2 | +import Leaflet from 'leaflet' |
| 3 | +import { LeafletLayer } from 'deck.gl-leaflet' |
| 4 | +import { ScatterplotLayer } from '@deck.gl/layers' |
| 5 | +import { MapView } from '@deck.gl/core' |
| 6 | + |
| 7 | +const socket = new Socket('/socket', { params: { token: window.userToken } }) |
| 8 | +socket.connect() |
| 9 | +const channel = socket.channel('explore', {}) |
| 10 | +channel.join() |
| 11 | + .receive('ok', resp => { console.log('Joined successfully', resp) }) |
| 12 | + .receive('error', resp => { console.log('Unable to join', resp) }) |
| 13 | + |
| 14 | +const Mapbox = { |
| 15 | + url: 'https://api.mapbox.com/styles/v1/istopopoki/ckg98kpoc010h19qusi9kxcct/tiles/256/{z}/{x}/{y}?access_token={accessToken}', |
| 16 | + accessToken: 'pk.eyJ1IjoiaXN0b3BvcG9raSIsImEiOiJjaW12eWw2ZHMwMGFxdzVtMWZ5NHcwOHJ4In0.VvZvyvK0UaxbFiAtak7aVw', |
| 17 | + attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors <a href="https://spdx.org/licenses/ODbL-1.0.html">ODbL</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', |
| 18 | + maxZoom: 20 |
| 19 | +} |
| 20 | + |
| 21 | +const metropolitanFranceBounds = [[51.1, -4.9], [41.2, 9.8]] |
| 22 | +const map = Leaflet.map('map', { renderer: Leaflet.canvas() }).fitBounds(metropolitanFranceBounds) |
| 23 | + |
| 24 | +Leaflet.tileLayer(Mapbox.url, { |
| 25 | + accessToken: Mapbox.accessToken, |
| 26 | + attribution: Mapbox.attribution, |
| 27 | + maxZoom: Mapbox.maxZoom |
| 28 | +}).addTo(map) |
| 29 | + |
| 30 | +function prepareLayer (layerId, layerData) { |
| 31 | + return new ScatterplotLayer({ |
| 32 | + id: layerId, |
| 33 | + data: layerData, |
| 34 | + pickable: true, |
| 35 | + opacity: 1, |
| 36 | + stroked: true, |
| 37 | + filled: true, |
| 38 | + radiusScale: 3, |
| 39 | + radiusMinPixels: 1, |
| 40 | + radiusMaxPixels: 3, |
| 41 | + lineWidthMinPixels: 1, |
| 42 | + getPosition: d => { |
| 43 | + return [d.position.longitude, d.position.latitude] |
| 44 | + }, |
| 45 | + getRadius: d => 100000, |
| 46 | + getFillColor: d => [127, 150, 255], |
| 47 | + getLineColor: d => [100, 100, 200] |
| 48 | + }) |
| 49 | +} |
| 50 | + |
| 51 | +const deckLayer = new LeafletLayer({ |
| 52 | + views: [ |
| 53 | + new MapView({ |
| 54 | + repeat: true |
| 55 | + }) |
| 56 | + ], |
| 57 | + layers: [], |
| 58 | + getTooltip: ({ object }) => object && { html: `transport_resource: ${object.transport.resource_id}<br>id: ${object.vehicle.id}` } |
| 59 | +}) |
| 60 | +map.addLayer(deckLayer) |
| 61 | + |
| 62 | +// internal dictionary |
| 63 | +const layers = {} |
| 64 | + |
| 65 | +channel.on('vehicle-positions', payload => { |
| 66 | + if (payload.error) { |
| 67 | + console.log(`Resource ${payload.resource_id} failed to load`) |
| 68 | + } else { |
| 69 | + layers[payload.resource_id] = prepareLayer(payload.resource_id, payload.vehicle_positions) |
| 70 | + deckLayer.setProps({ layers: Object.values(layers) }) |
| 71 | + } |
| 72 | +}) |
| 73 | + |
| 74 | +export default socket |
0 commit comments