md`One extra thing we can do is find the number of unique bikes were ridden for the selected day. The work for this can primarily be done via the ArcGIS Server where the CitrixCycle data reside, but it requires building a query to the REST service specifically to return the unique ride ID values logged on the selected date. Unfortunately there is no field linking each point to a specific ride, but we can at least get some sense of fleet utilization.`

count = {
  let from = moment(date).valueOf();
  let to = moment(date).add(1, 'days').valueOf();
  let url = `${ccRidesUrl}/query?where=1%3D1&=&outFields=objectid%2Cid&returnGeometry=false&groupByFieldsForStatistics=id&outStatistics=%5B%7B%0D%0A"statisticType"%3A"count"%2C%0D%0A"onStatisticField"%3A"id"%2C%0D%0A"outStatisticFieldName"%3A"count"%0D%0A%7D%5D&f=pjson&time=${from}%2C${to}`
  let result = (await fetch(url)).json()
  return result
}

md`### CitrixCycle Open Docks`

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.`

ccDocksUrl = 'https://citrixcycle.com/stations/stations/'

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!`

ccDocksJSON = (await fetch(`https://cors-bypasser.glitch.me/bypass/${ccDocksUrl}`)).json()

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.`

ccDocksGeoJSON = {
  let featuresArray = [];
  ccDocksJSON.forEach((x) => {
    if (x.location && x.type == "OPEN") {
      let geometry = x.location.reverse()
      let properties = {
        "id": x.id,
        "locking_station_type": x.locking_station_type,
        "description": x.description,
        "address": x.address,
        "stocking_full": x.stocking_full
      }
      let feature = turf.point(geometry, properties)
      featuresArray.push(feature)
    }
  })
                 
  return turf.featureCollection(featuresArray)
}

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.`

ccDocksLayer = L.geoJSON(ccDocksGeoJSON, {
  pointToLayer: (feature, latlng) => {
    return L.circleMarker(latlng, {
      radius: feature.properties.stocking_full / 2,
      fillColor: '#EF9A9A',
      fillOpacity: 0.5,
      color: '#E57373',
      opacity: 1,
      weight: 1.5
    })
  }
})

md`### Existing Bike Facilities`

bikeFacilitesLayer =  L.esri.featureLayer({
  url: 'https://services.arcgis.com/v400IkDOw1ad7Yad/arcgis/rest/services/Existing_Bike_Facilities/FeatureServer/7',
  style: (feature) => {
    return {
      color: '#ffffff',
      dashArray: "2, 5",
      weight: 1.5
    }
  }  
})

md`### Greenway Trails`

ralGreenwaysLayer = L.esri.featureLayer({
  url: 'https://services.arcgis.com/v400IkDOw1ad7Yad/arcgis/rest/services/Greenway_Trails_All/FeatureServer/0',
  where: "STATUS='Existing'",
  style: feature => {
    return {
      color: '#FFB300',
      weight: 1,
      dashArray: "2, 5"
    }
  }
})

md`### Load Leaflet and plugins
While 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
`

html`<style>
  .metric {
    text-align:center
  }
  .metric-value {
    font-size:3rem;
  }
</style>
<div class="metric"text-align:center>
  <div><span class="metric-value">${count.features.length}</span><br>Bikes Used for Rides</div>
</div> `

md`The CitrixCycle rides data are accessible via a REST endpoint on City of Raleigh's ArcGIS Server.`

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.
![](https://maptastik.neocities.org/CitrixCycle_dock.jpg)
Access 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.`

viewof heatColor = color({
  value:"#18FFFF",
  title: "Heat Color"
})

md`Here we setup the logic for updating the CitrixCycle ridership data when a parameter changes. Note, there are several parameters that could trigger this block to run:
- <code>url</code>: A new date is selected
- <code>radius</code>: The radius for the heat layer is changed
- <code>blur</code>: The blur of the heat layer is changed
- <code>gradient['0.5']</code>: The middle value for the heat gradient is changed.

When one of these parameters changes, the previous instance of <code>ccRidesHeatFeature</code> is removed from the map by running <code>ccRidesHeatFeatureGroup.clearLayers()</code>. Then we use the special esri-leaflet layer type, <code>L.esri.Heat.featureLayer()</code> to create an updated instance of the heat representation of the newly parametrized layer. Finally, that new layer is added to the map via <code>ccRidesHeatFeatureGroup.addLayer(ccRidesHeatFeature)</code>`

md`### moment.js`

moment = require('moment')

md`### turf`

turf = require('https://npmcdn.com/@turf/turf/turf.min.js')

md`### Observable color input`

import {color} from "@jashkenas/inputs"