{"id":21293322,"url":"https://github.com/ejw-data/leaflet-citibike","last_synced_at":"2025-03-15T16:44:28.397Z","repository":{"id":45153909,"uuid":"513371725","full_name":"ejw-data/leaflet-citibike","owner":"ejw-data","description":"Leaflet map showcasing the use of custom markers associated with layers","archived":false,"fork":false,"pushed_at":"2023-09-20T03:29:26.000Z","size":11058,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-22T06:47:07.621Z","etag":null,"topics":["d3js","leafletjs"],"latest_commit_sha":null,"homepage":"https://ejw-data.github.io/leaflet-citibike/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ejw-data.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-13T03:49:39.000Z","updated_at":"2022-07-13T03:58:17.000Z","dependencies_parsed_at":"2025-01-22T06:51:10.311Z","dependency_job_id":null,"html_url":"https://github.com/ejw-data/leaflet-citibike","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejw-data%2Fleaflet-citibike","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejw-data%2Fleaflet-citibike/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejw-data%2Fleaflet-citibike/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejw-data%2Fleaflet-citibike/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ejw-data","download_url":"https://codeload.github.com/ejw-data/leaflet-citibike/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243762236,"owners_count":20343976,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["d3js","leafletjs"],"created_at":"2024-11-21T13:54:20.054Z","updated_at":"2025-03-15T16:44:28.377Z","avatar_url":"https://github.com/ejw-data.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Leaflet Citibike Map  \n\nAuthor:  Erin James Wills, ejw.data@gmail.com  \n\n\u003eNote:  This activity was originally part of a data science bootcamp but I modified much of the content and added to this repo.\n\n\n**Overview:** ``` Included in this repository are seven different versions of a Leaflet map using the same Citibike api information.  The first six version can be found inside folders and the seventh version is located in the root directory.  ```  \n\n## Outcomes  \n\nBelow are three examples of what the content looks like.  When the page loads there should be no markers added to the map.\n\n![On Page Load](./images/citibike_load.png)    \n\nBy selecting the overlay controls in the upper right corner, you can add markers to the map.  \n![Empty Stations](./images/empty_stations.png)  \n\nHere is a map with all the markers added.  \n![All Bike Stations](./images/all_stations.png)  \n\n## Repo Contents\n\n*  Two of the folders are labeled deprecated because those maps use an older version of D3js, mapbox.com tiles that require the use of an API Key, and several other small changes relative to the current Leaflet recommencations.  \n   *  If you want to run these files, you will need to sign up for a mapbox.com account and add your default api token to `config.js` in the js folder.  \n*  Folder 03 is very similar to the existing basic version found in the class repo but with the code written without functions.\n*  Folder 04 is a modified version of the Advanced class activity that is more linear (does not use functions) and can be a bit easier to follow.\n*  Folder 05, 06 are refactored versions of Folder 04.\n*  Folder 07 was removed and content was placed in the root directory.  The files located in the root is my preferred method of writing it since it does a couple things:  \n   *  It merges the 2 API datasources without assuming that each list is ordered by id's identically.  My code can have the objects in random order and it will still merge the content.  \n   *  I have structured the code to be largely broken into sections like 1) Map Setup (no data needed), 2) Legend Setup (data needed), 3) Creating and Adding Markers (data needed).  \n   *  Each section and function typically only serves one purpose\n   *  I have two functions which act only as lookup/conversion functions.  I almost always pull this type of functionality out into its own function at the top or bottom of my code.  \n\n\n## Packages\n\nd3.js - Leaflet dependency and loads data  \nLeaflet.js  - Map Generation  \nLeaflet.css  - Map Generation  \nLeaflet.extra-markers.js  - add custom markers  \nmoment.js - time formatter (used only for the legend)\n\n\n## Data Source  \nThe data comes from the citibike api.  \n*  https://gbfs.citibikenyc.com/gbfs/en/station_information.json  \n*  https://gbfs.citibikenyc.com/gbfs/en/station_status.json  \n\nBelow are sample outputs of each api endpoint.  As you can see the api results are station lists that are in the same order and have a common key between them:  `legacy_id`.   Folders 01 - 06 combine these two lists in the javascript assuming the order is the same.  Folder 07 assumes the lists have a random order and need to be matched on the `legacy_id`.  \n\n![Station Information](./images/station_information_json.png)  \n\n\n![Station Status](./images/station_status_json.png)  \n\n\n## Setup and Running  \n1.  Clone the repo to you local machine.  \n1.  Open the folder in VSCode (or your IDE of choice).\n1.  You can use the python httpserver to deploy the `index.html` through a terminal program.  I prefer to use the VSCode Extention called `LiveServer`.  Once installed you can right click on the `index.html` file and select `View with LiveServer`.\n\n\n\n\n## References\n[Extra Markers](https://github.com/coryasilva/Leaflet.ExtraMarkers)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fejw-data%2Fleaflet-citibike","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fejw-data%2Fleaflet-citibike","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fejw-data%2Fleaflet-citibike/lists"}