31:T42c,profile = { return { // profileVisualImpairment: profileVisualImpairment === 'true', // profileSlopePossible: profileSlopePossible === 'true', profileQuestionElevator: profileQuestionElevator === 'true', profileQuestionMaxStepHeight: profileQuestionMaxStepHeight, profileQuestionMinimumWidth: profileQuestionMinimumWidth, profileQuestionSeating: profileQuestionSeating === 'true', profileQuestionCover: profileQuestionCover === 'true', profileRampNeeded: profileWheelchairs.includes(profileModality), profileQuestionRampWanted: profileQuestionRamp === 'true', // profileMinimalPlatformHeightTram: profileQuestionRamp === 'true' ? .225 : 0, // .225 is officieel profileMinimalPlatformHeightTram: profileQuestionRamp === 'true' ? .10 : 0, // .225 meter is officieel, we hebben gevallen gezien waar het bij 0.07 lukt. Voor de test op .10 gezet (10cm) profileMinimalPlatformHeightBus: profileQuestionRamp === 'true' ? .18 : 0, profileModality: profileModality, profileEmbarkmentSpace: profileEmbarkmentSpace }; }32:T7b8,//////////////////////////////////////////////// /// All profile > haltedata logic is in here /// //////////////////////////////////////////////// profileAccessibleCalculation = el => { const entr = el.properties.accessibility.entrances[0]; return ( // TODO: bij combihaltes een accessible waarde voor tram en bus geven // // wider than profile width // TODO: niet alleen naar minimum breedte maar ook breedte instapplek kijken (moet nog in a11yjson) entr.width.value >= profile.profileQuestionMinimumWidth && // // lower than max stepheight if there is a stairs (drempel) and if there is no elevator (entr.stairs && !hasEquipmenCategory(el, 'elevator') ? entr.stairs.stepHeight.value <= profile.profileQuestionMaxStepHeight / 100 : true) && // // TODO: check if haltes can be too high for ramp (ramp would bump into platform), different maxheight for bus and tram // TODO: add higher than minimal platform height for busses // higher than minimal platform height for trams ((el.properties.transportMode === 'tram' ? el.properties.accessibility.ground.elevation.value >= profile.profileMinimalPlatformHeightTram : true) && (el.properties.transportMode === 'bus' ? el.properties.accessibility.ground.elevation.value >= profile.profileMinimalPlatformHeightBus : true)) && // // check for elevators: halte has elevator OR the ground level is 0 OR an elevator is not needed in user // profile (hasEquipmenCategory(el, 'elevator') || el.properties.accessibility.ground.level === 0 || !profile.profileQuestionElevator) && // // check for seating OR seating not needed in user profile (hasEquipmenCategory(el, 'seating') || !profile.profileQuestionSeating) && // // check for shelter OR shelter not needed in user profile (hasEquipmenCategory(el, 'shelter') || !profile.profileQuestionCover) ); }33:Tab3,map = { let map = this; if (!map) { // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div map = new mapboxgl.Map({ container, center: [4.9, 52.366667], zoom: 10, style: "mapbox://styles/mapbox/light-v10" }); } let haltes = { id: "haltes", source: "haltes", type: "circle", paint: { "circle-radius": 4, 'circle-color': halteMapboxExpression, "circle-opacity": 0.6, "circle-stroke-width": 0 } }; // Wait until the map loads, then yield the container again. yield new Promise(resolve => { if (map.loaded()) resolve(map); else map.on('load', () => resolve(map)); }); map.addSource('haltes', halteDataA11yJSONAms); if (map.getLayer(haltes.id)) { map.removeLayer(haltes.id); } map.addLayer(haltes); // Create a popup, but don't add it to the map yet. var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); map.on('mouseenter', 'haltes', function(e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; const mapTooltipDescriptionHTML = e => { const prop = e.features[0].properties; const originalData = JSON.parse(e.features[0].properties.originalData); const accessibility = JSON.parse(e.features[0].properties.accessibility); const ramp = (prop.transportMode === 'tram' && accessibility.ground.elevation.value >= .10) || (prop.transportMode === 'bus' && accessibility.ground.elevation.value >= .18) || (!prop.transportMode === 'tram' && !prop.transportMode === 'bus'); return `${prop.name} ${getCardinalDirection(prop.direction)}
${prop.originalId}
${prop.transportMode}
smalste breedte: ${accessibility.entrances[0].width.value} m
hoogte: ${accessibility.ground.elevation.value * 100} cm
hoog genoeg voor plank: ${ramp ? 'Ja' : 'Nee'} `; }; var coordinates = e.features[0].geometry.coordinates.slice(); var description = mapTooltipDescriptionHTML(e); // get html from function // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } // Populate the popup and set its coordinates // based on the feature found. popup .setLngLat(coordinates) .setHTML(description) .addTo(map); }); map.on('mouseleave', 'haltes', function() { map.getCanvas().style.cursor = ''; popup.remove(); }); }34:T4ac,function autoSelect(config = {}) { const { value, title, description, disabled, autocomplete = "off", placeholder, size, options, list = "options" } = Array.isArray(config) ? { options: config } : config; const optionsSet = new Set(options); const form = input({ type: "text", title, description, attributes: { disabled }, action: fm => { fm.value = fm.input.value = value || ""; fm.onsubmit = e => e.preventDefault(); fm.input.oninput = function(e) { e.stopPropagation(); fm.value = fm.input.value; if (!fm.value || optionsSet.has(fm.value)) fm.dispatchEvent(new CustomEvent("input")); }; }, form: html` ` }); form.output.remove(); return form; }35:[] 2f:{"title":"Data exploratie profiel en halteinformatie - v3, backup 10 nov 2020","cells":[{"id":267,"value":"md`# Data exploratie profiel en halteinformatie - v3, backup 10 nov 2020\n\n*Dit is een backup, de huidige versie kan je hier vinden: https://observablehq.com/@jurb/prototype-profiel-en-halteinformatie*\n\nDit notebook toont aan welke haltes in Amsterdam toegankelijk zijn aan de hand van een persoonlijk profiel. We matchen profielgegevens over omstandigheden, voorkeuren en beperkingen met open data over haltes. Deze versie gebruikt een a11yJSON versie van [het dagelijks geupdate XML bestand van het ndovloket](https://data.ndovloket.nl). Het notebook is gemaakt door het focusteam van de innovatieafdeling van de Gemeente Amsterdam. Comments op het notebook zijn zeer welkom!\n\n*Dit is nog werk in uitvoering, er staan nog veel keuzes open. De toegankelijke en niet-toegankelijke haltes zijn een voorlopig resultaat, dit kan in de loop van het project nog veranderen*.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"viewof profileModality = radio(modalities)","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"// TODO aanvinken bij wheelchair modalit\nprofileQuestionRampView = {\n return profileWheelchairs.includes(profileModality)\n ? checkbox({\n options: [\n { value: true, label: \"Ik wil altijd met de plank de tram of bus in\" }\n ],\n value: 'true'\n })\n : false;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"profileQuestionMinimumWidthView = {\n return profileWheelchairs.includes(profileModality)\n ? slider({\n min: 0,\n max: 3,\n value: .9,\n step: 0.1,\n format: v => `${v} m`,\n title: 'Hoeveel ruimte heb je minimaal in de breedte nodig?',\n description:\n \"De meeste mensen in een rolstoel hebben minimaal 90cm nodig.\"\n })\n : false;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1761,"value":"viewof halteSelect = autoSelect({\n title: 'Selecteer breedte aan de hand van halte',\n description: 'Handig als je al een halte kent waar het nét past',\n options: halteDataA11yJSONAms.data.features.map(\n d =>\n `${d.properties.name} ${getCardinalDirection(\n d.properties.originalData.quaybearing.compassdirection\n )}`\n ),\n placeholder: \"Haltenaam\"\n})\n\n// TODO: we zoeken de eerste halte op naam, moet ook op richting. Kan met XML met kompasrichting.","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"profileQuestionMaxStepHeightView = {\n // return !profileWheelchairs.includes(profileModality) // only show when not in wheelchair\n return true // always show\n ? slider({\n min: 0,\n max: 15,\n value: 2,\n step: 1,\n format: v => `${v} cm`,\n title: \"Geef hier aan hoe hoog een drempel voor jou kan zijn\",\n description: \"We tonen hier binnenkort plaatjes om je te helpen\"\n })\n : false;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"viewof profileQuestionElevator = checkbox({\n // title: \"Ik gebruik altijd een plank\",\n // description: \"\",\n options: [{ value: true, label: \"Ik wil met de lift als die er is\" }],\n value: false\n})\n\n// TODO: match with elevator in equipment","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"viewof profileQuestionSeating = checkbox({\n options: [{ value: true, label: \"Ik wil kunnen zitten / leunen\" }],\n value: false\n})\n\n// TODO: match with elevator in equipment","pinned":false,"hidden":false,"mode":"ojs"},{"id":973,"value":"viewof profileQuestionCover = checkbox({\n options: [{ value: true, label: \"Ik wil overdekt kunnen wachten\" }],\n value: false\n})\n\n// TODO: match with elevator in equipment","pinned":false,"hidden":false,"mode":"ojs"},{"id":1192,"value":"md`### Geschouwde haltes toegankelijk volgens profiel: ${percentageToegankelijkProfiel}% / volgens DOVA: ${percentageToegankelijkDova}%\n\nWe tonen hier alleen haltes in Amsterdam met toegankelijkheidsinformatie (dit zijn ${geschouwdeHaltesPercentage}% van de haltes)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"container = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1569,"value":"md`### Zoom in op adres`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1376,"value":"viewof query = submit({ value: \"Herengracht 512\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1403,"value":"viewof zoom = checkbox({\n options: [{ value: \"zoom\", label: \"zoom\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1116,"value":"md`# Profiel variabelen`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"md`## Profiel samenstellen`","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"modalities = {\n return {\n title: 'Hoe verplaatst u zich?',\n // description: 'Selecteer',\n options: [\n { label: 'Ik gebruik een handrolstoel', value: 'wheelchairManual' },\n {\n label: 'Ik gebruik een electrische rolstoel',\n value: 'wheelchairElectric'\n },\n { label: 'Ik gebruik een scootmobiel', value: 'mobilityScooter' },\n\n { label: 'Ik gebruik een rollator', value: 'walker' },\n { label: 'Ik gebruik een wandelstok', value: 'walkingStick' },\n { label: 'Ik gebruik geen van deze hulpmiddelen', value: 'noHelp' }\n ],\n value: 'noHelp'\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"profileQuestionMaxStepHeight = profileQuestionMaxStepHeightView\n ? Generators.input(profileQuestionMaxStepHeightView)\n : false","pinned":false,"hidden":false,"mode":"ojs"},{"id":1051,"value":"profileQuestionRamp = profileQuestionRampView\n ? Generators.input(profileQuestionRampView)\n : false","pinned":false,"hidden":false,"mode":"ojs"},{"id":1011,"value":"mutable profileQuestionMinimumWidth = profileQuestionMinimumWidthView\n ? Generators.input(profileQuestionMinimumWidthView)\n : 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1075,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"profileWheelchairs = [\n 'wheelchairManual',\n 'wheelchairElectric',\n 'mobilityScooter'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1277,"value":"profileMinimalPlatformHeightTram = profile.profileMinimalPlatformHeightTram","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"profileMinimumWidth = .9","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"md`## Data filteren met profiel object`","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1454,"value":"// check if an object with a certain category exists in the equipmentInfo array\nhasEquipmenCategory = (el, category) =>\n el.properties.equipmentInfo\n ? el.properties.equipmentInfo.filter(el =>\n el.properties ? el.properties.category === category : false\n )[0]\n ? true\n : false\n : false","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"map.getSource('haltes').setData(halteDataProfiel.data)\n// als data verandert, mapbox data updaten","pinned":true,"hidden":false,"mode":"ojs"},{"id":783,"value":"halteDataProfiel = {\n return {\n type: 'geojson',\n data: {\n type: \"FeatureCollection\",\n features: halteDataA11yJSONAms.data.features.map(el => ({\n ...el,\n properties: {\n ...el.properties,\n profileAccessible: profileAccessibleCalculation(el)\n }\n }))\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"profileEmbarkmentSpace = profileQuestionMinimumWidth + .6","pinned":false,"hidden":false,"mode":"ojs"},{"id":1817,"value":"// TODO: alleen als er een halte is geselecteerd geven we de width en later ook andere waarden waarden mee\nfilterDataOnHalteSelect = {\n if (halteSelect !== \"\") {\n const halte = halteDataA11yJSONAms.data.features.find(\n d =>\n `${d.properties.name} ${getCardinalDirection(\n d.properties.originalData.quaybearing.compassdirection\n )}` === halteSelect\n );\n\n const halteWidth = halte.properties.accessibility.entrances[0].width.value;\n setProfileValueView(profileQuestionMinimumWidthView, halteWidth);\n mutable profileQuestionMinimumWidth = halteWidth;\n } else return 'niks geselecteerd';\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":720,"value":"md`# Weergave variabelen`","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"halteDataProfielToegankelijk = halteDataProfiel.data.features.filter(\n el => el.properties.profileAccessible\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"halteDataProfielNietToegankelijk = halteDataProfiel.data.features.filter(\n el => !el.properties.profileAccessible\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"TotaalNietToegankelijkDova = halteDataA11yJSONAms.data.features.filter(\n el => !el.properties.accessibility.accessibleWith.mobilityImpairment\n).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"TotaalToegankelijkDova = halteDataA11yJSONAms.data.features.filter(\n el => el.properties.accessibility.accessibleWith.mobilityImpairment\n).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"TotaalNietToegankelijkProfiel = halteDataProfielNietToegankelijk.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"TotaalToegankelijkProfiel = halteDataProfielToegankelijk.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"percentageToegankelijkDova = Math.floor(\n (TotaalToegankelijkDova /\n (TotaalToegankelijkDova + TotaalNietToegankelijkDova)) *\n 1000\n) / 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"percentageToegankelijkProfiel = Math.floor(\n (TotaalToegankelijkProfiel /\n (TotaalToegankelijkProfiel + TotaalNietToegankelijkProfiel)) *\n 1000\n) / 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":1908,"value":"geschouwdeHaltesPercentage = Math.floor(\n (halteDataA11yJSONAms.data.features.length /\n halteDataA11yJSON.data.features.length) *\n 1000\n) / 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"md`# Mapbox`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"halteMapboxExpression = [\n \"case\",\n [\"get\", \"profileAccessible\"],\n \"green\",\n \"hotpink\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1384,"value":"map.flyTo({ center, zoom: zoom ? 16 : 11 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1386,"value":"center = fetch(\n `https://api.tiles.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(\n query\n )}.json?access_token=${mapboxgl.accessToken}`\n)\n .then(response => response.json())\n .then(geocoding => geocoding.features[0].center)","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"md`# Filter data on Amsterdam and accessibility information`","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"halteDataA11yJSONAms = {\n return {\n type: 'geojson',\n data: {\n type: \"FeatureCollection\",\n features: halteDataA11yJSON.data.features.filter(\n el =>\n el.properties.accessibility &&\n el.properties.accessibility.entrances[0].width.value > 0\n )\n }\n };\n}\n\n// I had to filter this for ams first, but the data now only contains haltes from Amsterdam.","pinned":false,"hidden":false,"mode":"ojs"},{"id":1806,"value":"md`# Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1772,"value":"// function that changes the slider / button / other viewof cell\n\nsetProfileValueView = (profileValueView, value) => {\n profileValueView[0].value = value;\n profileValueView[1].value = value;\n profileValueView[0].dispatchEvent(new CustomEvent(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1809,"value":"function getCardinalDirection(angle) {\n const directionsFull = [\n '↑ Noord',\n '↗ Noordoost',\n '→ Oost',\n '↘ Zuidoost',\n '↓ Zuid',\n '↙ Zuidwest',\n '← West',\n '↖ Noordwest'\n ];\n const directionsShort = ['↑', '↗', '→', '↘', '↓', '↙', '←', '↖'];\n return directionsShort[Math.round(angle / 45) % 8];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1956,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`# Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"import { halteDataA11yJSON } from '@jurb/haltebestand-ndov-loket-xml-a11yjson'","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"import { inputsGroup } from '@bumbeishvili/input-groups'","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"mapboxgl = {\n const accessToken =\n \"pk.eyJ1IjoianVyaWFuIiwiYSI6ImNqNTJlMTAzYzBmajEyd242ank0ZGppam8ifQ.JlOhR91CJQnc3U12pbMQwQ\";\n const gl = await require(\"mapbox-gl\");\n if (!gl.accessToken) {\n // https://www.mapbox.com/help/how-access-tokens-work/\n gl.accessToken = accessToken;\n const href = await require.resolve(\"mapbox-gl@1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import {\n slider,\n radio,\n select,\n checkbox,\n button,\n input\n} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1379,"value":"import { submit } from \"@mbostock/more-deliberate-inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}