@wemap/providers 3.1.23 → 3.2.1

package/babel.config.json

@@ -0,0 +1,16 @@
+{
+    "presets": [
+        [
+            "@babel/preset-env",
+            {
+                "targets": {
+                    "node": "current"
+                }
+            }
+        ],
+        "@babel/preset-react"
+    ],
+    "plugins": [
+        "@babel/plugin-proposal-class-properties"
+    ]
+}

package/debug/MainComponent.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import { ProvidersInterface } from '..';
+import { ProvidersInterface } from '../index.js';
 
-import MapComponent from './map/MapComponent';
-import DetailsComponent from './details/DetailsComponent';
+import MapComponent from './map/MapComponent.jsx';
+import DetailsComponent from './details/DetailsComponent.jsx';
 
-import './Common.css';
+import './css/App.css';
 
 class MainComponent extends React.Component {
 
@@ -14,7 +14,7 @@ class MainComponent extends React.Component {
     constructor(props, context) {
         super(props, context);
         this.state = {
-            details: true,
+            details: false,
             mapHandler: null
         };
 

package/debug/components/AbsoluteAttitudeComponent.jsx

@@ -6,13 +6,13 @@ import {
 } from '@wemap/geo';
 import { TimeUtils } from '@wemap/utils';
 
-import ProvidersLogger from '../../src/events/ProvidersLogger';
+import ProvidersLoggerOld from '../../src/events/ProvidersLoggerOld.js';
 import {
     AbsoluteAttitudeFromBrowser, AbsoluteAttitudeFromRelAtt, AbsoluteAttitude, AbsolutePosition
-} from '../../src/Providers';
-import Utils from './Utils';
+} from '../../src/Providers.js';
+import Utils from './Utils.js';
 
-ProvidersLogger.enabled = true;
+ProvidersLoggerOld.enabled = true;
 
 class AbsoluteAttitudeComponent extends React.Component {
 
@@ -100,7 +100,7 @@ class AbsoluteAttitudeComponent extends React.Component {
             const beta = this.state.deviceorientationabsolute.beta;
             const gamma = this.state.deviceorientationabsolute.gamma;
 
-            if (alpha && beta && gamma) {
+            if (typeof alpha === 'number' && typeof beta === 'number' && typeof gamma === 'number') {
                 rawRender = <p>alpha: {alpha.toFixed(2)}, <br />
                     beta: {beta.toFixed(2)}, <br />
                     gamma: {gamma.toFixed(2)}</p>;

package/debug/components/AbsolutePositionComponent.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { AbsolutePosition } from '../../src/Providers';
-import Utils from './Utils';
-import NavigationConfig from './NavigationConfig';
-import MapComponent from '../map/MapComponent';
+import { AbsolutePosition, AbsoluteAttitude } from '../../src/Providers.js';
+import Utils from './Utils.js';
+import NavigationConfig from './NavigationConfig.js';
+import MapComponent from '../map/MapComponent.jsx';
 
 
 class AbsolutePositionComponent extends React.Component {
@@ -16,7 +16,8 @@ class AbsolutePositionComponent extends React.Component {
     componentDidMount() {
         this.providerId = AbsolutePosition.addEventListener(
             events => this.onNewPosition(events[0]),
-            error => this.setState({ absolutePosition: error })
+            error => this.setState({ absolutePosition: error }),
+            false
         );
     }
 
@@ -26,9 +27,6 @@ class AbsolutePositionComponent extends React.Component {
 
     onNewPosition = position => {
         this.setState({ absolutePosition: position });
-        if (this.map) {
-            this.map.updatePosition(position.data);
-        }
     };
 
     handlePosSubmit() {
@@ -36,7 +34,7 @@ class AbsolutePositionComponent extends React.Component {
     }
 
     handleHeadingSubmit() {
-        AbsolutePosition.feed(NavigationConfig.INITIAL_HEADING);
+        AbsoluteAttitude.feed(NavigationConfig.INITIAL_HEADING);
     }
 
     render() {

package/debug/components/GnssWifiComponent.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import Utils from './Utils';
-import MapComponent from '../map/MapComponent';
-import ProvidersLogger from '../../src/events/ProvidersLogger';
-import { GnssWifi } from '../../src/Providers';
+import Utils from './Utils.js';
+import MapComponent from '../map/MapComponent.jsx';
+import ProvidersLoggerOld from '../../src/events/ProvidersLoggerOld.js';
+import { GnssWifi } from '../../src/Providers.js';
 
-ProvidersLogger.enabled = true;
+ProvidersLoggerOld.enabled = true;
 class GnssWifiComponent extends React.Component {
 
     constructor(props, context) {

package/debug/components/ImuComponent.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import Utils from './Utils';
-import ProvidersLogger from '../../src/events/ProvidersLogger';
+import Utils from './Utils.js';
+import ProvidersLoggerOld from '../../src/events/ProvidersLoggerOld.js';
 import {
     Accelerometer, Gyroscope
-} from '../../src/Providers';
+} from '../../src/Providers.js';
 
-ProvidersLogger.enabled = true;
+ProvidersLoggerOld.enabled = true;
 
 class ImuComponent extends React.Component {
 

package/debug/components/InclinationComponent.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import Utils from './Utils';
-import ProvidersLogger from '../../src/events/ProvidersLogger';
+import Utils from './Utils.js';
+import ProvidersLoggerOld from '../../src/events/ProvidersLoggerOld.js';
 import {
     InclinationFromAcc, InclinationFromRelativeAttitude, Inclination
-} from '../../src/Providers';
+} from '../../src/Providers.js';
 
 
 class InclinationComponent extends React.Component {
@@ -12,7 +12,7 @@ class InclinationComponent extends React.Component {
 
     constructor(props, context) {
         super(props, context);
-        ProvidersLogger.enabled = false;
+        ProvidersLoggerOld.enabled = false;
 
         this.state = {
             inclination: null,

package/debug/components/RelativeAttitudeComponent.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import Utils from './Utils';
-import ProvidersLogger from '../../src/events/ProvidersLogger';
+import Utils from './Utils.js';
+import ProvidersLoggerOld from '../../src/events/ProvidersLoggerOld.js';
 import {
     RelativeAttitudeFromBrowser, RelativeAttitudeFromEkf, RelativeAttitude
-} from '../../src/Providers';
+} from '../../src/Providers.js';
 
-ProvidersLogger.enabled = true;
+ProvidersLoggerOld.enabled = true;
 
 class RelativeAttitudeComponent extends React.Component {
 

package/debug/components/StepDetectionComponent.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import Utils from './Utils';
-import ProvidersLogger from '../../src/events/ProvidersLogger';
-import { StepDetection } from '../../src/Providers';
+import Utils from './Utils.js';
+import ProvidersLoggerOld from '../../src/events/ProvidersLoggerOld.js';
+import { StepDetection } from '../../src/Providers.js';
 
-ProvidersLogger.enabled = true;
+ProvidersLoggerOld.enabled = true;
 
 class StepDetectionComponent extends React.Component {
 

package/debug/components/Utils.js

@@ -3,7 +3,7 @@ import React from 'react'; // eslint-disable-line no-unused-vars
 import { rad2deg } from '@wemap/maths';
 import { OsrmUtils } from '@wemap/osm';
 
-import ProviderEvent from '../../src/events/ProviderEvent';
+import ProviderEvent from '../../src/events/ProviderEvent.js';
 
 const NOT_AVAILABLE_STR = 'Not available';
 

package/debug/{Common.css → css/App.css}

@@ -48,46 +48,6 @@ p {
     font-size: 16px;
 }
 
-#location-marker {
-    width: 14px;
-    height: 14px;
-    top: -7px;
-    left: -7px;
-    position: absolute;
-    border-radius: 50%;
-    background: #008DF1;
-    border:1px solid #000000AA;    
-}
-
-#location-marker.inaccurate {
-    background: #AAAAAA;
-}
-
-#location-marker-compass {
-    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;
-}
-
-#location-marker-accuracy {
-    position: absolute;
-    border-radius: 50%;
-    background: #008DF134;
-    border:1px solid #00000034;    
-}
-
-#location-marker-accuracy.inaccurate {
-    background: #AAAAAA34;
-}
-
 .loader {
     display: inline-block;
     border: 3px solid #f3f3f3; /* Light grey */
@@ -120,10 +80,6 @@ p {
     border-color: blue;
 }
 
-.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate-remove .mapboxgl-ctrl-icon {
-	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E%3C/svg%3E")
-}
-
 .map-click-list-element {
     cursor: pointer;
     -webkit-user-select: none;

package/debug/css/UserOnMapHandler.css

@@ -0,0 +1,43 @@
+#location-marker {
+    width: 14px;
+    height: 14px;
+    top: -7px;
+    left: -7px;
+    position: absolute;
+    border-radius: 50%;
+    background: #008DF1;
+    border:1px solid #000000AA;    
+}
+
+#location-marker.inaccurate {
+    background: #AAAAAA;
+}
+
+#location-marker-compass {
+    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;
+}
+
+#location-marker-accuracy {
+    position: absolute;
+    border-radius: 50%;
+    background: #008DF134;
+    border:1px solid #00000034;    
+}
+
+#location-marker-accuracy.inaccurate {
+    background: #AAAAAA34;
+}
+
+.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate-remove .mapboxgl-ctrl-icon {
+	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E%3C/svg%3E")
+}

package/debug/details/DetailsAttitudeComponent.jsx

@@ -9,7 +9,7 @@ import { TimeUtils } from '@wemap/utils';
 
 import {
     ProvidersInterface, EventType
-} from '../..';
+} from '../../index.js';
 
 const Orientations = [
     {

package/debug/details/DetailsComponent.jsx

@@ -1,11 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import '../Common.css';
-import MapHandler from '../map/MapHandler';
-import DetailsPositionComponent from './DetailsPositionComponent';
-import DetailsAttitudeComponent from './DetailsAttitudeComponent';
-import ItineraryComponent from './ItineraryComponent';
+import MapHandler from '../map/MapHandler.js';
+import DetailsPositionComponent from './DetailsPositionComponent.jsx';
+import DetailsAttitudeComponent from './DetailsAttitudeComponent.jsx';
+import ItineraryComponent from './ItineraryComponent.jsx';
 
 
 class DetailsComponent extends React.Component {

package/debug/details/DetailsPositionComponent.jsx

@@ -9,9 +9,9 @@ import { TimeUtils } from '@wemap/utils';
 
 import {
     ProvidersInterface, EventType
-} from '../..';
+} from '../../index.js';
 
-import Utils from '../components/Utils';
+import Utils from '../components/Utils.js';
 
 
 const NOT_AVAILABLE_STR = Utils.NOT_AVAILABLE_STR;

package/debug/details/ItineraryComponent.jsx

@@ -3,10 +3,8 @@ import React from 'react';
 
 import { Level } from '@wemap/geo';
 
-import ItineraryStore from '../stores/ItineraryStore';
-import MapHandler from '../map/MapHandler';
-
-const ItineraryServers = ItineraryStore.Servers;
+import ItineraryStore from '../stores/ItineraryStore.js';
+import MapHandler from '../map/MapHandler.js';
 
 const Mode = {
     Config: 'config',
@@ -68,8 +66,8 @@ class ItineraryComponent extends React.PureComponent {
 
         const transformLevel = mapLevel => mapLevel === null ? '' : mapLevel.toString();
         const map = this.props.mapHandler.mapboxInstance;
-        this.setState({ endLevel: transformLevel(map.getLevel()) });
-        map.on('level', () => this.setState({ endLevel: transformLevel(map.getLevel()) }));
+        this.setState({ endLevel: transformLevel(map.indoor.getLevel()) });
+        map.on('indoor.level.changed', () => this.setState({ endLevel: transformLevel(map.indoor.getLevel()) }));
     }
 
     onItineraryChanged(itinerary) {
@@ -85,9 +83,7 @@ class ItineraryComponent extends React.PureComponent {
             this.itineraryStore.start = position;
             this.setState({ mode: Mode.Config });
         } else if (this.state.mode === Mode.SelectEndOnMap) {
-            if (this.itineraryStore.itineraryServer === ItineraryServers.Indoor
-                && this.state.endLevel !== ''
-            ) {
+            if (this.state.endLevel !== '') {
                 position.level = Level.fromString(this.state.endLevel);
             }
             this.itineraryStore.end = position;
@@ -150,15 +146,17 @@ class ItineraryComponent extends React.PureComponent {
                     </div>
                     : null}
                 <div>
-                    {this.renderServer()}
+                    {this.renderStart(lockedMode)}
                 </div>
 
                 <div style={{ marginTop: '5px' }}>
-                    {this.renderStart(lockedMode)}
+                    {this.renderEnd(lockedMode)}
                 </div>
 
                 <div style={{ marginTop: '5px' }}>
-                    {this.renderEnd(lockedMode)}
+                    <img id='wheelchair-icon'
+                        className={!this.itineraryStore.useStairs ? 'selected' : null}
+                        onClick={() => (this.itineraryStore.useStairs = !this.itineraryStore.useStairs)} />
                 </div>
 
                 <div style={{
@@ -178,44 +176,6 @@ class ItineraryComponent extends React.PureComponent {
         );
     }
 
-    renderServer() {
-
-        const serversList = Object.values(ItineraryServers);
-        const serverValue = serversList.indexOf(this.itineraryStore.itineraryServer);
-
-        const handleServerSelectChange = (event) => {
-            const server = serversList[event.target.value];
-            this.itineraryStore.itineraryServer = server;
-        };
-
-        const isIndoor = this.itineraryStore.itineraryServer === ItineraryServers.Indoor;
-
-        return (
-            <>
-                Server:
-                <select
-                    style={{ marginLeft: '5px' }}
-                    value={serverValue}
-                    onChange={handleServerSelectChange}>
-                    {
-                        serversList.map((server, index) =>
-                            <option key={index}
-                                value={index}>
-                                {server.name}
-                            </option>
-                        )
-                    }
-                </select>
-
-                {isIndoor ? (
-                    <img id='wheelchair-icon'
-                        className={!this.itineraryStore.useStairs ? 'selected' : null}
-                        onClick={() => (this.itineraryStore.useStairs = !this.itineraryStore.useStairs)} />
-                ) : null}
-            </>
-        );
-    }
-
     renderStart(lockedMode) {
 
         let buttons;
@@ -290,30 +250,11 @@ class ItineraryComponent extends React.PureComponent {
             );
         }
 
-        const isIndoor = this.itineraryStore.itineraryServer === ItineraryServers.Indoor;
-        const showEndLevel = isIndoor && !this.itineraryStore.end;
-
         return (
             <>
                 <div>
                     End:
                     <span style={{ marginLeft: '5px' }}>{buttons}</span>
-                    {
-                        showEndLevel ? (
-                            <span style={{ marginLeft: '5px' }}>
-                                level:
-                                <input
-                                    disabled={lockedMode && !this.state.mode === Mode.SelectEndOnMap}
-                                    value={this.state.endLevel}
-                                    onChange={event => this.setState({ endLevel: event.target.value })}
-                                    style={{
-                                        marginLeft: '5px',
-                                        width: '30px'
-                                    }}
-                                    type='number' />
-                            </span>
-                        ) : null
-                    }
                 </div>
             </>
         );

package/debug/index.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import AbsoluteAttitudeComponent from './components/AbsoluteAttitudeComponent';
-import AbsolutePositionComponent from './components/AbsolutePositionComponent';
-import GnssWifiComponent from './components/GnssWifiComponent';
-import ImuComponent from './components/ImuComponent';
-import InclinationComponent from './components/InclinationComponent';
-import MainComponent from './MainComponent';
-import RelativeAttitudeComponent from './components/RelativeAttitudeComponent';
-import StepDetectionComponent from './components/StepDetectionComponent';
+import AbsoluteAttitudeComponent from './components/AbsoluteAttitudeComponent.jsx';
+import AbsolutePositionComponent from './components/AbsolutePositionComponent.jsx';
+import GnssWifiComponent from './components/GnssWifiComponent.jsx';
+import ImuComponent from './components/ImuComponent.jsx';
+import InclinationComponent from './components/InclinationComponent.jsx';
+import MainComponent from './MainComponent.jsx';
+import RelativeAttitudeComponent from './components/RelativeAttitudeComponent.jsx';
+import StepDetectionComponent from './components/StepDetectionComponent.jsx';
 
 const createReactElement = (component, container) => ReactDOM.render(
     React.createElement(component, {}, null),

package/debug/map/MapComponent.jsx

@@ -1,15 +1,17 @@
 import React from 'react';
-import mapboxgl from 'mapbox-gl';
-import 'mapbox-gl-css';
+import { Map } from 'mapbox-gl';
+import {
+    Indoor, IndoorControl, IndoorMap
+} from 'mapbox-gl-indoor';
 import PropTypes from 'prop-types';
 import noop from 'lodash.noop';
 
-import MapHandler from './MapHandler';
+import MapHandler from './MapHandler.js';
 
-mapboxgl.accessToken
-    = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
+import 'mapbox-gl/dist/mapbox-gl.css';
 
-const BELOW_LAYER_ID = 'housenum-label';
+const accessToken
+    = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
 
 class MapComponent extends React.Component {
     static propTypes = {
@@ -24,42 +26,48 @@ class MapComponent extends React.Component {
     };
 
     componentDidMount() {
-        this.map = new mapboxgl.Map({
+        this.map = new Map({
+            accessToken,
             container: this.mapContainer,
             style: 'mapbox://styles/mapbox/streets-v10',
             maxZoom: this.props.maxZoom
         });
+        this.map.indoor = new Indoor(this.map);
 
-        this.mapHandler = new MapHandler(this.map, this.mapContainer);
-        this.mapHandler.componentDidMount();
-
+        this.mapHandler = new MapHandler(this.map);
 
         const mapLoadedFn = () => this.props.onMapLoaded(this.mapHandler);
 
         this.map.on('load', () => {
             if (this.props.indoorMaps && this.props.indoorMaps.length > 0) {
-                this.loadIndoorMaps(this.props.indoorMaps)
+                this._loadIndoorMaps(this.props.indoorMaps)
                     .then(mapLoadedFn);
             } else {
                 mapLoadedFn();
             }
         });
 
-        this.map.addControl(new mapboxgl.IndoorControl());
+        this.map.addControl(new IndoorControl(this.map.indoor));
 
     }
 
     componentWillUnmount() {
-        this.mapHandler.componentWillUnmount();
         this.map.remove();
     }
 
-    loadIndoorMaps(mapsPaths) {
+    _loadIndoorMaps(mapsPaths) {
+        const beforeLayerId = 'housenum-label';
+        const layersToHide = ['poi-scalerank4-l15', 'poi-scalerank4-l1', 'poi-scalerank3', 'road-label-small'];
+
         return Promise.all(
             mapsPaths.map(mapPath =>
                 fetch(mapPath)
                     .then(res => res.json())
-                    .then(geojson => this.map.indoor.addMap(geojson, null, BELOW_LAYER_ID)))
+                    .then(geojson => this.map.indoor.addMap(IndoorMap.fromGeojson(geojson, {
+                        beforeLayerId,
+                        layersToHide,
+                        showFeaturesWithEmptyLevel: true
+                    }))))
         );
     }
 

package/debug/map/MapHandler.js

@@ -1,10 +1,10 @@
-import mapboxgl from 'mapbox-gl';
+import { Map } from 'mapbox-gl';
 
 import { Coordinates } from '@wemap/geo';
 
-import ItineraryMapHandler from './helpers/ItineraryMapHandler';
-import UserOnMapHandler from './helpers/UserOnMapHandler';
-import MapClickHandler from './helpers/MapClickHandler';
+import ItineraryMapHandler from './helpers/ItineraryMapHandler.js';
+import UserOnMapHandler from './helpers/UserOnMapHandler.js';
+import MapClickHandler from './helpers/MapClickHandler.js';
 
 class MapHandler {
 
@@ -13,24 +13,15 @@ class MapHandler {
 
     /**
      *
-     * @param {mapboxgl.Map} map
-     * @param {HTMLDivElement} mapContainer
+     * @param {Map} map
      */
-    constructor(map, mapContainer) {
+    constructor(map) {
         this.itineraryMapHandler = new ItineraryMapHandler(map);
-        this.userOnMapHandler = new UserOnMapHandler(map, mapContainer);
+        this.userOnMapHandler = new UserOnMapHandler(map);
         this.mapClickHandler = new MapClickHandler(map, this.userOnMapHandler);
         this.map = map;
     }
 
-    componentDidMount() {
-        this.userOnMapHandler.componentDidMount();
-    }
-
-    componentWillUnmount() {
-        this.userOnMapHandler.componentWillUnmount();
-    }
-
     /**
      * @param {Function} fn
      */