@wemap/positioning 2.4.7 → 2.5.0

package/package.json

@@ -8,10 +8,11 @@
     "Guillaume Pannetier <guillaume.pannetier@getwemap.com>"
   ],
   "dependencies": {
-    "@wemap/geo": "^0.3.7",
+    "@wemap/geo": "^0.3.9",
+    "@wemap/graph": "^1.0.1",
     "@wemap/logger": "^0.1.6",
     "@wemap/maths": "^0.2.1",
-    "@wemap/osm": "^0.2.9",
+    "@wemap/osm": "^0.2.11",
     "@wemap/utils": "^0.1.2",
     "geomagnetism": "^0.1.0",
     "lodash.isempty": "^4.4.0",
@@ -35,7 +36,7 @@
     "dotenv": "^8.1.0",
     "eslint": "^6.2.2",
     "eslint-plugin-babel": "^5.3.0",
-    "eslint-plugin-jsdoc": "^15.9.1",
+    "eslint-plugin-jsdoc": "^15.12.1",
     "eslint-plugin-react": "^7.14.3",
     "esm": "^3.2.25",
     "jsdom": "^15.1.1",
@@ -44,8 +45,8 @@
     "mocha": "^6.2.0",
     "npm": "^6.11.2",
     "prop-types": "^15.7.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
     "react-router-dom": "^5.0.1",
     "request": "^2.88.0",
     "request-promise": "^4.2.4",
@@ -54,7 +55,7 @@
     "url-parse": "^1.4.7",
     "webpack": "^4.39.3",
     "webpack-cli": "^3.3.7",
-    "webpack-dev-server": "^3.8.0",
+    "webpack-dev-server": "^3.9.0",
     "webpack-merge": "^4.2.1"
   },
   "homepage": "https://github.com/wemap/wemap-positioning-js#readme",
@@ -80,5 +81,5 @@
     "lint": "eslint --ext .js,.jsx --quiet src",
     "test": "mocha -r esm \"src/**/*.spec.js\""
   },
-  "version": "2.4.7"
+  "version": "2.5.0"
 }

package/src/components/MapComponent.jsx

@@ -4,235 +4,225 @@ import 'mapbox-gl/dist/mapbox-gl.css';
 import PropTypes from 'prop-types';
 
 import {
-    Attitude, Network, WGS84
+    Attitude, WGS84
 } from '@wemap/geo';
+import { Network } from '@wemap/graph';
 
 import EventType from '../events/EventType';
 
-mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
-
+mapboxgl.accessToken
+  = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
 
 const COMPASS_STYLE = {
-    'width': '15px',
-    'height': '15px',
+    width: '15px',
+    height: '15px',
     'border-radius': '50%',
     'z-index': '10000001',
-    'position': 'absolute',
-    'top': '-14px',
-    'left': '-14px',
-    'border': '7px solid',
+    position: 'absolute',
+    top: '-14px',
+    left: '-14px',
+    border: '7px solid',
     'border-color': 'transparent',
     'border-top-color': '#008DF1',
-    'opacity': 0.5
+    opacity: 0.5
 };
 
 const POSITION_STYLE = {
-    'width': '15px',
-    'height': '15px',
-    'top': '-7px',
-    'left': '-7px',
-    'position': 'absolute',
+    width: '15px',
+    height: '15px',
+    top: '-7px',
+    left: '-7px',
+    position: 'absolute',
     'border-radius': '50%',
-    'background': '#008DF1'
+    background: '#008DF1'
 };
 
-
 class MapComponent extends React.Component {
-
-    static propTypes = {
-        network: PropTypes.instanceOf(Network),
-        defaultZoom: PropTypes.number
-    };
-
-    static defaultProps = {defaultZoom: 19};
-
-    componentDidMount() {
-        this.map = new mapboxgl.Map({
-            container: this.mapContainer,
-            style: 'mapbox://styles/mapbox/streets-v9'
-        });
-        this.renderNetwork();
-    }
-
-    componentWillUnmount() {
-        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];
-            }
-        }
-    }
-
-    parseEvents(events) {
-        if (!this.map) {
-            return;
-        }
-        events.forEach(event => {
-            if (event.dataType === EventType.AbsolutePosition) {
-                this.updatePosition(event.data);
-
-            } else if (event.dataType === EventType.AbsoluteAttitude) {
-                this.updateAttitude(event.data);
-            }
-        });
-    }
-
-    updatePosition(position) {
-
-        if (!this.map) {
-            return;
-        }
-
-        if (!(position instanceof WGS84)) {
-            if (this.mapMarker) {
-                this.mapMarker.remove();
-                this.mapMarker = null;
-                this.positionIcon = null;
-            }
-            return;
-        }
-
-        const lngLat = [position.lng, position.lat];
-
-        if (!this.mapMarker) {
-            this.mapMarker = this.createPositionMarker(lngLat)
-                .addTo(this.map);
-            this.map.jumpTo({
-                center: lngLat,
-                zoom: this.props.defaultZoom
-            });
-        } else {
-            this.mapMarker.setLngLat(lngLat);
-        }
-
-    }
-
-    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.map.on('load', () => {
-            this.networkLayer = this.map.addLayer(layer);
-        });
-    }
-
-    render() {
-        this.renderNetwork();
-        return (
-            <div
-                ref={map => (this.mapContainer = map)}
-                style={{ height: '300px' }} />
-        );
-    }
+  static propTypes = {
+      network: PropTypes.instanceOf(Network),
+      defaultZoom: PropTypes.number
+  };
+
+  static defaultProps = { defaultZoom: 19 };
+
+  componentDidMount() {
+      this.map = new mapboxgl.Map({
+          container: this.mapContainer,
+          style: 'mapbox://styles/mapbox/streets-v9'
+      });
+      this.renderNetwork();
+  }
+
+  componentWillUnmount() {
+      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];
+          }
+      }
+  }
+
+  parseEvents(events) {
+      if (!this.map) {
+          return;
+      }
+      events.forEach(event => {
+          if (event.dataType === EventType.AbsolutePosition) {
+              this.updatePosition(event.data);
+          } else if (event.dataType === EventType.AbsoluteAttitude) {
+              this.updateAttitude(event.data);
+          }
+      });
+  }
+
+  updatePosition(position) {
+      if (!this.map) {
+          return;
+      }
+
+      if (!(position instanceof WGS84)) {
+          if (this.mapMarker) {
+              this.mapMarker.remove();
+              this.mapMarker = null;
+              this.positionIcon = null;
+          }
+          return;
+      }
+
+      const lngLat = [position.lng, position.lat];
+
+      if (!this.mapMarker) {
+          this.mapMarker = this.createPositionMarker(lngLat).addTo(this.map);
+          this.map.jumpTo({
+              center: lngLat,
+              zoom: this.props.defaultZoom
+          });
+      } else {
+          this.mapMarker.setLngLat(lngLat);
+      }
+  }
+
+  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.map.on('load', () => {
+          this.networkLayer = this.map.addLayer(layer);
+      });
+  }
+
+  render() {
+      this.renderNetwork();
+      return (
+          <div ref={map => (this.mapContainer = map)}
+              style={{ height: '300px' }} />
+      );
+  }
 }
 
-
 export default MapComponent;

package/src/components/NavigationConfig.js

@@ -1,15 +1,16 @@
 import React from 'react'; // eslint-disable-line no-unused-vars
 
 import {
-    Itinerary, WGS84UserPosition, Level
+    WGS84UserPosition, Level
 } from '@wemap/geo';
+import { Itinerary } from '@wemap/graph';
 import { deg2rad } from '@wemap/maths';
 
 const datasets = {};
 
 // Wemap Office
 const wemapOffice = {
-    initialPosition: new WGS84UserPosition(43.6091955, 3.8841255),
+    initialPosition: new WGS84UserPosition(43.6091955, 3.8841255, 1.5),
     initialHeading: deg2rad(191.9)
 };
 wemapOffice.itinerary = Itinerary.fromOrderedPointsArray(
@@ -27,7 +28,7 @@ wemapOffice.itinerary = Itinerary.fromOrderedPointsArray(
 
 // Wemap Office Multi-level
 const wemapOfficeMulti = {
-    initialPosition: new WGS84UserPosition(43.6091965, 3.8841285, null, new Level(2)),
+    initialPosition: new WGS84UserPosition(43.6091965, 3.8841285, 1.5, new Level(2)),
     initialHeading: deg2rad(191.9)
 };
 wemapOfficeMulti.itinerary = Itinerary.fromOrderedPointsArray(
@@ -51,7 +52,7 @@ wemapOfficeMulti.itinerary = Itinerary.fromOrderedPointsArray(
 
 // Gare de Lyon RER A
 const gareDeLyonRerA = {
-    initialPosition: new WGS84UserPosition(48.8442365, 2.3728267, null, new Level(-2)),
+    initialPosition: new WGS84UserPosition(48.8442365, 2.3728267, 1.5, new Level(-2)),
     initialHeading: deg2rad(41.6)
 };
 gareDeLyonRerA.itinerary = Itinerary.fromOrderedPointsArray(

package/src/providers/others/MapMatchingProvider.js

@@ -1,7 +1,7 @@
 import Provider from '../Provider';
 import {
     Itinerary, MapMatching, Network
-} from '@wemap/geo';
+} from '@wemap/graph';
 
 class MapMatchingProvider extends Provider {
 

package/src/providers/pose/pdr/PdrProvider.js

@@ -2,8 +2,10 @@
 import noop from 'lodash.noop';
 
 import {
-    Constants as GeoConstants, Itinerary, WGS84, WGS84UserPosition
+    Constants as GeoConstants, WGS84, WGS84UserPosition
 } from '@wemap/geo';
+
+import { Itinerary } from '@wemap/graph';
 import {
     rad2deg, Quaternion
 } from '@wemap/maths';