diff --git a/package-lock.json b/package-lock.json index c1840cc1..e31603c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,6 @@ "version": "1.1.0", "dependencies": { "@aftersim/pako": "^1.0.11-3", - "@babel/runtime": "^7.16.3", "@flowmap.gl/core": "^7.3.3", "@luma.gl/core": "^8.5.10", "@math.gl/polygon": "^3.5.6", @@ -73,7 +72,6 @@ "vue-video-player": "^5.0.2", "vuera": "^0.2.7", "vuex": "^3.1.3", - "xml2js": "^0.4.23", "yaml": "^1.7.2" }, "devDependencies": { @@ -85,7 +83,7 @@ "@types/debounce": "^1.2.0", "@types/geojson": "^7946.0.7", "@types/marked": "^0.7.2", - "@types/micromatch": "^4.0.1", + "@types/micromatch": "^4.0.2", "@types/nprogress": "^0.2.0", "@types/pako": "^1.0.1", "@types/papaparse": "^5.0.3", @@ -15174,26 +15172,6 @@ "node": ">= 0.6.0" } }, - "node_modules/xml2js": { - "version": "0.4.23", - "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz", - "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==", - "dependencies": { - "sax": ">=0.6.0", - "xmlbuilder": "~11.0.0" - }, - "engines": { - "node": ">=4.0.0" - } - }, - "node_modules/xmlbuilder": { - "version": "11.0.1", - "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz", - "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==", - "engines": { - "node": ">=4.0" - } - }, "node_modules/xmlhttprequest": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz", @@ -28121,20 +28099,6 @@ } } }, - "xml2js": { - "version": "0.4.23", - "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz", - "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==", - "requires": { - "sax": ">=0.6.0", - "xmlbuilder": "~11.0.0" - } - }, - "xmlbuilder": { - "version": "11.0.1", - "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz", - "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==" - }, "xmlhttprequest": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz", diff --git a/package.json b/package.json index dac5e4e9..293665eb 100644 --- a/package.json +++ b/package.json @@ -3,17 +3,16 @@ "version": "1.1.0", "private": true, "scripts": { - "serve": "vue-cli-service serve", - "build": "vue-cli-service build", + "serve": "vite", + "build": "vite build", "release": "standard-version", - "test:unit": "vue-cli-service test:unit", - "lint": "vue-cli-service lint", + "test:unit": "broken//vue-cli-service test:unit", + "lint": "broken//vue-cli-service lint", "bumpversion": "standard-version", "deploy": "bash scripts/deploy-ghpages.sh matsim-vsp/simwrapper" }, "dependencies": { "@aftersim/pako": "^1.0.11-3", - "@babel/runtime": "^7.16.3", "@flowmap.gl/core": "^7.3.3", "@luma.gl/core": "^8.5.10", "@math.gl/polygon": "^3.5.6", @@ -77,7 +76,6 @@ "vue-video-player": "^5.0.2", "vuera": "^0.2.7", "vuex": "^3.1.3", - "xml2js": "^0.4.23", "yaml": "^1.7.2" }, "devDependencies": { @@ -89,7 +87,7 @@ "@types/debounce": "^1.2.0", "@types/geojson": "^7946.0.7", "@types/marked": "^0.7.2", - "@types/micromatch": "^4.0.1", + "@types/micromatch": "^4.0.2", "@types/nprogress": "^0.2.0", "@types/pako": "^1.0.1", "@types/papaparse": "^5.0.3", diff --git a/src/js/util.ts b/src/js/util.ts index 9b3d729d..0cb53f63 100644 --- a/src/js/util.ts +++ b/src/js/util.ts @@ -46,44 +46,34 @@ export function findMatchingGlobInFiles(filenames: string[], glob: string): stri return [] } -export async function parseXML(xml: string, settings: any) { - // The '$' object contains a leaf's attributes - // The '$$' object contains an explicit array of the children +export async function parseXML(xml: string, settings: any = {}) { + // This uses the fast-xml-parser library, which is the least-quirky + // of all the terrible XML libraries. // - // Sometimes you can also refer to a child node by name, such as - // carrier.shipments - - // Some examples: - - // PLANS - // plan is at carriers.carrier[x].plan[0] -- are there ever multiple plans? - // tour is at plan.tour[x] - // -- $ has vehicleId - // -- $$ has array of: - // #name --> act/leg - // $ --> other params - // route --> string of links "12345 6789 123" + // - Element attributes are stored directly in the element as "$attributeName" + // + // - Items with just one element are stored as is; but you can + // force a path to be always-array with "alwaysArray: ['my.path.to.element]" + // + // - Order is not preserved; like items are stored as arrays. For matsim, this + // is only a problem for plans (I think?) but you can recreate the plan order + // since act and leg elements always alternate. (Or use "preserveOrder: true" + // but that creates LOTS of one-item arrays everywhere. Sad.) - // SHIPMENTS - // to get the array of shipment objects, use - // carriers.carrier[x].shipments.$$ -> returns array of shipment objects - // -- each shipment object: has .$ attributes + const defaultConfig = { + ignoreAttributes: false, + preserveOrder: false, + attributeNamePrefix: '$', + isArray: undefined as any, + } - // these options are all mandatory for reading the complex carriers - // file. The main weirdness is that matsim puts children of different - // types in an order that matters (act,leg,act,leg,act... etc) - const defaultConfig = () => { - return { - strict: true, - trim: true, - preserveOrder: true, - explicitChildren: true, - explicitArray: true, + // Allow user to pass in an array of "always as array" XML paths: + if (settings.alwaysArray) + defaultConfig.isArray = (name: string, jpath: string) => { + if (settings.alwaysArray.indexOf(jpath) !== -1) return true } - } const options = Object.assign(defaultConfig, settings) - const parser = new XMLParser(options) return new Promise((resolve, reject) => { diff --git a/src/plugins/carrier-viewer/Plugin.vue b/src/plugins/carrier-viewer/Plugin.vue index 4441d377..be1559ee 100644 --- a/src/plugins/carrier-viewer/Plugin.vue +++ b/src/plugins/carrier-viewer/Plugin.vue @@ -13,8 +13,6 @@ :paths="[]" :drtRequests="[]" :traces="[]" - :colors="COLOR_OCCUPANCY" - :settingsShowLayers="SETTINGS" :center="vizDetails.center" :searchEnabled="searchEnabled" :vehicleLookup="vehicleLookup" @@ -34,13 +32,13 @@ h3(v-if="carriers.length") {{ $t('carriers')}} .carrier-list - .carrier(v-for="carrier in carriers" :key="carrier.$.id" - :class="{selected: carrier.$.id==selectedCarrier}") + .carrier(v-for="carrier in carriers" :key="carrier.$id" + :class="{selected: carrier.$id===selectedCarrier}") .carrier-title(@click="handleSelectCarrier(carrier)") - i.far(:class="carrier.$.id==selectedCarrier ? 'fa-minus-square' : 'fa-plus-square'") - span {{ carrier.$.id }} + i.far(:class="carrier.$id===selectedCarrier ? 'fa-minus-square' : 'fa-plus-square'") + span {{ carrier.$id }} - .carrier-details(v-if="carrier.$.id==selectedCarrier") + .carrier-details(v-if="carrier.$id===selectedCarrier") .carrier-section(v-if="tours.length") .carrier-title(@click="toggleTours = !toggleTours") @@ -63,17 +61,17 @@ i.far(:class="toggleShipments ? 'fa-minus-square' : 'fa-plus-square'") span {{ $t('shipments')}}: {{ shipments.length}} - .leaf.tour(v-for="shipment in toggleShipments ? shipments:[]" :key="shipment.id" + .leaf.tour(v-for="shipment in toggleShipments ? shipments:[]" :key="shipment.$id" @click="handleSelectShipment(shipment)" - :class="{selected: shipment==selectedShipment, 'shipment-in-tour': shipmentIdsInTour.includes(shipment.id)}" - ) {{ `${shipment.id}: ${shipment.from}-${shipment.to}` }} + :class="{selected: shipment==selectedShipment, 'shipment-in-tour': shipmentIdsInTour.includes(shipment.$id)}" + ) {{ `${shipment.$id}: ${shipment.$from}-${shipment.$to}` }} .carrier-section(v-if="services.length") .carrier-title(@click="toggleServices = !toggleServices") i.far(:class="toggleServices ? 'fa-minus-square' : 'fa-plus-square'") span {{ $t('services')}}: {{ services.length}} - .leaf.tour(v-for="service in toggleServices ? services:[]" :key="service.id") {{ `${service.id}` }} + .leaf.tour(v-for="service in toggleServices ? services:[]" :key="service.$id") {{ `${service.$id}` }} @@ -102,11 +100,9 @@ const i18n = { } import { Vue, Component, Prop, Watch } from 'vue-property-decorator' -import Papaparse from 'papaparse' import VueSlider from 'vue-slider-component' import { ToggleButton } from 'vue-js-toggle-button' import readBlob from 'read-blob' -import { Route } from 'vue-router' import YAML from 'yaml' import naturalSort from 'javascript-natural-sort' import colorMap from 'colormap' @@ -115,17 +111,17 @@ import { blobToArrayBuffer, blobToBinaryString } from 'blob-util' import * as coroutines from 'js-coroutines' import globalStore from '@/store' -import DetailsPanel from './DetailsPanel.vue' import CollapsiblePanel from '@/components/CollapsiblePanel.vue' +import DetailsPanel from './DetailsPanel.vue' +import HTTPFileSystem from '@/js/HTTPFileSystem' import LegendColors from '@/components/LegendColors' import PlaybackControls from '@/components/PlaybackControls.vue' import SettingsPanel from '@/components/SettingsPanel.vue' +import { parseXML } from '@/js/util' -import XmlFetcher from '@/workers/XmlFetcher' import NetworkHelper from '@/workers/NetworkHelper' -// import TourViz from './TourViz' -import HTTPFileSystem from '@/js/HTTPFileSystem' +import TourViz from './TourViz' import { ColorScheme, @@ -152,7 +148,7 @@ naturalSort.insensitive = true PlaybackControls, SettingsPanel, ToggleButton, - // TourViz, + TourViz, VueSlider, } as any, }) @@ -169,38 +165,6 @@ class CarrierPlugin extends Vue { @Prop({ required: false }) private thumbnail!: boolean - private COLOR_OCCUPANCY: any = { - 0: [255, 255, 85], - 1: [32, 96, 255], - 2: [85, 255, 85], - 3: [255, 85, 85], - 4: [200, 0, 0], - // 5: [255, 150, 255], - } - - COLOR_OCCUPANCY_MATSIM_UNUSED: any = { - 0: [255, 85, 255], - 1: [255, 255, 85], - 2: [85, 255, 85], - 3: [85, 85, 255], - 4: [255, 85, 85], - 5: [255, 85, 0], - } - - SETTINGS: { [label: string]: boolean } = { - Fahrzeuge: false, - Routen: false, - 'DRT Anfragen': false, - } - - private legendItems: LegendItem[] = Object.keys(this.COLOR_OCCUPANCY).map((key) => { - return { type: LegendItemType.line, color: this.COLOR_OCCUPANCY[key], value: key, label: key } - }) - - private legendRequests = [ - { type: LegendItemType.line, color: [255, 0, 255], value: 0, label: '' }, - ] - private vizDetails = { network: '', carriers: '', @@ -213,10 +177,8 @@ class CarrierPlugin extends Vue { public myState = { statusMessage: '', - clock: '00:00', colorScheme: ColorScheme.DarkMode, isRunning: false, - isShowingHelp: false, fileApi: undefined as HTTPFileSystem | undefined, fileSystem: undefined as FileSystemConfig | undefined, subfolder: this.subfolder, @@ -276,7 +238,7 @@ class CarrierPlugin extends Vue { return } - this.shownShipments = this.shipments.filter((s) => s.id === shipment.id) + this.shownShipments = this.shipments.filter((s) => s.$id === shipment.$id) this.selectedShipment = shipment } @@ -310,12 +272,12 @@ class CarrierPlugin extends Vue { let stopCount = 0 for (const activity of tour.plan) { - if (activity.shipmentId) { - inTour.push(activity.shipmentId) + if (activity.$shipmentId) { + inTour.push(activity.$shipmentId) // build list of stop locations -- this is inefficient, should use a map not an array - const shipment = this.shipments.find((s) => s.id === activity.shipmentId) - const link = activity.type === 'pickup' ? shipment.from : shipment.to + const shipment = this.shipments.find((s) => s.$id === activity.$shipmentId) + const link = activity.$type === 'pickup' ? shipment.$from : shipment.$to // skip duplicate pickups/dropoffs at this location if (stopMidpoints.length && stopMidpoints[stopMidpoints.length - 1].link === link) { continue @@ -338,8 +300,8 @@ class CarrierPlugin extends Vue { delete details.id stopMidpoints.push({ - id: shipment.id, - type: activity.type === 'pickup' ? this.$t('pickup') : this.$t('delivery'), + id: shipment.$id, + type: activity.$type === 'pickup' ? this.$t('pickup') : this.$t('delivery'), count: stopCount++, link, midpoint, @@ -424,7 +386,7 @@ class CarrierPlugin extends Vue { console.log('carrier', carrier) this.currentlyAnimating = null - const id = carrier.$.id + const id = carrier.$id this.vehicles = [] this.shipments = [] @@ -437,25 +399,23 @@ class CarrierPlugin extends Vue { this.stopMidpoints = [] // unselect carrier - if (this.selectedCarrier === carrier.$.id) { + if (this.selectedCarrier === id) { this.selectedCarrier = '' return } - this.selectedCarrier = carrier.$.id + this.selectedCarrier = id - if (carrier.capabilities[0]?.vehicles[0]?.vehicle) - this.vehicles = carrier.capabilities[0].vehicles[0].vehicle - .map((v: any) => v.$.id) - .sort((a: any, b: any) => naturalSort(a, b)) - // console.log(this.vehicles) + // vehicles + let vehicles = carrier.capabilities.vehicles.vehicle?.map((veh: any) => veh.$id) || [] + this.vehicles = vehicles.sort((a: any, b: any) => naturalSort(a, b)) this.shipments = this.processShipments(carrier) - if (carrier.services[0]?.service) - this.services = carrier.services[0].service + if (carrier.services?.service?.length) + this.services = carrier.services.service .map((s: any) => s.$) - .sort((a: any, b: any) => naturalSort(a.$.id, b.$.id)) + .sort((a: any, b: any) => naturalSort(a.$id, b.$id)) // console.log(this.services) @@ -463,61 +423,56 @@ class CarrierPlugin extends Vue { } private processTours(carrier: any) { - if (!carrier.plan[0]?.tour) return [] - - // console.log({ tour: carrier.plan[0].tour }) - - const tours = carrier.plan[0].tour.map((t: any) => { - const plan = t.$$.map((elem: any) => { - return Object.assign(elem.$, { $: elem['#name'], route: elem.route }) - }) + if (!carrier.plan?.tour?.length) return [] + + const tours: any[] = carrier.plan.tour.map((tour: any) => { + // reconstitute the plan. Our XML library builds + // two arrays: one for acts and one for legs. + // We need them stitched back together in the correct order. + const plan = [tour.act[0]] + for (let i = 1; i < tour.act.length; i++) { + plan.push(tour.leg[i - 1]) + plan.push(tour.act[i]) + } - const routes = plan - .filter((p: any) => p.$ === 'leg' && p.route[0].length) - .map((p: any) => p.route[0].split(' ')) + // Parse any route strings "123434 234143 14241" + const routes = tour.leg + .filter((leg: any) => leg.route && leg.route.length) + .map((leg: any) => { + return leg.route ? leg.route.split(' ') : [] + }) return { - vehicleId: t.$.vehicleId, + vehicleId: tour.$vehicleId, plan, routes, } }) tours.sort((a: any, b: any) => naturalSort(a.vehicleId, b.vehicleId)) - return tours } private processShipments(carrier: any) { - if (!carrier.shipments) return [] + if (!carrier.shipments?.shipment?.length) return [] - let shipments: any[] = [] - if (carrier.shipments[0]?.shipment) - shipments = carrier.shipments[0].shipment - .map((s: any) => s.$) - .sort((a: any, b: any) => naturalSort(a.id, b.id)) + const shipments = carrier.shipments.shipment.sort((a: any, b: any) => naturalSort(a.$id, b.$id)) try { for (const shipment of shipments) { // shipment has link id, so we go from link.from to link.to - shipment.fromX = 0.5 * (this.links[shipment.from][0] + this.links[shipment.from][2]) - shipment.fromY = 0.5 * (this.links[shipment.from][1] + this.links[shipment.from][3]) - shipment.toX = 0.5 * (this.links[shipment.to][0] + this.links[shipment.to][2]) - shipment.toY = 0.5 * (this.links[shipment.to][1] + this.links[shipment.to][3]) + shipment.fromX = 0.5 * (this.links[shipment.$from][0] + this.links[shipment.$from][2]) + shipment.fromY = 0.5 * (this.links[shipment.$from][1] + this.links[shipment.$from][3]) + shipment.toX = 0.5 * (this.links[shipment.$to][0] + this.links[shipment.$to][2]) + shipment.toY = 0.5 * (this.links[shipment.$to][1] + this.links[shipment.$to][3]) } } catch (e) { // if xy are missing, skip this -- just means network isn't loaded yet. } - // console.log({ shipments }) return shipments } - private async handleSettingChange(label: string) { - console.log(label) - this.SETTINGS[label] = !this.SETTINGS[label] - } - // this happens if viz is the full page, not a thumbnail on a project page private buildRouteFromUrl() { const params = this.$route.params @@ -609,26 +564,6 @@ class CarrierPlugin extends Vue { this.updateLegendColors() } - // @Watch('searchTerm') private handleSearch() { - // const vehicleNumber = this.vehicleLookupString[this.searchTerm] - // if (vehicleNumber > -1) { - // console.log('vehicle', vehicleNumber) - // this.pathVehicle?.filterExact(vehicleNumber) - // this.traceVehicle?.filterExact(vehicleNumber) - // this.requestVehicle?.filterExact(vehicleNumber) - // this.requestStart.filterAll() - // this.requestEnd.filterAll() - // this.searchEnabled = true - // } else { - // console.log('nope') - // this.pathVehicle?.filterAll() - // this.traceVehicle?.filterAll() - // this.requestVehicle?.filterAll() - // this.searchEnabled = false - // } - // this.updateDatasetFilters() - // } - private handleClick(vehicleNumber: any) { // null means empty area clicked: clear map. if (vehicleNumber === null) { @@ -637,7 +572,6 @@ class CarrierPlugin extends Vue { } const vehId = this.vehicleLookup[vehicleNumber] - console.log(vehId) // set -- or clear -- search box! if (this.searchTerm === vehId) this.searchTerm = '' @@ -695,13 +629,11 @@ class CarrierPlugin extends Vue { this.updateLegendColors() this.myState.statusMessage = 'Loading carriers...' - console.log('loading files') this.carriers = await this.loadCarriers() + await this.$nextTick() // update UI update before network load begins this.links = await this.loadNetwork() - console.log('GO!') - this.myState.statusMessage = '' } @@ -711,29 +643,32 @@ class CarrierPlugin extends Vue { const carriersXML = await this.loadFileOrGzippedFile(this.vizDetails.carriers) if (!carriersXML) return - const carriers: any = await this.parseXML(carriersXML) - - // crazy but correct - why is matsim so verbose? - const carrierList = carriers.carriers.carrier.sort((a: any, b: any) => - naturalSort(a.$.id, b.$.id) - ) - await this.$nextTick() // update UI update before network load begins - - console.log({ carrierList }) + const root: any = await parseXML(carriersXML, { + // these elements should always be arrays, even if there's just one element: + alwaysArray: [ + 'carriers.carrier', + 'carriers.carrier.capabilities.vehicles.vehicle', + 'carriers.carrier.plan.tour', + 'carriers.carrier.shipments.shipment', + 'carriers.carrier.services.service', + ], + }) + // sort by '$id' attribute + const carrierList = root.carriers.carrier.sort((a: any, b: any) => naturalSort(a.$id, b.$id)) return carrierList } private async loadNetwork() { if (!this.myState.fileApi) return - this.myState.statusMessage = 'Loading network' + if (this.vizDetails.network.indexOf('.xml.') > -1) { // matsim xml file const networkXML = await this.loadFileOrGzippedFile(this.vizDetails.network) if (!networkXML) return - const network: any = await this.parseXML(networkXML) + const network: any = await parseXML(networkXML) const convertedNetwork = await this.convertRoadNetwork(network) return convertedNetwork } else { @@ -791,54 +726,6 @@ class CarrierPlugin extends Vue { this.$store.commit('setFullScreen', false) } - private parseXML(xml: string) { - // The '$' object contains a leaf's attributes - // The '$$' object contains an explicit array of the children - // - // Sometimes you can also refer to a child node by name, such as - // carrier.shipments - // - // SHIPMENTS - // to get the array of shipment objects, use - // carriers.carrier[x].shipments.$$ -> returns array of shipment objects - // -- each shipment object: has .$ attributes - // - // PLANS - // plan is at carriers.carrier[x].plan[0] -- are there ever multiple plans? - // tour is at plan.tour[x] - // -- $ has vehicleId - // -- $$ has array of: - // #name --> act/leg - // $ --> other params - // route --> string of links "12345 6789 123" - - // these options are all mandatory for reading the complex carriers - // file. The main weirdness is that matsim puts children of different - // types in an order that matters (act,leg,act,leg,act... etc) - - return new Promise((resolve, reject) => { - reject('carriers viz disabled, for now') - }) - - // const parser = new xml2js.Parser({ - // strict: true, - // trim: true, - // preserveChildrenOrder: true, - // explicitChildren: true, - // explicitArray: true, - // }) - - // return new Promise((resolve, reject) => { - // parser.parseString(xml, function (err: Error, result: string) { - // if (err) { - // reject(err) - // } else { - // resolve(result) - // } - // }) - // }) - } - private async loadFileOrGzippedFile(name: string) { if (!this.myState.fileApi) return console.log('loading', name) diff --git a/src/plugins/carrier-viewer/TourViz.tsx b/src/plugins/carrier-viewer/TourViz.tsx index 03b5c427..f3eaa30f 100644 --- a/src/plugins/carrier-viewer/TourViz.tsx +++ b/src/plugins/carrier-viewer/TourViz.tsx @@ -7,7 +7,7 @@ import PathOffsetLayer from '@/layers/PathOffsetLayer' import { PathStyleExtension } from '@deck.gl/extensions' import globalStore from '@/store' -import { MAP_STYLES } from '@/Globals' +import { MAP_STYLES, MAPBOX_TOKEN } from '@/Globals' const ICON_MAPPING = { circle: { x: 0, y: 0, width: 128, height: 128, mask: true }, @@ -16,11 +16,6 @@ const ICON_MAPPING = { vehicle: { x: 0, y: 128, width: 128, height: 128, mask: false }, } -// Set your mapbox token here -const MAPBOX_TOKEN = - 'pk.eyJ1IjoidnNwLXR1LWJlcmxpbiIsImEiOiJjamNpemh1bmEzNmF0MndudHI5aGFmeXpoIn0.u9f04rjFo7ZbWiSceTTXyA' -// process.env.MapboxAccessToken // eslint-disable-line - const ambientLight = new AmbientLight({ color: [255, 255, 255], intensity: 1.0, @@ -69,22 +64,13 @@ export default function Component(props: { traces: any[] colors: any center: [number, number] - settingsShowLayers: { [label: string]: boolean } vehicleLookup: string[] searchEnabled: boolean onClick: any }) { const mapStyle = globalStore.state.isDarkMode ? MAP_STYLES.dark : MAP_STYLES.light - const { - shipments, - shownRoutes, - stopMidpoints, - settingsShowLayers, - center, - searchEnabled, - onClick, - } = props + const { shipments, shownRoutes, stopMidpoints, center, searchEnabled, onClick } = props const theme = DEFAULT_THEME @@ -189,7 +175,6 @@ export default function Component(props: { ) } - // if (settingsShowLayers['Routen']) layers.push( //@ts-ignore: new PathLayer({ @@ -216,7 +201,6 @@ export default function Component(props: { }) ) - // if (settingsShowLayers['Routen']) layers.push( //@ts-ignore: new PathOffsetLayer({