@wemap/providers 3.1.22 → 3.2.1

package/debug/map/helpers/ItineraryMapHandler.js

@@ -1,9 +1,9 @@
-import mapboxgl from 'mapbox-gl';
+import { Map } from 'mapbox-gl';
 
 import { Level } from '@wemap/geo';
+import { MapboxUtils } from '@wemap/map';
 
-import MapboxHelper from '../MapboxHelper';
-import ItineraryStore from '../../stores/ItineraryStore';
+import ItineraryStore from '../../stores/ItineraryStore.js';
 
 class ItineraryMapHandler {
 
@@ -20,7 +20,7 @@ class ItineraryMapHandler {
     };
 
     /**
-     * @param {mapboxgl.Map} map
+     * @param {Map} map
      */
     constructor(map) {
         if (!map) {
@@ -55,8 +55,7 @@ class ItineraryMapHandler {
         });
 
         this.generateLayers(ItineraryMapHandler.SOURCE_ID).forEach(layer => {
-            this.map.addLayer(layer);
-            this.map.indoor.addLayerForFiltering(layer.id);
+            this.map.indoor._addLayerForFiltering(layer);
         });
     }
 
@@ -79,8 +78,8 @@ class ItineraryMapHandler {
                 geometry: {
                     type: 'LineString',
                     coordinates: [
-                        MapboxHelper.coordsToLngLat(itinerary.start),
-                        MapboxHelper.coordsToLngLat(itinerary.nodes[0].coords)
+                        MapboxUtils.coordsToLngLat(itinerary.start),
+                        MapboxUtils.coordsToLngLat(itinerary.nodes[0].coords)
                     ]
                 }
             };
@@ -93,12 +92,12 @@ class ItineraryMapHandler {
              */
             const endFeature = {
                 type: 'Feature',
-                properties: { 'itinerary': 'start' },
+                properties: { 'itinerary': 'end' },
                 geometry: {
                     type: 'LineString',
                     coordinates: [
-                        MapboxHelper.coordsToLngLat(itinerary.nodes[itinerary.nodes.length - 1].coords),
-                        MapboxHelper.coordsToLngLat(itinerary.end)
+                        MapboxUtils.coordsToLngLat(itinerary.nodes[itinerary.nodes.length - 1].coords),
+                        MapboxUtils.coordsToLngLat(itinerary.end)
                     ]
                 }
             };
@@ -111,7 +110,7 @@ class ItineraryMapHandler {
             const itineraryFeatures = itinerary.edges.reduce((acc, edge) => {
 
                 if (!currentFeatureCoordinates || !Level.equalsTo(edge.level, previousEdgeLevel)) {
-                    currentFeatureCoordinates = [MapboxHelper.coordsToLngLat(edge.node1.coords)];
+                    currentFeatureCoordinates = [MapboxUtils.coordsToLngLat(edge.node1.coords)];
                     const feature = {
                         type: 'Feature',
                         properties: { 'itinerary': 'core' },
@@ -127,7 +126,7 @@ class ItineraryMapHandler {
                     previousEdgeLevel = edge.level;
                 }
 
-                currentFeatureCoordinates.push(MapboxHelper.coordsToLngLat(edge.node2.coords));
+                currentFeatureCoordinates.push(MapboxUtils.coordsToLngLat(edge.node2.coords));
 
                 return acc;
 
@@ -158,7 +157,7 @@ class ItineraryMapHandler {
                 properties: { 'start': 'yes' },
                 geometry: {
                     type: 'Point',
-                    coordinates: MapboxHelper.coordsToLngLat(coordinates)
+                    coordinates: MapboxUtils.coordsToLngLat(coordinates)
                 }
             };
             if (coordinates.level !== null) {
@@ -185,7 +184,7 @@ class ItineraryMapHandler {
                 properties: { 'end': 'yes' },
                 geometry: {
                     type: 'Point',
-                    coordinates: MapboxHelper.coordsToLngLat(coordinates)
+                    coordinates: MapboxUtils.coordsToLngLat(coordinates)
                 }
             };
             if (coordinates.level !== null) {
@@ -198,7 +197,7 @@ class ItineraryMapHandler {
     }
 
     /**
-     * @returns {mapboxgl.Layer[]}
+     * @returns {Layer[]}
      */
     generateLayers(sourceId) {
         return [

package/debug/map/helpers/MapClickHandler.js

@@ -1,16 +1,18 @@
-import mapboxgl from 'mapbox-gl';
+import {
+    Map, Popup
+} from 'mapbox-gl';
 
 import {
     Coordinates, Level
 } from '@wemap/geo';
 
-import ItineraryStore from '../../stores/ItineraryStore';
-import UserOnMapHandler from './UserOnMapHandler';
+import ItineraryStore from '../../stores/ItineraryStore.js';
+import UserOnMapHandler from './UserOnMapHandler.js';
 
 class MapClickHandler {
 
     /**
-     * @param {mapboxgl.Map} map
+     * @param {Map} map
      * @param {UserOnMapHandler} userOnMapHandler
      */
     constructor(map, userOnMapHandler) {
@@ -39,15 +41,15 @@ class MapClickHandler {
 
         const coordinates = new Coordinates(e.lngLat.lat, e.lngLat.lng);
 
-        this.popup = new mapboxgl.Popup()
+        this.popup = new Popup()
             .setLngLat(e.lngLat)
             .setDOMContent(this._generatePopupHtml(coordinates))
             .addTo(this.map);
     }
 
     _updateCoordinatesWithMapLevel(coordinates) {
-        if (this.map.getLevel() !== null) {
-            coordinates.level = new Level(this.map.getLevel());
+        if (this.map.indoor.getLevel() !== null) {
+            coordinates.level = new Level(this.map.indoor.getLevel());
         }
     }
 

package/debug/map/helpers/UserOnMapHandler.js

@@ -1,94 +1,38 @@
-import mapboxgl from 'mapbox-gl';
-
-import {
-    Attitude, UserPosition, Constants
-} from '@wemap/geo';
-import { deg2rad } from '@wemap/maths';
+import { Map } from 'mapbox-gl';
+import { GeolocationLayer } from '@wemap/map';
 
 import {
     PositionSmoother, ProvidersInterface, EventType
-} from '../../..';
-
-import ItineraryStore from '../../stores/ItineraryStore';
-import MapboxHelper from '../MapboxHelper';
+} from '../../../index.js';
 
-/**
- * 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;
+    smoother;
+    attitudeProviderId;
+    positionProviderId;
 
     /**
-     * @param {mapboxgl.Map} map
-     * @param {HTMLDivElement} mapContainer
+     * @param {Map} map
      */
-    constructor(map, mapContainer) {
-        if (!map) {
-            throw new TypeError('map cannot be null');
-        }
-
-        this.map = map;
-        this.mapContainer = mapContainer;
-        this.itineraryStore = ItineraryStore.instance;
+    constructor(map) {
 
-        map.on('zoom', () => (this.positionAccuracyDirty = true));
-        map.on('dragstart', () => (this.trackUserLocation = false));
-        map.on('level', () => (this.levelForPositionDirty = true));
+        this.geolocationLayer = new GeolocationLayer(map);
 
-        this.createDomPosition();
-        this.createButtons();
+        this.geolocationLayer.onStartButtonClicked = layer => this.start(layer);
+        this.geolocationLayer.onStopButtonClicked = layer => this.stop(layer);
     }
 
+    start() {
 
-    componentDidMount() {
-        this.renderLoop();
-    }
-
-    componentWillUnmount() {
-        cancelAnimationFrame(this.renderLoopId);
-    }
-
-
-    /**
-     * Geo location logic
-     */
-
-    startPositioning() {
-
-        if (this.positioningStarted) {
-            return;
-        }
-        this.positioningStarted = true;
-
+        this.geolocationLayer.startRenderLoop();
 
         /**
          * Attitude
          */
-
-        this.attitudeProvidersId = ProvidersInterface.addEventListener(
+        this.attitudeProviderId = ProvidersInterface.addEventListener(
             EventType.AbsoluteAttitude,
-            attitude => this.updateAttitude(attitude)
+            attitude => this.geolocationLayer.updateAttitude(attitude)
         );
 
         // There is no sense to show the last known attitude on the map
@@ -99,372 +43,34 @@ class UserOnMapHandler {
          * 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.smoother = new PositionSmoother(position => this.geolocationLayer.updatePosition(position));
 
-        this.positionProvidersId = ProvidersInterface.addEventListener(
+        this.positionProviderId = ProvidersInterface.addEventListener(
             EventType.AbsolutePosition,
-            position => {
-                this.smoother.feed(position);
-
-                if (!firstPositionFound) {
-                    firstPositionFn();
-                    firstPositionFound = true;
-                }
-            }
+            position => this.smoother.feed(position)
         );
 
-        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');
-
+        this.geolocationLayer.updatePosition(ProvidersInterface.getLastKnown(EventType.AbsolutePosition));
     }
 
-    stopPositioning() {
-
-        if (!this.positioningStarted) {
-            return;
-        }
-        this.positioningStarted = false;
+    stop() {
 
+        this.geolocationLayer.stopRenderLoop();
 
         /**
          * Attitude
          */
 
-        ProvidersInterface.removeEventListener(this.attitudeProvidersId);
+        ProvidersInterface.removeEventListener(this.attitudeProviderId);
 
 
         /**
          * Position
          */
 
-        ProvidersInterface.removeEventListener(this.positionProvidersId);
+        ProvidersInterface.removeEventListener(this.positionProviderId);
         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
-     */
-
-    renderLoop = () => {
-        this.renderPosition();
-        this.renderPositionAccuracy();
-        this.renderOrientation();
-        this.renderCameraCenter();
-        this.renderLoopId = requestAnimationFrame(this.renderLoop);
     }
 
-    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;
-    }
-
-    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;
-    }
-
-    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;
-    }
-
-    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;