@wemap/providers 3.1.2 → 3.1.4

package/debug/map/helpers/UserOnMapHandler.js

@@ -0,0 +1,489 @@
+import mapboxgl from 'mapbox-gl';
+
+import {
+    Attitude, UserPosition, Constants
+} from '@wemap/geo';
+import { deg2rad } from '@wemap/maths';
+
+import {
+    PositionSmoother, ProvidersInterface, EventType
+} from '../../..';
+
+import ItineraryStore from '../../stores/ItineraryStore';
+import MapboxHelper from '../MapboxHelper';
+
+/**
+ * Minimum size of accuracy circle radius
+ */
+const MIN_ACCURACY_CIRCLE_RADIUS = 18;
+
+class UserOnMapHandler {
+
+    positioningStarted = false;
+
+    trackUserLocation = true;
+    trackUserLocationFirst = true;
+
+    attitude = null;
+    attitudeDirty = false;
+    renderedAttitude = null;
+
+    position = null;
+    positionDirty = false;
+    renderedPosition = null;
+
+    positionAccuracy = null;
+    positionAccuracyDirty = false;
+    renderAccuracy = false;
+
+    positionForCameraDirty = false;
+    levelForPositionDirty = false;
+
+    /**
+     * @param {mapboxgl.Map} map
+     * @param {HTMLDivElement} mapContainer
+     */
+    constructor(map, mapContainer) {
+        if (!map) {
+            throw new TypeError('map cannot be null');
+        }
+
+        this.map = map;
+        this.mapContainer = mapContainer;
+        this.itineraryStore = ItineraryStore.instance;
+
+        map.on('zoom', () => (this.positionAccuracyDirty = true));
+        map.on('dragstart', () => (this.trackUserLocation = false));
+        map.on('level', () => (this.levelForPositionDirty = true));
+
+        this.createDomPosition();
+        this.createButtons();
+    }
+
+
+    componentDidMount() {
+        this.renderPositionLoop();
+        this.renderPositionAccuracyLoop();
+        this.renderOrientationLoop();
+        this.renderCameraCenterLoop();
+    }
+
+    componentWillUnmount() {
+        cancelAnimationFrame(this.renderPositionLoopId);
+        cancelAnimationFrame(this.renderPositionAccuracyLoopId);
+        cancelAnimationFrame(this.renderOrientationLoopId);
+        cancelAnimationFrame(this.renderCameraCenterLoopId);
+    }
+
+
+    /**
+     * Geo location logic
+     */
+
+    startPositioning() {
+
+        if (this.positioningStarted) {
+            return;
+        }
+        this.positioningStarted = true;
+
+
+        /**
+         * Attitude
+         */
+
+        this.attitudeProvidersId = ProvidersInterface.addEventListener(
+            EventType.AbsoluteAttitude,
+            attitude => this.updateAttitude(attitude)
+        );
+
+        // There is no sense to show the last known attitude on the map
+        // this.updateAttitude(ProvidersInterface.getLastKnown(EventType.AbsoluteAttitude));
+
+
+        /**
+         * Position
+         */
+
+        this.smoother = new PositionSmoother(position => this.updatePosition(position));
+
+        let firstPositionFound = false;
+
+        const firstPositionFn = () => {
+            this.buttonLocateMe.classList.remove('mapboxgl-ctrl-geolocate-waiting');
+            this.blueDot.classList.remove('inaccurate');
+            this.accuracyCircle.classList.remove('inaccurate');
+        };
+
+        this.positionProvidersId = ProvidersInterface.addEventListener(
+            EventType.AbsolutePosition,
+            position => {
+                this.smoother.feed(position);
+
+                if (!firstPositionFound) {
+                    firstPositionFn();
+                    firstPositionFound = true;
+                }
+            }
+        );
+
+        this.updatePosition(ProvidersInterface.getLastKnown(EventType.AbsolutePosition));
+
+
+        /**
+         * Itinerary
+         */
+
+        this.onItineraryChanged = itinerary => {
+            if (!itinerary) {
+                this.stopPositioning();
+            }
+        };
+        this.itineraryStore.on(ItineraryStore.Events.ItineraryChanged, this.onItineraryChanged);
+
+
+        /**
+         * UI
+         */
+
+        this.buttonLocateMe.classList.add('mapboxgl-ctrl-geolocate-active');
+        this.buttonLocateMe.classList.add('mapboxgl-ctrl-geolocate-waiting');
+        this.buttonStopNav.style.display = 'block';
+
+        this.blueDot.classList.add('inaccurate');
+        this.accuracyCircle.classList.add('inaccurate');
+
+    }
+
+    stopPositioning() {
+
+        if (!this.positioningStarted) {
+            return;
+        }
+        this.positioningStarted = false;
+
+
+        /**
+         * Attitude
+         */
+
+        ProvidersInterface.removeEventListener(this.attitudeProvidersId);
+
+
+        /**
+         * Position
+         */
+
+        ProvidersInterface.removeEventListener(this.positionProvidersId);
+        this.smoother.clear();
+
+
+        /**
+         * Itinerary
+         */
+
+        this.itineraryStore.off(ItineraryStore.Events.ItineraryChanged, this.onItineraryChanged);
+
+
+        /**
+         * UI
+         */
+
+        this.buttonLocateMe.classList.remove('mapboxgl-ctrl-geolocate-active');
+        this.buttonLocateMe.classList.remove('mapboxgl-ctrl-geolocate-waiting');
+
+        this.buttonStopNav.style.display = 'none';
+
+        this.position = null;
+        this.positionDirty = true;
+        this.positionAccuracy = null;
+        this.positionAccuracyDirty = true;
+        this.attitude = null;
+        this.attitudeDirty = true;
+        this.renderPosition();
+        this.renderOrientation();
+    }
+
+    /**
+     * @param {UserPosition} position
+     */
+    updatePosition = position => {
+
+        if (this.position === position) {
+            return;
+        }
+
+        this.positionDirty = true;
+        this.positionForCameraDirty = true;
+        this.position = position;
+
+        const newAccuracy = !position ? null : position.accuracy;
+        if (this.positionAccuracy !== newAccuracy) {
+            this.positionAccuracy = newAccuracy;
+            this.positionAccuracyDirty = true;
+        }
+
+    }
+
+    /**
+     * @param {Attitude} attitude
+     */
+    updateAttitude = attitude => {
+
+        if (this.attitude === attitude) {
+            return;
+        }
+
+        this.attitudeDirty = true;
+        this.attitude = attitude;
+    }
+
+
+    /**
+     * Render loops
+     */
+
+    renderPositionLoop = () => {
+        this.renderPosition();
+        this.renderPositionLoopId = requestAnimationFrame(this.renderPositionLoop);
+    }
+
+    renderPosition() {
+
+        if (!this.positionDirty && !this.levelForPositionDirty) {
+            return;
+        }
+
+        let position;
+        if (this.position !== null
+            && (this.map.getLevel() === null
+                || this.position.level === null
+                || this.map.getLevel() === this.position.level.val
+            )
+        ) {
+            position = this.position;
+        } else {
+            position = null;
+        }
+
+        if (position && !this.renderedPosition) {
+
+            this.mapMarker = MapboxHelper.createMarker({
+                dom: this.positionIcon,
+                iconAnchor: [0, 0],
+                latitude: position.lat,
+                longitude: position.lng
+            }).addTo(this.map);
+
+        } else if (!position && this.renderPosition) {
+            this.mapMarker.remove();
+        } else if (position) {
+            this.mapMarker.setLngLat([position.lng, position.lat]);
+        }
+
+        this.renderedPosition = position;
+        this.positionDirty = false;
+        this.levelForPositionDirty = false;
+    }
+
+    renderPositionAccuracyLoop = () => {
+        this.renderPositionAccuracy();
+        this.renderPositionAccuracyLoopId = requestAnimationFrame(this.renderPositionAccuracyLoop);
+    }
+
+    renderPositionAccuracy() {
+
+        if (!this.positionAccuracyDirty) {
+            return;
+        }
+
+        let accuracyToSmall = false;
+        if (this.positionAccuracy !== null) {
+
+            // https://wiki.openstreetmap.org/wiki/Zoom_levels
+            const lengthOfATileInMeters = Constants.CIRCUMFERENCE * Math.cos(deg2rad(this.position.lat)) / (2 ** this.map.getZoom());
+            const lengthOfAPixel = lengthOfATileInMeters / this.map.transform.tileSize;
+            const radiusInPx = this.position.accuracy / lengthOfAPixel;
+
+            if (radiusInPx < MIN_ACCURACY_CIRCLE_RADIUS) {
+                accuracyToSmall = true;
+            } else {
+                this.accuracyCircle.style.width = `${radiusInPx * 2}px`;
+                this.accuracyCircle.style.height = `${radiusInPx * 2}px`;
+                this.accuracyCircle.style.top = `-${radiusInPx}px`;
+                this.accuracyCircle.style.left = `-${radiusInPx}px`;
+            }
+        }
+
+        const renderAccuracy = this.positionAccuracy !== null && !accuracyToSmall;
+
+        if (renderAccuracy && !this.renderAccuracy) {
+            this.positionIcon.appendChild(this.accuracyCircle);
+        } else if (!renderAccuracy && this.renderAccuracy) {
+            this.positionIcon.removeChild(this.accuracyCircle);
+        }
+
+        this.renderAccuracy = renderAccuracy;
+        this.positionAccuracyDirty = false;
+    }
+
+    renderOrientationLoop = () => {
+        this.renderOrientation();
+        this.renderOrientationLoopId = requestAnimationFrame(this.renderOrientationLoop);
+    }
+
+    renderOrientation() {
+
+        if (!this.attitudeDirty || !this.positionIcon) {
+            return;
+        }
+
+        if (!this.renderedAttitude && this.attitude) {
+            this.positionIcon.appendChild(this.compassIcon);
+        } else if (this.renderedAttitude && !this.attitude) {
+            this.positionIcon.removeChild(this.compassIcon);
+        }
+
+        if (this.attitude) {
+            this.positionIcon.style.transform = 'rotate(' + this.attitude.headingDegrees + 'deg)';
+        }
+
+        this.renderedAttitude = this.attitude;
+        this.attitudeDirty = false;
+    }
+
+    renderCameraCenterLoop = () => {
+        this.renderCameraCenter();
+        this.renderCameraCenterLoopId = requestAnimationFrame(this.renderCameraCenterLoop);
+    }
+
+
+    renderCameraCenter() {
+
+        if (!this.positionForCameraDirty || !this.trackUserLocation || !this.position) {
+            return;
+        }
+
+        const center = new mapboxgl.LngLat(this.position.lng, this.position.lat);
+
+        let transform;
+        if (this.trackUserLocationFirst) {
+
+            transform = this.map.cameraForBounds(
+                center.toBounds(this.position.accuracy),
+                {
+                    bearing: this.map.getBearing(),
+                    maxZoom: 21,
+                    padding: 100
+                }
+            );
+
+            this.trackUserLocationFirst = false;
+
+        } else {
+            transform = { center };
+        }
+
+        this.map.jumpTo(transform);
+
+        if (this.position && this.position.level && !this.position.level.isRange
+            && this.position.level.val !== this.map.getLevel()) {
+            this.map.setLevel(this.position.level.val);
+        }
+
+        this.positionForCameraDirty = false;
+    }
+
+
+    /**
+     * Styling
+     */
+
+    createDomPosition() {
+
+        // Main element
+        this.positionIcon = document.createElement('div');
+
+        // Accuracy circle
+        this.accuracyCircle = document.createElement('div');
+        this.accuracyCircle.id = 'location-marker-accuracy';
+        this.positionIcon.appendChild(this.accuracyCircle);
+
+        // Blue dot
+        this.blueDot = document.createElement('div');
+        this.blueDot.id = 'location-marker';
+        this.positionIcon.appendChild(this.blueDot);
+
+        // Compass cone
+        this.compassIcon = document.createElement('div');
+        this.compassIcon.id = 'location-marker-compass';
+
+    }
+
+
+    createButtons() {
+
+        const topRightContainer = document.getElementsByClassName('mapboxgl-ctrl-top-right')[0];
+
+        const userLocationContainer = document.createElement('div');
+        userLocationContainer.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';
+        userLocationContainer.id = 'user-location-container';
+        topRightContainer.appendChild(userLocationContainer);
+
+        this.createLocateMeButton(userLocationContainer);
+        this.createStopNavButton(userLocationContainer);
+    }
+
+    /**
+     * @param {HTMLDivElement} container
+     */
+    createLocateMeButton(container) {
+
+        const buttonLocateMe = document.createElement('button');
+        this.buttonLocateMe = buttonLocateMe;
+
+        buttonLocateMe.type = 'button';
+        buttonLocateMe.title = 'Find my location';
+        buttonLocateMe.className = 'mapboxgl-ctrl-geolocate';
+        container.appendChild(buttonLocateMe);
+
+        const span = document.createElement('span');
+        span.className = 'mapboxgl-ctrl-icon';
+        buttonLocateMe.appendChild(span);
+
+        buttonLocateMe.onclick = () => {
+            this.trackUserLocation = true;
+            this.positionForCameraDirty = true;
+            this.trackUserLocationFirst = true;
+            this.renderCameraCenter();
+
+            if (!this.positioningStarted) {
+                this.startPositioning();
+            }
+
+        };
+    }
+
+    /**
+     * @param {HTMLDivElement} container
+     */
+    createStopNavButton(container) {
+
+        const buttonStopNav = document.createElement('button');
+        this.buttonStopNav = buttonStopNav;
+        buttonStopNav.type = 'button';
+        buttonStopNav.title = 'Remove my location';
+        buttonStopNav.className = 'mapboxgl-ctrl-geolocate-remove';
+        buttonStopNav.style.display = 'none';
+        container.appendChild(buttonStopNav);
+
+        const span = document.createElement('span');
+        span.className = 'mapboxgl-ctrl-icon';
+        buttonStopNav.appendChild(span);
+
+        buttonStopNav.onclick = () => {
+            this.stopPositioning();
+        };
+    }
+}
+export default UserOnMapHandler;

package/debug/stores/ItineraryStore.js

@@ -0,0 +1,223 @@
+import { Coordinates } from '@wemap/geo';
+import { Itinerary } from '@wemap/graph';
+import { OsrmUtils } from '@wemap/osm';
+import { Evented } from '@wemap/utils';
+
+import {
+    ProvidersInterface, EventType
+} from '../..';
+
+const Events = {
+    StartChanged: 'itinerary.start.changed',
+    EndChanged: 'itinerary.end.changed',
+    ItineraryChanged: 'itinerary.changed',
+    ItineraryNotFound: 'itinerary.not.found',
+    ItineraryComputing: 'itinerary.computing',
+    ItineraryServerChanged: 'itinerary.server.changed',
+    ServerError: 'itinerary.server.error',
+    UseStairsChanged: 'itinerary.use.stairs.changed'
+};
+
+const Servers = {
+    Indoor: {
+        name: 'Indoor',
+        routingUrl: 'https://osmrouter.getwemap.com'
+    },
+    Outdoor: {
+        name: 'Outdoor',
+        routingUrl: 'https://routingdev.maaap.it'
+    }
+};
+
+class ItineraryStore extends Evented {
+
+    _start = null;
+    _end = null;
+    _itinerary = null;
+    _itineraryServer = Servers.Outdoor;
+    _useStairs = true;
+
+    static Events = Events;
+    static Servers = Servers;
+
+    static instance = new ItineraryStore();
+
+    /**
+     * @param {Coordinates} start
+     */
+    set start(start) {
+        this._start = start;
+        this.fire(Events.StartChanged, start);
+
+        if (start !== null && start.level !== null && this.itineraryServer !== Servers.Indoor) {
+            this.itineraryServer = Servers.Indoor;
+        }
+    }
+
+    /**
+     * @returns {Coordinates}
+     */
+    get start() {
+        return this._start;
+    }
+
+    /**
+     * @returns {Promise}
+     */
+    retrieveStartFromUserLocation() {
+
+        const userPosition = ProvidersInterface.getLastKnown(EventType.AbsolutePosition);
+        if (userPosition) {
+            this.start = userPosition;
+            return Promise.resolve();
+        }
+
+        return new Promise((resolve, reject) => {
+
+            let providerId;
+
+            const rejectFn = () => {
+                ProvidersInterface.removeEventListener(providerId);
+                reject();
+            };
+
+            this.on(Events.StartChanged, rejectFn);
+
+            providerId = ProvidersInterface.addEventListener(EventType.AbsolutePosition,
+                position => {
+                    this.off(Events.StartChanged, rejectFn);
+                    ProvidersInterface.removeEventListener(providerId);
+                    this.start = position;
+                    resolve();
+                });
+        });
+    }
+
+    /**
+     * @param {Coordinates} end
+     */
+    set end(end) {
+        this._end = end;
+        this.fire(Events.EndChanged, end);
+
+        if (end !== null && end.level !== null && this.itineraryServer !== Servers.Indoor) {
+            this.itineraryServer = Servers.Indoor;
+        }
+    }
+
+    /**
+     * @returns {Coordinates}
+     */
+    get end() {
+        return this._end;
+    }
+
+    /**
+     * @returns {Itinerary}
+     */
+    get itinerary() {
+        return this._itinerary;
+    }
+
+    /**
+     * @returns {Boolean}
+     */
+    get isComputing() {
+        return this.itineraryComputing;
+    }
+
+    /**
+     * @param {Object}
+     */
+    set itineraryServer(itineraryServer) {
+        this._itineraryServer = itineraryServer;
+        this.fire(Events.ItineraryServerChanged, itineraryServer);
+    }
+
+    /**
+     * @return {Object}
+     */
+    get itineraryServer() {
+        return this._itineraryServer;
+    }
+
+    /**
+     * @param {Boolean}
+     */
+    set useStairs(useStairs) {
+        this._useStairs = useStairs;
+        this.fire(Events.UseStairsChanged, useStairs);
+    }
+
+    /**
+     * @return {Boolean}
+     */
+    get useStairs() {
+        return this._useStairs;
+    }
+
+    compute() {
+
+        const start = this.start;
+        const end = this.end;
+
+        if (!start || !end) {
+            return;
+        }
+
+        const computingFn = (bool) => {
+            this.itineraryComputing = bool;
+            this.fire(Events.ItineraryComputing, bool);
+        };
+
+        computingFn(true);
+
+        const isIndoor = this._itineraryServer === Servers.Indoor;
+        const useStartLevel = isIndoor && start.level !== null;
+        const useEndLevel = isIndoor && end.level !== null;
+        const useStairs = !isIndoor || this.useStairs;
+
+        const url = this._itineraryServer.routingUrl
+            + '/route/v1/walking/'
+            + start.lng + ',' + start.lat + (useStartLevel ? ',' + start.level : '')
+            + ';'
+            + end.lng + ',' + end.lat + (useEndLevel ? ',' + end.level : '')
+            + '?geometries=geojson&overview=full'
+            + (isIndoor ? '&useAltitude=false' : '')
+            + (!useStairs ? '&useStairs=false' : '');
+
+
+        fetch(url)
+            .then(response => response.json())
+            .catch(error => {
+                computingFn(false);
+                this.fire(Events.ServerError, error);
+            })
+            .then(json => {
+                if (json.code !== 'Ok') {
+                    computingFn(false);
+                    this.remove();
+                    this.fire(Events.ItineraryNotFound);
+                    return;
+                }
+                const itinerary = OsrmUtils.createItineraryFromJson(json, start, end);
+
+                this.itineraryComputing = false;
+                this.fire(Events.ItineraryComputing, false);
+
+                this._itinerary = itinerary;
+                this.fire(Events.ItineraryChanged, itinerary);
+
+                ProvidersInterface.feed(EventType.Network, itinerary);
+            });
+    }
+
+    remove() {
+        this._itinerary = null;
+        this.fire(Events.ItineraryChanged, null);
+        ProvidersInterface.feed(EventType.Network, null);
+    }
+
+}
+
+export default ItineraryStore;