This is intended to be intro post, so let’s break that logic out for another time and use a dataset Mapbox would be happy to receive for the sake of results.Step 6: Uploading our Dataset via Mapbox StudioMapbox graciously lets us upload our data via their Studio UI, which does the unthinkable; immediately upon upload, Mapbox will take the data we give it (whether it be CSV, GeoJSON, etc) and immediately parse it in a way that makes sense. Upload your dataset at https://www.mapbox.com/studio/datasets/:Uploading the raw data of our Citibike CSV.Next, Mapbox shows us a preview of our data before we even know what happened:It’s like they don’t even want us to do work.Step 7: Do It in FlaskAfter uploading your dataset via mapbox studio, you can actually redownload the data with a subtle twist: your data will be automatically formatted as GeoJSON: the format of JSON objects Mapbox uses to plot points, draw routes, etc.Since we’ve had a long day, I’ll allow you to download this pre-formatted data and hardcore the values into your Map view. You’re getting off easy for now, but next time we’re doing this programmatically ;).<!DOCTYPE html><html><head> <meta charset='utf-8' /> <title>{{title}}</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' /> <style> body { margin: 0; padding: 0; }#map { position: absolute; top: 0; bottom: 0; width: 100%; } </style></head><body><div id='map'></div> <script> mapboxgl.accessToken = '{{ACCESS_KEY}}'; const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/toddbirchardwework/cjpij1oxl3hiy2spetf5w998w', center: [-73.981856, 40.703820], zoom: 11.1,});map.addLayer({ "id": "points", "type": "symbol", "source": { "features": [{ "type": "Feature", "properties": { "start_station_name": "Central Park West & W 76 St", "end_station_name": "Central Park S & 6 Ave", "end_station_latitude": "40.76590936", "end_station_longitude": "-73.97634151" }, "geometry": { "coordinates": [ -73.973747, 40.778967 ], "type": "Point" }, "id": "000a1f944d4dd786d9e7ed04620af02b" }, { "type": "Feature", "properties": { "start_station_name": "W 64 St & West End Ave", "end_station_name": "W 70 St & Amsterdam Ave", "end_station_latitude": "40.77748046", "end_station_longitude": "-73.98288594" }, "geometry": { "coordinates": [ -73.987537, 40.774528 ], "type": "Point" }, "id": "01d8c19524f067a3f4712653265e0a49" }, { "type": "Feature", "properties": { "start_station_name": "E 20 St & FDR Drive", "end_station_name": "W 13 St & 7 Ave", "end_station_latitude": "40.73781509", "end_station_longitude": "-73.99994661" }, "geometry": { "coordinates": [ -73.975738, 40.733142 ], "type": "Point" }, "id": "038ac5403b136e34874a7278f64d4e95" }, { ————————————– (etc etc….) ————————————– }, { "type": "Feature", "properties": { "start_station_name": "Mercer St & Bleecker St", "end_station_name": "1 Ave & E 30 St", "end_station_latitude": "40.74144387", "end_station_longitude": "-73.97536082" }, "geometry": { "coordinates": [ -73.996621, 40.727063 ], "type": "Point" }, "id": "ff1daf9aadbf0cd6b788bd76f0a3f333" } ], "type": "FeatureCollection" }, "layout": { "icon-image": "{icon}-15", "text-field": "{title}", "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], "text-offset": [0, 0.6], "text-anchor": "top" } }); </script></body></html>There’s way more for us to explore in Mapbox..Stay tuned for the rest of this series as we explore generating GeoData programmatically, and build interactive applications to really get users involved in map data by letting them control constraints such as time, etc.Originally published at hackersandslackers.com on December 11, 2018.. More details