2d:null 2e:["$","title",null,{"children":"Query Daily Raleigh CitrixCycle Routes | Ryan Cooper | Observable"}] 33:[] 31:{"id":"db5e03b1daf73990","slug":"query-daily-raleigh-citrixcycle-routes","title":"Query Daily Raleigh CitrixCycle Routes","thumbnail":"621f00a816027f1dd5e3ba2d4e64035243fb1af74fd9c12833a4c834d67cfa07","access_level":"public","create_time":"$D2019-05-31T04:19:17.174Z","update_time":"$D2019-07-02T18:28:17.997Z","view_time":null,"first_public_time":"$D2019-05-31T04:24:35.094Z","has_unpublished_edits":null,"fork":{"id":"4551e31003daca5c","slug":"query-daily-raleigh-citrixcycle-data","title":"Query Daily Raleigh CitrixCycle Data","owner":{"id":"9d55030af7c597b4","login":"maptastik","name":"Ryan Cooper"}},"stars":1,"starred":false,"owner":{"type":"team","id":"9d55030af7c597b4","login":"maptastik","name":"Ryan Cooper","avatar_url":"https://avatars-next.observableusercontent.com/868e065c57a1f44e8422aaae8c978ef82dc1ada2d596eae26d808adebb8b4b6a","tier":"starter_2024"},"version":1520,"publish_version":1520,"role":null,"authored":false,"authors":[{"type":"individual","id":"cae231bf35ff5917","login":"maptastik","name":"Ryan Cooper","avatar_url":"https://avatars-next.observableusercontent.com/868e065c57a1f44e8422aaae8c978ef82dc1ada2d596eae26d808adebb8b4b6a","tier":null}],"members":[{"type":"individual","id":"cae231bf35ff5917","login":"maptastik","name":"Ryan Cooper","avatar_url":"https://avatars-next.observableusercontent.com/868e065c57a1f44e8422aaae8c978ef82dc1ada2d596eae26d808adebb8b4b6a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Query Daily Raleigh CitrixCycle Routes","cells":[{"id":259,"value":"md`# Query Daily Raleigh CitrixCycle Routes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1361,"value":"md`In April 2019 Raleigh launched a municipal bike share program called [CitrixCycle](https://citrixcycle.com/). Sponsored by Citrix, this bike share program allows riders to retrieve and deposit special CitrixCycle bikes at docking stations throughout the city.\n![](https://maptastik.neocities.org/CitrixCycle_dock.jpg)\nAccess is granted using a phone app or a fob. During each ride, GPS locations of the rider are collected at regular intervals. A feed of this data is made publicly available by City of Raleigh GIS. This notebook is meant to offer a means for exploration for daily trends in ridership for the CitrixCycle program.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"md`## Explore data by day`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"viewof date = {\n const div = html`\n Select Date
\n ` \n\n const d = div.querySelector(\"[type=date]\");\n div.value = d.value = \"2019-04-24\"\n d.onload = () => div.value = d.value\n d.oninput = () => div.value = d.value\n \n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":843,"value":"md`### Route styling parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"viewof routeOpacitySlider = {\n const div = html`\n Route Opacity:
\n \n \n `;\n const range = div.querySelector(\"[type=range]\");\n const number = div.querySelector(\"[type=number]\");\n div.value = range.value = number.value = 0.1;\n range.oninput = () => number.value = div.value = range.valueAsNumber;\n number.oninput = () => range.value = div.value = number.valueAsNumber;\n \n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"viewof routeWidthSlider = {\n const div = html`\n Route Width:
\n \n \n `;\n const range = div.querySelector(\"[type=range]\");\n const number = div.querySelector(\"[type=number]\");\n div.value = range.value = number.value = 0.5;\n range.oninput = () => number.value = div.value = range.valueAsNumber;\n number.oninput = () => range.value = div.value = number.valueAsNumber;\n \n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"viewof routeColor = color({\n value:\"#18FFFF\",\n title: \"Route Color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"viewof map = {\n let container = DOM.element('div', { style: `width:${width}px;height:${width/3}px`});\n yield container;\n \n const map = container.value = L.map(container).setView([35.777801,-78.642712],15);\n let base = L.esri.basemapLayer('DarkGray').addTo(map)\n ccRoutesFeatureGroup.addTo(map)\n \n let overlayLayers = {\n \"CitrixCycle Heat Layer\": ccRoutesFeatureGroup,\n \"CitrixCycle Open Docks\": ccDocksLayer,\n \"Existing Bike Facilities\": bikeFacilitesLayer,\n \"Raleigh Greenway Trails\": ralGreenwaysLayer\n }\n L.control.layers({}, overlayLayers).addTo(map)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"md`## Layers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1400,"value":"md`### CitrixCycle Routes Layer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1334,"value":"md`The CitrixCycle routes data are accessible via a REST via ArcGIS Online.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1403,"value":"ccRoutesUrl = \"https://services7.arcgis.com/0yFAwkEJoHAKK6CF/arcgis/rest/services/citrix_cycle_routes_20190420_20190526/FeatureServer/0\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"md`We want to visualize the routs for a given date selected via the Select Date input. To help this, we create an empty [Leaflet FeatureGroup](https://leafletjs.com/reference-1.5.0.html#featuregroup) into which we can remove the previously selected day's route data and add the newly selected day's route data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1405,"value":"ccRoutesFeatureGroup = L.featureGroup()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1339,"value":"md`Here we setup the logic for updating the CitrixCycle route data when a parameter changes. Note, there are a few parameters that could trigger this block to run:\n- url: A new date is selected\n- color: A new color for the lines is selected\n\nWhen one of these parameters changes, the previous instance of ccRoutesFeature is removed from the map by running ccRoutesFeatureGroup.clearLayers(). Then we use the special esri-leaflet layer type, L.esri.featureLayer() to create an updated instance of the heat representation of the newly parametrized layer. Finally, that new layer is added to the map via ccRoutesFeatureGroup.addLayer(ccRoutesFeature)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1409,"value":"ccRoutesLayer = {\n ccRoutesFeatureGroup.clearLayers();\n let ccRoutesFeature = L.esri.featureLayer({\n url: ccRoutesUrl,\n fields: ['OBJECTID', 'id', 'unlockedAt'],\n timeField: 'unlockedAt',\n from: moment(date),\n to: moment(date).add(1, 'days'),\n style: feature => {\n return {\n color: routeColor,\n weight: routeWidthSlider,\n opacity: routeOpacitySlider\n }\n }\n });\n\n return ccRoutesFeatureGroup.addLayer(ccRoutesFeature);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1132,"value":"md`### CitrixCycle Open Docks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1345,"value":"md`While there are some some datasets either through Google Maps or ArcGIS Online showing where CitrixCycle docks are or will be located, they don't appear to be linked directly to the maps on the CitrixCycle website or in the app. After some digging, I found the an API endpoint for the CitrixCycle docks data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"ccDocksUrl = 'https://citrixcycle.com/stations/stations/'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1347,"value":"md`I had some issues fetching the JSON feed directly. There appears to be some sort of CORS issue. Regardless, I found a [CORS bypasser](https://glitch.com/~cors-bypasser) on Glitch to help me out. I remixed it so that it is now my own personal proxy!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"ccDocksJSON = (await fetch(`https://maptastik-cors-bypasser.glitch.me/bypass/${ccDocksUrl}`)).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"md`The data returned from the CitrixCycle API are returned as JSON, but not the GeoJSON that Leaflet prefers. However, with the help of turf.js it is relatively simple to parse the JSON and transform it into GeoJSON.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"ccDocksGeoJSON = {\n let featuresArray = [];\n ccDocksJSON.forEach((x) => {\n if (x.location && x.type == \"OPEN\") {\n let geometry = x.location.reverse()\n let properties = {\n \"id\": x.id,\n \"locking_station_type\": x.locking_station_type,\n \"description\": x.description,\n \"address\": x.address,\n \"stocking_full\": x.stocking_full\n }\n let feature = turf.point(geometry, properties)\n featuresArray.push(feature)\n }\n })\n \n return turf.featureCollection(featuresArray)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1355,"value":"md`With the CitrixCycle docks data transformed into GeoJSON, we can create a layer represent the locations. While there are lots of ways to draw points, in this case we'll show circle markers sized based on the carrying capacity of the docking station.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"ccDocksLayer = L.geoJSON(ccDocksGeoJSON, {\n pointToLayer: (feature, latlng) => {\n return L.circleMarker(latlng, {\n radius: feature.properties.stocking_full / 2,\n fillColor: '#EF9A9A',\n fillOpacity: 0.5,\n color: '#E57373',\n opacity: 1,\n weight: 1.5\n })\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1101,"value":"md`### Existing Bike Facilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"bikeFacilitesLayer = L.esri.featureLayer({\n url: 'https://services.arcgis.com/v400IkDOw1ad7Yad/arcgis/rest/services/Existing_Bike_Facilities/FeatureServer/7',\n style: (feature) => {\n return {\n color: '#ffffff',\n dashArray: \"2, 5\",\n weight: 1.5\n }\n } \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"md`### Greenway Trails`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"ralGreenwaysLayer = L.esri.featureLayer({\n url: 'https://services.arcgis.com/v400IkDOw1ad7Yad/arcgis/rest/services/Greenway_Trails_All/FeatureServer/0',\n where: \"STATUS='Existing'\",\n style: feature => {\n return {\n color: '#FFB300',\n weight: 1,\n dashArray: \"2, 5\"\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"md`### Load Leaflet and plugins\nWhile loading libraries using Observable is generally straightforward, extending Leaflet with plugins was less clear to me. See [this thread](https://talk.observablehq.com/t/extending-leaflet-with-plugins/2006?u=maptastik) for some explanation on how and why to do it the way below\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"L = {\n const r = require.alias({leaflet: 'leaflet@1.4.0'});\n const L = await r('leaflet');\n if (!L._css) {\n document.head.appendChild(L._css = html`\n \n `);\n }\n L.esri = await r('esri-leaflet');\n return L;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"md`### moment.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1032,"value":"moment = require('moment')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1249,"value":"md`### turf`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"turf = require('https://npmcdn.com/@turf/turf/turf.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1252,"value":"md`### Observable color input`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1372,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"