43:["$","title",null,{"children":"Bike parking by [CycloParking](https://www.cycloparking.org/fr/) in Brussels | Antoine Dejonckheere | Observable"}] 4b:T901,map = { let map = this; if (!map) { map = new mapboxgl.Map({ container, center: [ 4.35, 50.85, ], zoom: 10, style: 'mapbox://styles/mapbox/light-v9', }); } yield new Promise(resolve => { map.on('load', () => { map.addSource("bikeParkingSource", { type: "geojson", data: geojson, }) map.addSource("bikePaths", { type: "geojson", data: bikesPath, }) map.addLayer({ id: "bikesPaths", type: "line", paint: { 'line-color': 'dodgerblue' }, source: 'bikePaths', }) map.addLayer({ id: 'unclustered-bikeparkings', type: 'circle', paint: { 'circle-radius': { property: 'capacity', stops: [[5, 3], [10, 6]] }, 'circle-color': [ 'match', ['get', 'Type'], 'Box', '#fbb03B', 'Parking mutimodal', '#2E9AFE', '#848484', ], }, source: "bikeParkingSource", }) map.popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false, }) map.on('mouseenter', 'unclustered-bikeparkings', function(e) { map.getCanvas().style.cursor = 'pointer' var coordinates = e.features[0].geometry.coordinates.slice() const { Box_ID: boxId, Box_Name: boxName, capacity, Type } = e.features[0].properties while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360 } var htmlContent = ` ` map.popup.setLngLat(coordinates) .setHTML(htmlContent) .addTo(map) }) }) map.on('mouseleave','unclustered-bikeparkings', function() { map.getCanvas().style.cursor = '' map.popup.remove() }) return resolve(map) }) }4c:[] 47:{"id":"00ebf0dc74efea29","slug":"bike-parking-in-brussels","title":"Bike parking by [CycloParking](https://www.cycloparking.org/fr/) in Brussels","thumbnail":"d6cabda99c8c5efa241720e786e1c928fb8dfa270af31256693309b5d6527726","access_level":"public","create_time":"$D2018-05-24T14:08:27.156Z","update_time":"$D2018-10-05T12:52:59.167Z","view_time":null,"first_public_time":"$D2018-05-24T21:08:57.832Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"fa72288832f83617","login":"antoinedejonckheere","name":"Antoine Dejonckheere","avatar_url":"https://avatars-next.observableusercontent.com/dd760212f09e049ca5106ce0ac099d575f4c966e71c93d4e47e052bcfd6097d1","tier":"starter_2024","bio":"software developer | data scientist | IT Ninja | Physics engineer","followed_by_you":false,"follows_you":false},"version":301,"publish_version":301,"role":null,"authored":false,"authors":[{"type":"individual","id":"73f8559e29a9409c","login":"antoinedejonckheere","name":"Antoine Dejonckheere","avatar_url":"https://avatars-next.observableusercontent.com/dd760212f09e049ca5106ce0ac099d575f4c966e71c93d4e47e052bcfd6097d1","tier":null,"bio":"software developer | data scientist | IT Ninja | Physics engineer","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"73f8559e29a9409c","login":"antoinedejonckheere","name":"Antoine Dejonckheere","avatar_url":"https://avatars-next.observableusercontent.com/dd760212f09e049ca5106ce0ac099d575f4c966e71c93d4e47e052bcfd6097d1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bike parking by [CycloParking](https://www.cycloparking.org/fr/) in Brussels","cells":[{"id":0,"value":"md`# Bike parking by [CycloParking](https://www.cycloparking.org/fr/) in Brussels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"md `## Introduction\nWe display the locations and the capacity of bicycle parkings with acces control available in Brussels and managed by the [CycloParking project](https://www.cycloparking.org/fr/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"md `## Result`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"container = html `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md` ## How we got there\n### Data fetching\nOriginal data has been found [http://opendatastore.brussels/en/dataset/cycloparking](https://www.google.com).\nIt has then been transformed into a JSON file [hosted on gist](\"https://gist.githubusercontent.com/antoinedejonckheere/e8ad7fdcba4e86a9cb60dc54e2d19eb5/raw/06a058fe92fbaff071bf817536d64c706d6c0237/cycloparkingdatabrussels.json\").\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"cycloparkingdata = d3.json(\"https://gist.githubusercontent.com/antoinedejonckheere/e8ad7fdcba4e86a9cb60dc54e2d19eb5/raw/06a058fe92fbaff071bf817536d64c706d6c0237/cycloparkingdatabrussels.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"otherparkingJson = d3.json(\"https://gist.githubusercontent.com/antoinedejonckheere/0feecf551c889e9bb482f7a25da58a76/raw/44cd9df64c0bb626250d54e18167f0bc09d4ecf6/bicyleParking.geojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"otherParkingFeatures = otherparkingJson.features\n .filter(feature => feature.properties.type_fr !== 'Station Villo!' && feature.properties.type_fr !== 'Box vélo')\n .map(feature => {\n feature.properties.capacity = 5\n return feature\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"bikesPath = d3.json(\"https://gist.githubusercontent.com/antoinedejonckheere/7e9f06554273832dea5dcd8449410041/raw/ac8bbbf8544cbbbfd5ec0aaf8da852bb354216f3/itinerairesVelo.geojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"md`### Data preparation\nData is parsed: GPS strings are transformed into the [lng, lat] format; parking capacity is parsed as a number.\nFinally, data is transformed into GeoJson format.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"cycloParkingFeatures = cycloparkingdata.map(parkingSpot => {\n const { GPS_Coord: latLngString } = parkingSpot\n const commaIndex = latLngString.indexOf(\",\")\n const latitude = Number(latLngString.substring(0,commaIndex))\n const longitude = Number(latLngString.substring(commaIndex + 2, latLngString.length))\n \n return {\n type: 'Feature',\n geometry: {\n type: 'Point',\n coordinates: [longitude, latitude],\n },\n properties: {\n ...parkingSpot,\n capacity: Number(parkingSpot.Capacity),\n },\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"geojson = {\n return {\n type: 'FeatureCollection',\n features: [].concat(cycloParkingFeatures, otherParkingFeatures)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"md`### Map creation and data ingestion`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md` ## Boring stuff that needs to get done`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"md `\n### You can't escape a bit of CSS\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"stylesheet = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md `### Don't use my mapbox token please :)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"mapboxToken = \"pk.eyJ1IjoiYW1kajkwIiwiYSI6ImNqaGttOGYzdTE1eXozMG8wOHZiMzZnYjYifQ.acVJMxv6eZ4_9-wnAoXCgA\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md `### Mapbox and d3 imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@0.43.0');\n mapboxgl.accessToken = mapboxToken;\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 42:null

${boxName}