@wemap/providers 3.0.0

package/debug/components/MapComponent.jsx

@@ -0,0 +1,366 @@
+import React from 'react';
+import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import PropTypes from 'prop-types';
+
+import {
+    Attitude, UserPosition, Constants
+} from '@wemap/geo';
+import { Network } from '@wemap/graph';
+
+mapboxgl.accessToken
+    = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
+
+const COMPASS_STYLE = {
+    width: '15px',
+    height: '15px',
+    'border-radius': '50%',
+    'z-index': '10000001',
+    position: 'absolute',
+    top: '-14px',
+    left: '-14px',
+    border: '7px solid',
+    'border-color': 'transparent',
+    'border-top-color': '#008DF1',
+    opacity: 0.5
+};
+
+const POSITION_STYLE = {
+    width: '15px',
+    height: '15px',
+    top: '-7px',
+    left: '-7px',
+    position: 'absolute',
+    'border-radius': '50%',
+    background: '#008DF1'
+};
+
+class MapComponent extends React.Component {
+    static propTypes = {
+        network: PropTypes.instanceOf(Network),
+        positionRenderFrequency: PropTypes.number,
+        centerCameraFrequency: PropTypes.number,
+        maxZoom: PropTypes.number
+    };
+
+    static defaultProps = {
+        maxZoom: 22,
+        positionRenderFrequency: 60,
+        centerCameraFrequency: 1
+    };
+
+    userAccuracySource = {
+        'type': 'geojson',
+        'data': {
+            'type': 'FeatureCollection',
+            'features': []
+        }
+    };
+
+    followUser = true;
+    positionDirty = false;
+    positionForCameraDirty = false;
+
+    componentDidMount() {
+        this.map = new mapboxgl.Map({
+            container: this.mapContainer,
+            style: 'mapbox://styles/mapbox/streets-v9',
+            maxZoom: this.props.maxZoom
+        });
+
+        this.createFollowingUser();
+        this.map.on('load', () => {
+            this.createUserAccuracyLayer();
+        });
+        this.renderNetwork();
+
+        this.positionRenderLoopId = setInterval(this.positionRenderLoop, 1e3 / this.props.positionRenderFrequency);
+        this.centerCameraRenderLoopId = setInterval(this.centerCameraRenderLoop, 1e3 / this.props.centerCameraFrequency);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.positionRenderLoopId);
+        clearInterval(this.centerCameraRenderLoopId);
+        this.map.remove();
+    }
+
+    createMarker(options) {
+        var elem, marker;
+
+        elem = document.createElement('div');
+        elem.style.marginLeft = '-' + options.iconAnchor[0] + 'px';
+        elem.style.marginTop = '-' + options.iconAnchor[1] + 'px';
+        elem.style.width = 0;
+        elem.style.height = 0;
+        elem.appendChild(options.dom);
+
+        marker = new mapboxgl.Marker(elem);
+        marker.setLngLat([options.longitude, options.latitude]);
+        return marker;
+    }
+
+    createPositionMarker(position) {
+        const coreIcon = document.createElement('div');
+        this.applyStyleToDomElement(coreIcon, POSITION_STYLE);
+
+        this.positionIcon = document.createElement('div');
+        this.positionIcon.appendChild(coreIcon);
+
+        return this.createMarker({
+            dom: this.positionIcon,
+            iconAnchor: [0, 0],
+            latitude: position[1],
+            longitude: position[0]
+        });
+    }
+
+    createCompassElement() {
+        if (!this.positionIcon) {
+            throw new Error('createPositionMarker() should be called before');
+        }
+        this.compassIcon = document.createElement('div');
+        this.applyStyleToDomElement(this.compassIcon, COMPASS_STYLE);
+        this.positionIcon.appendChild(this.compassIcon);
+    }
+
+    applyStyleToDomElement(domElement, style) {
+        for (const key in style) {
+            if (style.hasOwnProperty(key)) {
+                domElement.style[key] = style[key];
+            }
+        }
+    }
+
+    /**
+     * @param {UserPosition} position
+     */
+    updatePosition(position) {
+        if (this.position !== position) {
+            this.positionDirty = true;
+            this.positionForCameraDirty = true;
+        }
+        this.position = position;
+    }
+
+    positionRenderLoop = () => {
+
+        if (!this.positionDirty) {
+            return;
+        }
+
+        if (this.position === null) {
+            if (this.mapMarker) {
+                this.mapMarker.remove();
+                this.mapMarker = null;
+            }
+            this.map.setLayoutProperty('user-accuracy', 'visibility', 'none');
+            this.positionIcon = null;
+            this.compassIcon = null;
+            return;
+        }
+
+        const lngLat = [this.position.lng, this.position.lat];
+
+        if (!this.mapMarker) {
+            this.mapMarker = this.createPositionMarker(lngLat).addTo(this.map);
+        } else {
+            this.mapMarker.setLngLat(lngLat);
+        }
+
+        if (this.position.accuracy) {
+            this.userAccuracySource.data.features = [{
+                'type': 'Feature',
+                'geometry': {
+                    'type': 'Polygon',
+                    'coordinates': [this.constructor.createGeoJSONCircle(lngLat, this.position.accuracy / 1e3)]
+                }
+            }];
+            this.map.setLayoutProperty('user-accuracy', 'visibility', 'visible');
+        } else {
+            this.userAccuracySource.data.features = [];
+        }
+
+        const userAccuracySource = this.map.getSource('user-accuracy');
+        if (userAccuracySource) {
+            userAccuracySource.setData(this.userAccuracySource.data);
+        }
+    }
+
+    centerCameraRenderLoop = () => {
+
+        if (!this.positionForCameraDirty || !this.followUser || !this.position) {
+            return;
+        }
+
+        this.positionForCameraDirty = false;
+
+        const center = [this.position.lng, this.position.lat];
+        let zoom = this.props.maxZoom;
+        if (this.position.accuracy) {
+            zoom = Math.min(Math.round(Math.log2(
+                Constants.R_MAJOR * Math.cos(this.position.lat / 180 * Math.PI)
+                / this.position.accuracy
+                / 256
+                * Math.min(this.mapContainer.offsetWidth, this.mapContainer.offsetHeight)
+            )), this.props.maxZoom);
+        }
+
+        this.map.easeTo({
+            center,
+            zoom
+        });
+    }
+
+    updateAttitude(attitude) {
+        if (!this.positionIcon) {
+            return;
+        }
+
+        if (!(attitude instanceof Attitude)) {
+            if (this.compassIcon) {
+                this.positionIcon.removeChild(this.compassIcon);
+            }
+            return;
+        }
+
+        if (!this.compassIcon) {
+            this.createCompassElement();
+        }
+
+        this.positionIcon.style.transform
+            = 'rotate(' + attitude.headingDegrees + 'deg)';
+    }
+
+    renderNetwork() {
+        if (!this.map) {
+            return;
+        }
+
+        const network = this.props.network;
+
+        if (network === this.previousNetwork) {
+            return;
+        }
+        this.previousNetwork = network;
+
+        if (!network) {
+            if (this.networkLayer) {
+                this.map.removeLayer(this.networkLayer);
+                this.networkLayer = null;
+            }
+            return;
+        }
+
+        const layer = {
+            id: 'network',
+            type: 'line',
+            source: {
+                type: 'geojson',
+                data: {
+                    type: 'Feature',
+                    properties: {},
+                    geometry: {
+                        type: 'MultiLineString',
+                        coordinates: []
+                    }
+                }
+            },
+            paint: {
+                'line-color': '#0000FF',
+                'line-width': 3
+            }
+        };
+
+        for (let i = 0; i < network.edges.length; i++) {
+            layer.source.data.geometry.coordinates.push([
+                [network.edges[i].node1.coords.lng, network.edges[i].node1.coords.lat],
+                [network.edges[i].node2.coords.lng, network.edges[i].node2.coords.lat]
+            ]);
+        }
+
+        this.networkLayer = this.map.addLayer(layer);
+    }
+
+    createUserAccuracyLayer() {
+        this.map.addSource('user-accuracy', this.userAccuracySource);
+        this.map.addLayer({
+            'id': 'user-accuracy',
+            'type': 'fill',
+            'source': 'user-accuracy',
+            'layout': {},
+            'paint': {
+                'fill-color': 'blue',
+                'fill-opacity': 0.1
+            }
+        });
+    }
+
+    // https://stackoverflow.com/a/39006388/2239938
+    static createGeoJSONCircle(center, radiusInKm, points) {
+        if (!points) {
+            points = 64;
+        }
+
+        var coords = {
+            latitude: center[1],
+            longitude: center[0]
+        };
+
+        var km = radiusInKm;
+
+        var ret = [];
+        var distanceX = km / (111.320 * Math.cos(coords.latitude * Math.PI / 180));
+        var distanceY = km / 110.574;
+
+        var theta, x, y;
+        for (let i = 0; i < points; i++) {
+            theta = (i / points) * (2 * Math.PI);
+            x = distanceX * Math.cos(theta);
+            y = distanceY * Math.sin(theta);
+
+            ret.push([coords.longitude + x, coords.latitude + y]);
+        }
+        ret.push(ret[0]);
+        return ret;
+    }
+
+    createFollowingUser() {
+
+        const topRightContainer = document.getElementsByClassName('mapboxgl-ctrl-top-right')[0];
+
+        const container = document.createElement('div');
+        container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';
+        topRightContainer.appendChild(container);
+
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.title = 'Find my location';
+        button.className = 'mapboxgl-ctrl-geolocate';
+        container.appendChild(button);
+
+        const span = document.createElement('span');
+        span.className = 'mapboxgl-ctrl-icon';
+        button.appendChild(span);
+
+        button.onclick = () => {
+            this.followUser = true;
+            this.positionForCameraDirty = true;
+            this.centerCameraRenderLoop();
+        };
+
+        this.map.on('dragstart', () => (this.followUser = false));
+    }
+
+    render() {
+        this.renderNetwork();
+        return (
+            <div ref={map => (this.mapContainer = map)}
+                style={{
+                    width: '100%',
+                    height: '100%'
+                }} />
+        );
+    }
+}
+
+export default MapComponent;

package/debug/components/NavigationConfig.js

@@ -0,0 +1,112 @@
+import React from 'react'; // eslint-disable-line no-unused-vars
+
+import {
+    AbsoluteHeading, UserPosition, Level
+} from '@wemap/geo';
+import { Itinerary } from '@wemap/graph';
+import { deg2rad } from '@wemap/maths';
+import { TimeUtils } from '@wemap/utils';
+
+const datasets = {};
+
+// Wemap Office
+const wemapOffice = {
+    get initialPosition() {
+        return new UserPosition(43.6091955, 3.8841255, 1.5, null, TimeUtils.preciseTime / 1e3, 0);
+    },
+    get initialHeading() {
+        return new AbsoluteHeading(deg2rad(191.9), TimeUtils.preciseTime / 1e3, 0);
+    }
+};
+wemapOffice.itinerary = Itinerary.fromOrderedPointsArray(
+    [
+        [wemapOffice.initialPosition.lat, wemapOffice.initialPosition.lng],
+        [43.6091883, 3.8841242],
+        [43.6091709, 3.8842382],
+        [43.6091288, 3.884226],
+        [43.6091461, 3.884112]
+    ],
+    [wemapOffice.initialPosition.lat, wemapOffice.initialPosition.lng],
+    [43.6091461, 3.884112]
+);
+
+// Wemap Office Multi-level
+const wemapOfficeMulti = {
+    get initialPosition() {
+        return new UserPosition(43.6091965, 3.8841285, 1.5, new Level(2), TimeUtils.preciseTime / 1e3, 0);
+    },
+    get initialHeading() {
+        return new AbsoluteHeading(deg2rad(191.9), TimeUtils.preciseTime / 1e3, 0);
+    }
+};
+wemapOfficeMulti.itinerary = Itinerary.fromOrderedPointsArray(
+    [
+        [43.6091888, 3.8841263, new Level(2)],
+        [43.6091749, 3.8842173, new Level(2)],
+        [43.6092935, 3.8842518, new Level(2)],
+        [43.6093022, 3.8842702, new Level(2)],
+        [43.6093123, 3.8842731, new Level(2)],
+        [43.6093234, 3.8842009, new Level(2)],
+        [43.6093629, 3.8842127, new Level(1, 2)],
+        [43.6093597, 3.8842336, new Level(1, 2)],
+        [43.6093202, 3.8842218, new Level(1)],
+        [43.6093123, 3.8842731, new Level(1)],
+        [43.6092681, 3.8842604, new Level(1)]
+    ],
+    [wemapOfficeMulti.initialPosition.lat, wemapOffice.initialPosition.lng, wemapOfficeMulti.initialPosition.level],
+    [43.6092602, 3.8842669, new Level(1)]
+);
+
+// Gare de Lyon RER A
+const gareDeLyonRerA = {
+    get initialPosition() {
+        return new UserPosition(48.8442365, 2.3728267, 1.5, new Level(-2), TimeUtils.preciseTime / 1e3, 0);
+    },
+    get initialHeading() {
+        return new AbsoluteHeading(deg2rad(41.6), TimeUtils.preciseTime / 1e3, 0);
+    }
+};
+gareDeLyonRerA.itinerary = Itinerary.fromOrderedPointsArray(
+    [
+        [48.8442368, 2.3728274, new Level(-2)],
+        [48.8442378, 2.3728257, new Level(-2)],
+        [48.8443732, 2.3726023, new Level(-1)],
+        [48.8443864, 2.3726195, new Level(-1)],
+        [48.8444032, 2.3726407, new Level(-1)]
+    ],
+    [gareDeLyonRerA.initialPosition.lat, gareDeLyonRerA.initialPosition.lng, gareDeLyonRerA.initialPosition.level],
+    [48.8444315, 2.3726809, new Level(-1)]
+);
+
+
+datasets['wemap-office'] = wemapOffice;
+datasets['wemap-office-multi'] = wemapOfficeMulti;
+datasets['gare-de-lyon-rer-a'] = gareDeLyonRerA;
+
+class NavigationConfig {
+
+    static dataset = wemapOffice;
+
+    static load(datasetName) {
+        const dataset = datasets[datasetName];
+        if (!dataset) {
+            throw new Error('Unknown ' + datasetName);
+        }
+        this.dataset = dataset;
+    }
+
+    static get INITIAL_POSITION() {
+        return this.dataset.initialPosition;
+    }
+
+    static get INITIAL_HEADING() {
+        return this.dataset.initialHeading;
+    }
+
+    static get ITINERARY() {
+        return this.dataset.itinerary;
+    }
+
+}
+
+export default NavigationConfig;

package/debug/components/PoseComponent.jsx

@@ -0,0 +1,168 @@
+import React from 'react';
+
+import {
+    PositionSmoother, ProvidersInterface, EventType
+} from '../..';
+
+import Utils from './Utils';
+import MapComponent from './MapComponent';
+import NavigationConfig from './NavigationConfig';
+
+import './Common.css';
+import StartStopComponent from './StartStopComponent';
+
+
+class PoseComponent extends React.Component {
+
+    started = false;
+
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            position: null,
+            attitude: null
+        };
+
+        this.smoother = new PositionSmoother(position => {
+            if (this.map && this.started) {
+                this.map.updatePosition(position);
+            }
+        });
+
+        ProvidersInterface.logger = true;
+    }
+
+    componentWillUnmount() {
+        this.onStop();
+    }
+
+    onStart = () => {
+        this.started = true;
+        this.onAttitudeEvent(ProvidersInterface.getLastKnown(EventType.AbsoluteAttitude));
+        this.attitudeProviderId = ProvidersInterface.addEventListener(
+            EventType.AbsoluteAttitude,
+            this.onAttitudeEvent,
+            this.onAttitudeError
+        );
+
+        this.onPositionEvent(ProvidersInterface.getLastKnown(EventType.AbsolutePosition));
+        this.positionProviderId = ProvidersInterface.addEventListener(
+            EventType.AbsolutePosition,
+            this.onPositionEvent,
+            this.onPositionError
+        );
+    }
+
+    onStop = () => {
+        this.started = false;
+        ProvidersInterface.removeEventListener(this.attitudeProviderId);
+        ProvidersInterface.removeEventListener(this.positionProviderId);
+        this.map.updatePosition(null);
+        this.map.updateAttitude(null);
+    }
+
+    onPositionEvent = position => {
+        if (!position) {
+            return;
+        }
+        this.setState({ position });
+        this.smoother.feed(position);
+    };
+
+    onPositionError = error => {
+        this.setState({ position: error });
+    };
+
+    onAttitudeEvent = attitude => {
+        if (!attitude) {
+            return;
+        }
+        this.setState({ attitude });
+        if (this.map && this.started) {
+            this.map.updateAttitude(attitude);
+        }
+    };
+
+    onAttitudeError = error => {
+        this.setState({ attitude: error });
+    };
+
+    handleHeadingButton() {
+        ProvidersInterface.feed(EventType.AbsoluteHeading, NavigationConfig.INITIAL_HEADING);
+    }
+
+    handlePosButton() {
+        ProvidersInterface.feed(EventType.AbsolutePosition, NavigationConfig.INITIAL_POSITION);
+    }
+
+    handleItinerary() {
+        const itinerary = NavigationConfig.ITINERARY;
+        ProvidersInterface.feed(EventType.Network, itinerary);
+        this.setState({ itinerary });
+    }
+
+
+    render() {
+
+        const errored = this.state.attitude instanceof Error
+            && this.state.position instanceof Error;
+
+        return (
+            <div style={{
+                display: 'flex',
+                flexFlow: 'column',
+                height: 'calc(100% - 16px)',
+                padding: '8px'
+            }}>
+
+                <StartStopComponent
+                    onStart={this.onStart}
+                    onStop={this.onStop}
+                    errored={errored}
+                />
+
+                <div style={{ marginTop: '10px' }}>
+                    <input type="button"
+                        onClick={() => this.handlePosButton()}
+                        value="Send Wemap position" />
+                    <input type="button"
+                        style={{ marginLeft: '10px' }}
+                        onClick={() => this.handleHeadingButton()}
+                        value="Send heading" />
+                    <input type="button"
+                        value="Add itinerary"
+                        style={{ marginLeft: '10px' }}
+                        onClick={() => this.handleItinerary()} />
+                </div>
+
+                <div style={{
+                    display: 'flex',
+                    flexFlow: 'row'
+                }}>
+                    <div style={{ width: '50%' }}>
+                        <div className="title">Position</div>
+                        {Utils.renderPositionEvent(this.state.position)}
+                    </div>
+                    <div style={{ width: '50%' }}>
+                        <div className="title">Attitude</div>
+                        {Utils.renderAttitudeEvent(this.state.attitude)}
+                    </div>
+                </div>
+
+                <div className="title">Map</div>
+                <div style={{
+                    flexGrow: 1,
+                    minHeight: '300px'
+                }}>
+                    <MapComponent
+                        ref={map => (this.map = map)}
+                        network={this.state.itinerary}
+                    />
+                </div>
+            </div >
+
+        );
+    }
+}
+
+export default PoseComponent;