@wemap/providers 3.1.2 → 3.1.4

package/debug/map/helpers/ItineraryMapHandler.js

@@ -0,0 +1,284 @@
+import mapboxgl from 'mapbox-gl';
+
+import { Level } from '@wemap/geo';
+
+import MapboxHelper from '../MapboxHelper';
+import ItineraryStore from '../../stores/ItineraryStore';
+
+class ItineraryMapHandler {
+
+    static SOURCE_ID = 'itinerary';
+
+    static ITINERARY_LAYER_ID = 'itinerary';
+    static ITINERARY_START_END_LAYER_ID = 'itinerary-start-end-segments';
+    static START_LAYER_ID = 'itinerary-start';
+    static END_LAYER_ID = 'itinerary-end';
+
+    mapboxSourceData = {
+        type: 'FeatureCollection',
+        features: []
+    };
+
+    /**
+     * @param {mapboxgl.Map} map
+     */
+    constructor(map) {
+        if (!map) {
+            throw new TypeError('map cannot be null');
+        }
+
+        map.on('load', () => this.onMapLoaded());
+
+        this.map = map;
+        this.itineraryStore = ItineraryStore.instance;
+
+    }
+
+    onMapLoaded() {
+        this.initializeMapSourceAndLayers();
+
+        this.drawItineraryStart();
+        this.itineraryStore.on(ItineraryStore.Events.StartChanged, () => this.drawItineraryStart());
+
+        this.drawItineraryEnd();
+        this.itineraryStore.on(ItineraryStore.Events.EndChanged, () => this.drawItineraryEnd());
+
+        this.drawItinerary();
+        this.itineraryStore.on(ItineraryStore.Events.ItineraryChanged, () => this.drawItinerary());
+    }
+
+    initializeMapSourceAndLayers() {
+
+        this.map.addSource(ItineraryMapHandler.SOURCE_ID, {
+            type: 'geojson',
+            data: this.mapboxSourceData
+        });
+
+        this.generateLayers(ItineraryMapHandler.SOURCE_ID).forEach(layer => {
+            this.map.addLayer(layer);
+            this.map.indoor.addLayerForFiltering(layer.id);
+        });
+    }
+
+    drawItinerary() {
+
+        this.mapboxSourceData.features = this.mapboxSourceData.features.filter(feature =>
+            !feature.properties || !feature.properties.itinerary
+        );
+
+        const { itinerary } = this.itineraryStore;
+
+        if (itinerary !== null) {
+
+            /**
+             * Start to Network segment
+             */
+            const startFeature = {
+                type: 'Feature',
+                properties: { 'itinerary': 'start' },
+                geometry: {
+                    type: 'LineString',
+                    coordinates: [
+                        MapboxHelper.coordsToLngLat(itinerary.start),
+                        MapboxHelper.coordsToLngLat(itinerary.nodes[0].coords)
+                    ]
+                }
+            };
+            if (itinerary.start.level !== null) {
+                startFeature.properties.level = itinerary.start.level.toString();
+            }
+
+            /**
+             * Network to End segment
+             */
+            const endFeature = {
+                type: 'Feature',
+                properties: { 'itinerary': 'start' },
+                geometry: {
+                    type: 'LineString',
+                    coordinates: [
+                        MapboxHelper.coordsToLngLat(itinerary.nodes[itinerary.nodes.length - 1].coords),
+                        MapboxHelper.coordsToLngLat(itinerary.end)
+                    ]
+                }
+            };
+            if (itinerary.end.level !== null) {
+                endFeature.properties.level = itinerary.end.level.toString();
+            }
+
+            let previousEdgeLevel = null;
+            let currentFeatureCoordinates;
+            const itineraryFeatures = itinerary.edges.reduce((acc, edge) => {
+
+                if (!currentFeatureCoordinates || !Level.equalsTo(edge.level, previousEdgeLevel)) {
+                    currentFeatureCoordinates = [MapboxHelper.coordsToLngLat(edge.node1.coords)];
+                    const feature = {
+                        type: 'Feature',
+                        properties: { 'itinerary': 'core' },
+                        geometry: {
+                            type: 'LineString',
+                            coordinates: currentFeatureCoordinates
+                        }
+                    };
+                    if (edge.level !== null) {
+                        feature.properties.level = edge.level.toString();
+                    }
+                    acc.push(feature);
+                    previousEdgeLevel = edge.level;
+                }
+
+                currentFeatureCoordinates.push(MapboxHelper.coordsToLngLat(edge.node2.coords));
+
+                return acc;
+
+            }, []);
+
+            this.mapboxSourceData.features.push(
+                ...itineraryFeatures,
+                startFeature,
+                endFeature
+            );
+        }
+
+        this.map.getSource(ItineraryMapHandler.SOURCE_ID).setData(this.mapboxSourceData);
+    }
+
+
+    drawItineraryStart() {
+
+        this.mapboxSourceData.features = this.mapboxSourceData.features.filter(feature =>
+            !feature.properties || feature.properties.start !== 'yes'
+        );
+
+        const coordinates = this.itineraryStore.start;
+
+        if (coordinates !== null) {
+            const feature = {
+                type: 'Feature',
+                properties: { 'start': 'yes' },
+                geometry: {
+                    type: 'Point',
+                    coordinates: MapboxHelper.coordsToLngLat(coordinates)
+                }
+            };
+            if (coordinates.level !== null) {
+                feature.properties.level = coordinates.level.toString();
+            }
+            this.mapboxSourceData.features.push(feature);
+        }
+
+        this.map.getSource(ItineraryMapHandler.SOURCE_ID).setData(this.mapboxSourceData);
+    }
+
+
+    drawItineraryEnd() {
+
+        this.mapboxSourceData.features = this.mapboxSourceData.features.filter(feature =>
+            !feature.properties || feature.properties.end !== 'yes'
+        );
+
+        const coordinates = this.itineraryStore.end;
+
+        if (coordinates !== null) {
+            const feature = {
+                type: 'Feature',
+                properties: { 'end': 'yes' },
+                geometry: {
+                    type: 'Point',
+                    coordinates: MapboxHelper.coordsToLngLat(coordinates)
+                }
+            };
+            if (coordinates.level !== null) {
+                feature.properties.level = coordinates.level.toString();
+            }
+            this.mapboxSourceData.features.push(feature);
+        }
+
+        this.map.getSource(ItineraryMapHandler.SOURCE_ID).setData(this.mapboxSourceData);
+    }
+
+    /**
+     * @returns {mapboxgl.Layer[]}
+     */
+    generateLayers(sourceId) {
+        return [
+            {
+                id: ItineraryMapHandler.ITINERARY_LAYER_ID,
+                type: 'line',
+                source: sourceId,
+                filter: [
+                    'filter-==',
+                    'itinerary',
+                    'core'
+                ],
+                paint: {
+                    'line-color': '#039be5',
+                    'line-width': 2
+                },
+                layout: {
+                    'line-join': 'round',
+                    'line-cap': 'round'
+                }
+            },
+            {
+                id: ItineraryMapHandler.ITINERARY_START_END_LAYER_ID,
+                type: 'line',
+                source: sourceId,
+                filter: [
+                    'filter-in-small',
+                    'itinerary', [
+                        'literal',
+                        [
+                            'start',
+                            'end'
+                        ]
+                    ]
+                ],
+                paint: {
+                    'line-color': '#039be5',
+                    'line-dasharray': [
+                        1,
+                        3
+                    ],
+                    'line-width': 2
+                },
+                layout: {
+                    'line-join': 'round',
+                    'line-cap': 'round'
+                }
+            },
+            {
+                id: ItineraryMapHandler.START_LAYER_ID,
+                type: 'symbol',
+                source: sourceId,
+                filter: [
+                    'filter-==',
+                    'start',
+                    'yes'
+                ],
+                layout: {
+                    'icon-allow-overlap': true,
+                    'symbol-placement': 'point',
+                    'icon-image': 'hu-main-2',
+                    'icon-anchor': 'bottom'
+                }
+            }, {
+                id: ItineraryMapHandler.END_LAYER_ID,
+                type: 'symbol',
+                source: sourceId,
+                filter: [
+                    'filter-==',
+                    'end',
+                    'yes'
+                ],
+                layout: {
+                    'icon-allow-overlap': true,
+                    'symbol-placement': 'point',
+                    'icon-image': 'nz-state-2',
+                    'icon-anchor': 'bottom'
+                }
+            }
+        ];
+    }
+}
+export default ItineraryMapHandler;

package/debug/map/helpers/MapClickHandler.js

@@ -0,0 +1,119 @@
+import mapboxgl from 'mapbox-gl';
+
+import {
+    Coordinates, Level
+} from '@wemap/geo';
+
+import ItineraryStore from '../../stores/ItineraryStore';
+import UserOnMapHandler from './UserOnMapHandler';
+
+class MapClickHandler {
+
+    /**
+     * @param {mapboxgl.Map} map
+     * @param {UserOnMapHandler} userOnMapHandler
+     */
+    constructor(map, userOnMapHandler) {
+        if (!map) {
+            throw new TypeError('map cannot be null');
+        }
+
+        map.on('contextmenu', e => this._onContextmenu(e));
+
+        this.map = map;
+
+        this.itineraryStore = ItineraryStore.instance;
+        this.userOnMapHandler = userOnMapHandler;
+    }
+
+    _onContextmenu(e) {
+
+        if (this.popup) {
+            this.popup.remove();
+            this.popup = null;
+        }
+
+        if (this.itineraryStore.itinerary || this.itineraryStore.itineraryComputing) {
+            return;
+        }
+
+        const coordinates = new Coordinates(e.lngLat.lat, e.lngLat.lng);
+
+        this.popup = new mapboxgl.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());
+        }
+    }
+
+    _generatePopupHtml(coordinates) {
+
+        const container = document.createElement('div');
+
+        const navigateButton = document.createElement('div');
+        navigateButton.id = 'navigate-to-this-point';
+        navigateButton.innerHTML = 'Navigate to this point';
+        navigateButton.classList.add('map-click-list-element');
+        navigateButton.onclick = () => {
+            this._updateCoordinatesWithMapLevel(coordinates);
+            this._navigateTo(coordinates);
+            if (this.popup) {
+                this.popup.remove();
+            }
+        };
+        container.appendChild(navigateButton);
+
+        const startButton = document.createElement('div');
+        startButton.id = 'start-from-there';
+        startButton.innerHTML = 'Start from there';
+        startButton.classList.add('map-click-list-element');
+        startButton.onclick = () => {
+            this._updateCoordinatesWithMapLevel(coordinates);
+            this.itineraryStore.start = coordinates;
+            this._eventuallyCompute();
+            if (this.popup) {
+                this.popup.remove();
+            }
+        };
+        container.appendChild(startButton);
+
+        const endButton = document.createElement('div');
+        endButton.id = 'end-to-there';
+        endButton.innerHTML = 'End to there';
+        endButton.classList.add('map-click-list-element');
+        endButton.onclick = () => {
+            this._updateCoordinatesWithMapLevel(coordinates);
+            this.itineraryStore.end = coordinates;
+            this._eventuallyCompute();
+            if (this.popup) {
+                this.popup.remove();
+            }
+        };
+        container.appendChild(endButton);
+
+        return container;
+    }
+
+    _navigateTo(coordinates) {
+
+        this.itineraryStore.end = coordinates;
+
+        this.itineraryStore.retrieveStartFromUserLocation()
+            .then(() => {
+                this.itineraryStore.compute();
+                this.userOnMapHandler.startPositioning();
+            });
+    }
+
+    _eventuallyCompute() {
+        if (!this.itineraryStore.itinerary && this.itineraryStore.start && this.itineraryStore.end) {
+            this.itineraryStore.compute();
+        }
+    }
+}
+export default MapClickHandler;