diff --git a/.neutrinorc.js b/.neutrinorc.js index 367adfe0..b080b114 100644 --- a/.neutrinorc.js +++ b/.neutrinorc.js @@ -22,6 +22,18 @@ if (process.env.REACT_APP_LIB_MODE) { }, }, use: [ + (neutrino) => { + neutrino.config.output + .globalObject('this') // will prevent `window` + .end() + .module.rule('worker') + .test(neutrino.regexFromExtensions(['worker.js'])) + .use('worker') + .loader(require.resolve('worker-loader')) + .options({ + // See: https://github.com/webpack-contrib/worker-loader#options + }); + }, library({ name: 'mobility-toolbox-js', targets: { @@ -159,6 +171,18 @@ if (process.env.REACT_APP_LIB_MODE) { }, ], }), + (neutrino) => { + neutrino.config.output + .globalObject('this') // will prevent `window` + .end() + .module.rule('worker') + .test(neutrino.regexFromExtensions(['worker.js'])) + .use('worker') + .loader(require.resolve('worker-loader')) + .options({ + // See: https://github.com/webpack-contrib/worker-loader#options + }); + }, ], }; } diff --git a/doc/index.html b/doc/index.html new file mode 100644 index 00000000..b63d5549 --- /dev/null +++ b/doc/index.html @@ -0,0 +1,5127 @@ + + + + + mobility-toolbox-js 1.0.0-beta.6 | Documentation + + + + + + + +
+
+
+

mobility-toolbox-js

+
1.0.0-beta.6
+ +
+ +
+ +
+
+
+ + +
+ +

+ openlayers +

+ + + + + +
+ + + +
+ + +
+ +

+ Map +

+ + +
+ + +

An OpenLayers for handling Layers. +This class extends the OpenLayers class +ol/Map.

+ +
Map
+ + +

+ Extends + + OLMap + +

+ + + + + + + + + + +
Parameters
+
+ +
+
+ options (Object + = {}) + Map options. + +
+ + + + + + + + + + + + + + + + + + + + + + +
NameDescription
options.layers Array.Layer? + List of +Layers +. +
+ +
+ +
+ + + + + + + + + + + +
Example
+ + +
import { Map } from 'mobility-toolbox-js/src/ol';
+ + + + + + +
Instance Members
+
+ +
+
+
+ + addLayer(layer, The) +
+
+ +
+ +
+
+
+ + getMobilityLayers() +
+
+ +
+ +
+
+
+ + removeLayer(layer, The) +
+
+ +
+ +
+ + + + + + +
+ + + + +
+ + +
+ +

+ Layer +

+ + +
+ + +

A class representing a layer to display on BasicMap with a name and +an ol/Layer and further options

+ +
new Layer(options: Object)
+ + +

+ Extends + + Observable + +

+ + + + + + + + + + +
Parameters
+
+ +
+
+ options (Object) + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
options.name string + Layer name (required). +
options.olLayer ol.layer + The +ol/Layer + (required). +
options.key string + + (default undefined) + Layer key, will use options.name.toLowerCase() if not specified. +
options.isBaseLayer boolean + + (default undefined) + If true this layer is a baseLayer. +
options.children Array<ol.layer> + + (default []) + Sublayers. +
options.visible boolean + + (default true) + If true this layer is the currently visible layer on the map. +
options.copyright string + + (default undefined) + Copyright-Statement. +
options.properties Object + + (default {}) + Application-specific layer properties. +
options.isQueryable boolean + + (default undefined) + If true feature information can be queried by the react-spatial LayerService. Default is undefined, but resulting to true if not strictly set to false. +
+ +
+ +
+ + + + + + + + + + + +
Example
+ + +
import { Layer } from 'mobility-toolbox-js/src/ol';
+ + + + + + +
Instance Members
+
+ +
+
+
+ + get(name) +
+
+ +
+ +
+
+
+ + get(name) +
+
+ +
+ +
+
+
+ + set(name, value) +
+
+ +
+ +
+
+
+ + set(name, value) +
+
+ +
+ +
+
+
+ + getCopyright() +
+
+ +
+ +
+
+
+ + getCopyright() +
+
+ +
+ +
+
+
+ + getName() +
+
+ +
+ +
+
+
+ + getName() +
+
+ +
+ +
+
+
+ + getKey() +
+
+ +
+ +
+
+
+ + getKey() +
+
+ +
+ +
+
+
+ + getVisible() +
+
+ +
+ +
+
+
+ + getVisible() +
+
+ +
+ +
+
+
+ + getIsBaseLayer() +
+
+ +
+ +
+
+
+ + getIsBaseLayer() +
+
+ +
+ +
+
+
+ + setCopyright(copyright) +
+
+ +
+ +
+
+
+ + setCopyright(copyright) +
+
+ +
+ +
+
+
+ + setVisible(visible, stopPropagationDown = false, stopPropagationUp = false, stopPropagationSiblings = false) +
+
+ +
+ +
+
+
+ + setVisible(visible, stopPropagationDown = false, stopPropagationUp = false, stopPropagationSiblings = false) +
+
+ +
+ +
+
+
+ + getChildren() +
+
+ +
+ +
+
+
+ + getChildren() +
+
+ +
+ +
+
+
+ + setChildren(layers) +
+
+ +
+ +
+
+
+ + setChildren(layers) +
+
+ +
+ +
+
+
+ + getVisibleChildren() +
+
+ +
+ +
+
+
+ + getVisibleChildren() +
+
+ +
+ +
+
+
+ + addChild(layer) +
+
+ +
+ +
+
+
+ + addChild(layer) +
+
+ +
+ +
+
+
+ + removeChild(name) +
+
+ +
+ +
+
+
+ + removeChild(name) +
+
+ +
+ +
+
+
+ + hasVisibleChildren() +
+
+ +
+ +
+
+
+ + hasVisibleChildren() +
+
+ +
+ +
+
+
+ + hasChildren(visible) +
+
+ +
+ +
+
+
+ + hasChildren(visible) +
+
+ +
+ +
+
+
+ + getFeatureInfoAtCoordinate(coordinate) +
+
+ +
+ +
+
+
+ + getFeatureInfoAtCoordinate(coordinate) +
+
+ +
+ +
+ + + + + + +
+ + + + +
+ + +
+ +

+ WMSLayer +

+ + +
+ + +

A class representing WMS layer to display on BasicMap

+ +
new WMSLayer(options: Object?)
+ + +

+ Extends + + Layer + +

+ + + + + + + + + + +
Parameters
+
+ +
+
+ options (Object? + = {}) + +
+ +
+ +
+ + + + + + + + + + + +
Example
+ + +
import { WMSLayer } from 'mobility-toolbox-js/src/ol';
+ + + + + + +
Instance Members
+
+ +
+
+
+ + getFeatureInfoUrl(coord) +
+
+ +
+ +
+
+
+ + getFeatureInfoAtCoordinate(coordinate) +
+
+ +
+ +
+
+
+ + onClick(callback) +
+
+ +
+ +
+
+
+ + init(map) +
+
+ +
+ +
+
+
+ + terminate() +
+
+ +
+ +
+ + + + + + +
+ + + + +
+ + +
+ +

+ MapboxLayer +

+ + +
+ + +

A class representing Mapboxlayer to display on BasicMap

+ +
new MapboxLayer(options: Object?)
+ + +

+ Extends + + Layer + +

+ + + + + + + + + + +
Parameters
+
+ +
+
+ options (Object? + = {}) + +
+ +
+ +
+ + + + + + + + + + + + + + + +
Instance Members
+
+ +
+
+
+ + init(map) +
+
+ +
+ +
+
+
+ + getFeatureInfoAtCoordinate(coordinate, options) +
+
+ +
+ +
+
+
+ + terminate() +
+
+ +
+ +
+
+
+ + clone() +
+
+ +
+ +
+ + + + + + +
+ + + + +
+ + +
+ +

+ MapboxStyleLayer +

+ + +
+ + +

Layer for visualizing a specific set of layer from a MapboxLayer.

+ +
new MapboxStyleLayer(options: Object?)
+ + +

+ Extends + + Layer + +

+ + + + + + + + + + +
Parameters
+
+ +
+
+ options (Object? + = {}) + Layer options. + +
+ +
+ +
+ + + + + + + + + + + +
Example
+ + +
import { MapboxStyleLayer } from 'mobility-toolbox-js/src/ol';
+ + + + + + +
Instance Members
+
+ +
+
+
+ + getFeatureInfoAtCoordinate(coordinate) +
+
+ +
+ +
+
+
+ + clone(mapboxLayer) +
+
+ +
+ +
+ + + + + + +
+ + + + +
+ + +
+ +

+ TrajservLayer +

+ + +
+ + +

Responsible for loading tracker data from Trajserv.

+ +
new TrajservLayer(options: Object?)
+ + +

+ Extends + + TrackerLayer + +

+ + + + + + + + + + +
Parameters
+
+ +
+
+ options (Object? + = {}) + Layer options. + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
options.url string + + (default https://api.geops.io/tracker) + Tracker url. +
options.apiKey string + Access key for +geOps services +. +
options.delayDisplay number + delay from which the time is always display on the feature (in milliseconds). +
options.regexPublishedLineName (Array<string> | string) + Regex filter for line name. This filter has a higher prio over publishedLineName. +
options.publishedLineName (Array<string> | string) + Filter by line name, string: 'ICE', list: 's1,s2,s9,s10,s15' +
options.tripNumber (Array<string> | string) + Filter by trip number, bus in zurich: '2068', list of buses in Zurich: '2068,3003,3451,3953' +
options.operator (Array<string> | string) + Filter by operator, string: 'sbb', list: '(vbz +| +zsg)' +
+ +
+ +
+ + + + + + + + + + + +
Example
+ + +
import { TrajservLayer } from 'mobility-toolbox-js/src/ol';
+ + + + + + + + + + +
+ + + + +
+ +

+ mapbox +

+ + + + + +
+ + + +
+ + +
+ +

+ MapboxTrajservLayer +

+ + +
+ + +

Responsible for loading tracker data from Trajserv.

+ +
new MapboxTrajservLayer(options: Object?)
+ + +

+ Extends + + TrackerLayer + +

+ + + + + + + + + + +
Parameters
+
+ +
+
+ options (Object? + = {}) + Layer options. + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
options.url string + + (default https://api.geops.io/tracker) + Tracker url. +
options.apiKey string + Access key for +geOps services +. +
options.delayDisplay number + delay from which the time is always display on the feature (in milliseconds). +
options.regexPublishedLineName (Array<string> | string) + Regex filter for line name. This filter has a higher prio over publishedLineName. +
options.publishedLineName (Array<string> | string) + Filter by line name, string: 'ICE', list: 's1,s2,s9,s10,s15' +
options.tripNumber (Array<string> | string) + Filter by trip number, bus in zurich: '2068', list of buses in Zurich: '2068,3003,3451,3953' +
options.operator (Array<string> | string) + Filter by operator, string: 'sbb', list: '(vbz +| +zsg)' +
+ +
+ +
+ + + + + + + + + + + +
Example
+ + +
import { MapboxTrajservLayer } from 'mobility-toolbox-js/src/mapbox';
+ + + + + + +
Instance Members
+
+ +
+
+
+ + init(map, beforeLayerId) +
+
+ +
+ +
+ + + + + + +
+ + + + +
+ +

+ api +

+ + + + + +
+ + + +
+ + +
+ +

+ StopsAPI +

+ + +
+ + +

Access to Stops api.

+ +
new StopsAPI(options: any)
+ + + + + + + + + + + +
Parameters
+
+ +
+
+ options (any + = {}) + +
+ +
+ +
+ + + + + + + + + + + +
Example
+ + +
import { StopsAPI } from 'mobility-toolbox-js/src/api';
+ + + + + + +
Instance Members
+
+ +
+
+
+ + search(params, abortController) +
+
+ +
+ +
+ + + + + + +
+ + + + +
+ + +
+ +

+ TrajservAPI +

+ + +
+ + +

Access to Trajserv api.

+ +
new TrajservAPI(options: any)
+ + + + + + + + + + + +
Parameters
+
+ +
+
+ options (any + = {}) + +
+ +
+ +
+ + + + + + + + + + + +
Example
+ + +
import { TrajservAPI } from 'mobility-toolbox-js/src/api';
+ + + + + + +
Instance Members
+
+ +
+
+
+ + fetchTrajectoryById(params, abortController) +
+
+ +
+ +
+
+
+ + fetchTrajectories(params, abortController) +
+
+ +
+ +
+
+
+ + fetchTrajectoryStations(params, abortController) +
+
+ +
+ +
+ + + + + + +
+ + + +
+
+ + + + + diff --git a/package.json b/package.json index 737435f1..67d9ca26 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,8 @@ "stylelint-scss": "3.17.2", "webpack": "4.43.0", "webpack-cli": "3.3.11", - "webpack-dev-server": "3.11.0" + "webpack-dev-server": "3.11.0", + "worker-loader": "2.0.0" }, "scripts": { "apidoc": "esdoc", diff --git a/src/common/workers/getVehicleAtCoordinate.worker.js b/src/common/workers/getVehicleAtCoordinate.worker.js new file mode 100644 index 00000000..9fff37b9 --- /dev/null +++ b/src/common/workers/getVehicleAtCoordinate.worker.js @@ -0,0 +1,26 @@ +import { buffer, containsCoordinate } from 'ol/extent'; + +const getVehicleAtCoordinate = (e) => { + // console.log('Worker: Message received from main script', e.data); + try { + const [trajectories, coordinate, resolution] = JSON.parse(e.data); + const ext = buffer([...coordinate, ...coordinate], 10 * resolution); + const vehicles = []; + for (let i = 0; i < (trajectories || []).length; i += 1) { + if ( + trajectories[i].coordinate && + containsCoordinate(ext, trajectories[i].coordinate) + ) { + vehicles.push(trajectories[i]); + } + } + + postMessage(vehicles); + } catch (err) { + // eslint-disable-next-line no-console + console.log('Error', err); + } +}; + +// eslint-disable-next-line no-restricted-globals +self.addEventListener('message', getVehicleAtCoordinate); diff --git a/src/doc/examples/mapboxtracker.js b/src/doc/examples/mapboxtracker.js new file mode 100644 index 00000000..b214af33 --- /dev/null +++ b/src/doc/examples/mapboxtracker.js @@ -0,0 +1,27 @@ +import { Map } from 'mapbox-gl/dist/mapbox-gl-unminified'; +import { toLonLat } from 'ol/proj'; +import { MapboxTrajservLayer } from '../../mapbox'; +import 'mapbox-gl/dist/mapbox-gl.css'; + +export default () => { + const map = new Map({ + container: 'map', + style: `https://maps.geops.io/styles/travic/style.json?key=${window.apiKey}`, + center: toLonLat([831634, 5933959]), + zoom: 9, + }); + + const tracker = new MapboxTrajservLayer({ + url: 'https://api.geops.io/tracker/v1', + apiKey: window.apiKey, + }); + + tracker.onClick((vehicles) => { + // eslint-disable-next-line no-console + console.log(vehicles); + }); + + map.on('load', () => { + tracker.init(map, 'waterway-name'); + }); +}; diff --git a/src/mapbox/layers/TrackerLayer.js b/src/mapbox/layers/TrackerLayer.js index 2e6d5b29..772dce39 100644 --- a/src/mapbox/layers/TrackerLayer.js +++ b/src/mapbox/layers/TrackerLayer.js @@ -2,6 +2,7 @@ import { toLonLat, fromLonLat } from 'ol/proj'; import Layer from '../../common/layers/Layer'; import mixin from '../../common/mixins/TrackerLayerMixin'; import { getResolution } from '../utils'; +import GetVehicleAtCoordinateW from '../../common/workers/getVehicleAtCoordinate.worker'; /** * Responsible for loading tracker data. @@ -31,6 +32,7 @@ class TrackerLayer extends mixin(Layer) { if (!map) { return; } + this.getVehicleAtCoordinateWorker = new GetVehicleAtCoordinateW(); const canvas = map.getCanvas(); @@ -105,9 +107,14 @@ class TrackerLayer extends mixin(Layer) { * @returns {Array
    } Array of vehicle. * @override */ - getVehiclesAtCoordinate(coordinate, nb) { - const resolution = getResolution(this.map); - return super.getVehiclesAtCoordinate(coordinate, resolution, nb); + getVehiclesAtCoordinate(coordinate) { + const res = getResolution(this.map); + + // const ext = buffer([...coordinate, ...coordinate], 10 * res); + const trajectories = this.tracker.getTrajectories(); + this.getVehicleAtCoordinateWorker.postMessage( + JSON.stringify([trajectories, coordinate, res]), + ); } /** diff --git a/src/mapbox/layers/TrajservLayer.js b/src/mapbox/layers/TrajservLayer.js index 1ca39071..6f43cfd9 100644 --- a/src/mapbox/layers/TrajservLayer.js +++ b/src/mapbox/layers/TrajservLayer.js @@ -143,7 +143,8 @@ class TrajservLayer extends mixin(TrackerLayer) { * @private */ onMoveEnd() { - this.updateTrajectories(); + this.onMove(); + // this.updateTrajectories(); if (this.selectedVehicleId && this.journeyId) { this.highlightTrajectory(); } diff --git a/src/ol/layers/TrackerLayer.js b/src/ol/layers/TrackerLayer.js index f1165a29..cc0237d2 100644 --- a/src/ol/layers/TrackerLayer.js +++ b/src/ol/layers/TrackerLayer.js @@ -3,6 +3,7 @@ import { unByKey } from 'ol/Observable'; import Source from 'ol/source/Source'; import mixin from '../../common/mixins/TrackerLayerMixin'; import Layer from './Layer'; +import GetVehicleAtCoordinateW from '../../common/workers/getVehicleAtCoordinate.worker'; /** * Responsible for loading tracker data. @@ -125,6 +126,7 @@ class TrackerLayer extends mixin(Layer) { if (!map) { return; } + this.getVehicleAtCoordinateWorker = new GetVehicleAtCoordinateW(); super.init(map, { getPixelFromCoordinate: map.getPixelFromCoordinate.bind(map), @@ -170,6 +172,14 @@ class TrackerLayer extends mixin(Layer) { } }), ]; + + this.getVehicleAtCoordinateWorker.onmessage = (e) => { + const [vehicle] = e.data; + // eslint-disable-next-line no-console + console.log(vehicle); + this.map.getTargetElement().style.cursor = vehicle ? 'pointer' : 'auto'; + this.tracker.setHoverVehicleId(vehicle && vehicle.id); + }; } /** @@ -212,9 +222,23 @@ class TrackerLayer extends mixin(Layer) { * @returns {Array
      } Vehicle feature. * @override */ - getVehiclesAtCoordinate(coordinate, nb) { - const resolution = this.map.getView().getResolution(); - return super.getVehiclesAtCoordinate(coordinate, resolution, nb); + getVehiclesAtCoordinate(coordinate) { + const res = this.map.getView().getResolution(); + const trajectories = this.tracker.getTrajectories(); + this.getVehicleAtCoordinateWorker.postMessage( + JSON.stringify([trajectories, coordinate, res]), + ); + // const vehicles = []; + // for (let i = 0; i < (trajectories || []).length; i += 1) { + // if ( + // trajectories[i].coordinate && + // containsCoordinate(ext, trajectories[i].coordinate) + // ) { + // vehicles.push(trajectories[i]); + // } + // } + + // return vehicles; } /** diff --git a/yarn.lock b/yarn.lock index c67ec0ab..0e8462a6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8551,7 +8551,7 @@ loader-utils@1.2.3: emojis-list "^2.0.0" json5 "^1.0.1" -loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0: +loader-utils@^1.0.0, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613" integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA== @@ -11762,6 +11762,14 @@ scheduler@^0.19.1: loose-envify "^1.1.0" object-assign "^4.1.1" +schema-utils@^0.4.0: + version "0.4.7" + resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187" + integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ== + dependencies: + ajv "^6.1.0" + ajv-keywords "^3.1.0" + schema-utils@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770" @@ -13979,6 +13987,14 @@ worker-farm@^1.7.0: dependencies: errno "~0.1.7" +worker-loader@2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-2.0.0.tgz#45fda3ef76aca815771a89107399ee4119b430ac" + integrity sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw== + dependencies: + loader-utils "^1.0.0" + schema-utils "^0.4.0" + wrap-ansi@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-3.0.1.tgz#288a04d87eda5c286e060dfe8f135ce8d007f8ba"