Creating An Interactive Web Map
By: Joshua Ali
Geovis project Assignment @RyersonGeo, SA8905, Fall 2018
Data
The data used for this map was retrieved from New York City Open Data (https://opendata.cityofnewyork.us/) and automobile collisions data set, it has information on collision from 2011 to present. This will have all information needed for the map.
Using Mapbox
The interactive map will be using map box GeoLibrary JavaScript, so an account must be created with map box. This is a free sign up and a pay as you go account (pretty much if you use it a lot you have to pay) (https://www.mapbox.com/signup).
Creating the Base Map
The next step is to create the base map that was used to display my data. To write the code I used a text writing software. The two I switched between using is Sublime (https://www.sublimetext.com) and Codepen, (https://codepen.io) they are both free software’s that can be used. Now you will need to write a html doc that will be used to display your map. The doc was written below for optimal settings and will be built upon with more code later to customize the map.
Now that the setting style for the map functions have been in place, the map needs to be linked with a mapbox access token that is created from my account. By doing this the html doc will be linked to my account.
A script was created using the var function to create a new map that will use as style option that is linked to your account. In my case I decided to use the dark map background as my style for the map. Also, in the script below the latitude and longitude was selected so when the map is opened it will be looking at New York City.
With all the current script within the text editor this document can be opened with chrome browser to show the base map. The image below shows what would come up.
Customizing the Base Map
Now that the base map of the map is created, I can begin adding and customizing NYC automobile collisions to the map. To connect the data downloaded to the map created they first need to be in the same project folder as the base map html doc made above.
To do this a local server has to be made on the computer so the base map made can draw information from the NYC database to be projected. The api also needs this to continuously update the projected data to the interactive tool that will be added later. This was done by downloading python and running Python’s SimpleHTTPServer. Using the command control panel, the local server was run on my laptop. This is useful because changes made in the coding on the text editor of the map can be seen immediately on the html map doc since the local host is constantly updating the files.
To connect the collision data to the base map, a map load function was used to link the id called collisions along with the data file url and the settings to display the collisions on the map as circles. Also the circle radius based on 0 to 5 was linked with their own selected colours and circle-opacity to 0.8 so depending on how many casualties occur they will have their own colour and partially transparent so they will not bock each other.
With the data now linked to the base map, a legend was created in the code by making a div section inside of the console. Additionally, to this some CSS was added to style the colour gradient so it matches the colours of the circles.
This is what the map will look like with the data and legend.
Adding Time Slider and Interactivity
To add a time slider the slide bar function was added as a div to the body of the html document. This will pull information of the time of accidents and display them on the map. To add the interactive a filter was added to obtain the time of collisions from the database. The coding will be shown below along with a screen shot of the functional map.
Final Touches
The map is almost complete, the last function that was added to it was a filter that looks at the automobile collisions that occurred during the week compared to during the weekend. To create this an if function was added to the text editor so that if a collision occurred on a Saturday it would be false, true. This allows the data to show for week days compared to weekends. This is seen in the coding below. To add the function that allows you to decide on what part of the data to look at another div class session was added to filter the days.
The below script shows the div class session that created the slider bar and button selection for the final map legend.
Final Map
Below is screen shots different settings selected for the interactive map.
