Zeyao – LM – GeoJsonProject

For this project, I used part of Ashley’s data of the tram in Berlin. However, I realized that it is hard to remake the visualization of those data. I noticed that one of the properties is what are near the stations, so I thought I might find the coffee shops which are close to the tram station, and find the data of their active time. I collected 7 coffee shops’ name, coordinates, and their active time. It took me a while to do this, and it was really hard to find some because some tram stops were too close to each other.

Here are part of the data:

Then my idea was that I used a slide bar to control the active hour, and show whether the coffee shop was busy or not. The first thing I did was to use the googleMaps API and create a map. Then I tried to load the GeoJson in to the map. However, I tried so many different ways and it would not work. First, I tried to just convert the geoJson file to simple javascript, and use the function addGeoJson(data), but it wouldn’t work. Then I uploaded the geoJson file to my website server, and tried to put url into the loadGeoJson function, it showed the issue of “Access-Control-Allow-Origin”. Basically, this is the issue when you used different host for different files and tried to combine it together. So I decided to make a local server. Here is the terminal screenshot that I have for the local server, then it works.

Then I used the GUI under the p5.js and made a slide bar to control the active hours. I learned the GUI from the nature of code, however I got confused by how to get the number of the index from the geoJson file, and control it. I called Ada, and she helped me with that. Basically, geoJson file is a combination of different arrays and all I need to do is to console.log the data and go deeper and find out. geoJson.features[15].properties.active_time[params.hours] this is what Ada helped me got. it hid here! Then I could use slide bar to control the index and get the data that I want.

Leave a Reply