Project 3: Coding Web Maps
1. Downloading Brackets (www.backets.io)
1. Opening the file GUS0821_Fall2017_Project3_Code.html (the code we’ll work with in the assignment) from the Project 3 assignment tab at bboard.
1. Opening, exploring with, and editing the Project 3 file in Brackets and viewing the results in Google Maps.
If you have questions about these tools, please post them to the VoiceThread. Or contact me directly.
In this lab, you will use a code editor (Brackets) to write a snippet of code that will render a map via Google Maps. This process is the very heart of the Open Application Programming Interface (API) that we discussed in previous weeks. The fact that we can interact with the awesome data resource that is Google Maps rests on the basic process we’re undertaking in this lab. Our approach will be fairly minimal, but you can imagine far more complicated and involved exchanges with the API. The goal of this lab is to show you how simple this process is in its essence!
The basic process in Brackets will be:
a) Make some changes to code for drawing a map of Cheesesteak restaurants in Philly and save them (in Brackets).
b) Once saved, you can preview the changes (by clicking on a thunderbolt icon, letting you know that the edits you’ve made are working).
There are great resources for using brackets and troubleshooting. Bracket itself links to this one: https://github.com/adobe/brackets/wiki/Troubleshooting.
Once you have Brackets installed and the Project 3 html file opened, follow these steps:
Task 1: Change the title of the map
Part of the code, below, includes the title of the map (presently called “Title”). You see it between the <h1> tags below. You’ll want to change it to something more specific and meaningful.
NOTE: once you make this change, save your changes (as you would in any file, and give the file a name as we have in previous labs). Then preview the map and see if your changes have been implemented. It is a good idea to do this frequently, saving changes and previewing to make sure that the changes are correctly made and the code still runs.
Task 2: Change the by-line
In the same snippet above, you’ll notice that the author of the map is me. Change this to your name.
Task 3: Change the color of the background
Locate the portion of the original code that pertains to the color of the background.
#f4f142 is the html code for a color. Again, at w3schools, there’s a great resource for understanding and selecting colors (https://www.w3schools.com/colors/colors_picker.asp).
Find a color you’d like to use and modify the code in the original text. In other words, #f4f142 is yellow. Pick a different color using the link above and replace the existing code.
Task 4: Change the color of the text
Now locate the portion of the original code that identifies the text color.0
#0D000 (those are zeros, not the letter…) is pretty close to black. Select a color that works well with the background color you have chosen.
Task 5: Add a cheesesteak location.
In the code, you’ll see “var cs =” is a command that creates a new variable, cs (for “cheesesteaks”), followed by a list of names of cheesesteak vendors in [brackets]. This list of names is called an array, which is basically a list of values that that the variable “cs” takes on. For more information on arrays, the w3schools website has a great reference: https://www.w3schools.com/js/js_arrays.asp.
Search for an additional cheesesteak place that is not mentioned in the array ‘var cs’. You can do this using Google to search for cheesesteak locales in Philadelphia and mapping the result, making a note of the latitude and longitude of the additional locale. Replace “Oregon Steaks” with the name of location you just identified by replacing the highlighted text below (make sure the name is within double quotation marks!).
Task 6: Change the latitude and longitude of the first entry in ‘var CsCoord’
Notice the code now creates an array of lat/lon coorinates for the various locations. Modify the code to include the coordinates for the location you are using to replace the Oregon Steaks location. In other words, use the coordinates of the new location and replace the values highlighted below. NOTE: no need for quotation marks, which are used for text fields, because these are numeric.
Task #7: Modify the Yelp reviews information
There are two more arrays to edit. These list the Yelp review info for the new location you just added above (the number of stars and the number of reviews overall).
In the ‘var csStar’ array, replace the first entry to the right of the square brackets (3.5) with the number of stars the cheeseteak location you chose has on Yelp). To determine this, search your new location at www.yelp.com (or on a Yelp app on your phone if you have one; if you don’t…).
In the ‘var csReviews’ array, find the number of reviews your cheesesteak place has on Yelp. Replace the first entry in the ‘var csReviews’ array (89) with the number of reviews from the new location.
Task #8: Creating a function
CAREFUL: Here you’re just making a note of how a function is created. You need not and should not modify this block of code. I just want you to understand what it’s doing.
Here we’ll take those Yelp rating arrays from Task# 7 and combine using a “function” to produce a “Yelp Factor”. The function multiplies the number of Yelp stars by the number of Yelp reviews. Click here for more about functions – please don’t touch the function!
Task #9: Creating a loop
Just like Task #8, just study the block of code that creates a “for loop”. Do not modify i!!
The “for loop” allows the program to loop through the data arrays you have worked with above, performing the multiplication function from Task # 8 for each object in the arrays. So it will take the first entry from each array and walk through the function created above, and then the next. And when it has looped through all the values, it will move on. (For more information on loops, go here.)
Note: within the loop, you see reference to the arrays modified in previous tasks. For instance, the first line mentions “cs.length”. This is telling the program to run through this loop for each instance within the cs array that list names of cheesesteak locales (i.e., the length is 6 because there are six locations in the list). You’ll notice that the loop also creates a new variable YelpFactor by working with the csStar and csReviews arrays from above within the loop.
Please don’t touch the for loop!
Inside this for loop is also a method, .bindpopup. Essentially, you are telling the program what to include in the information that is included in a Google Map pop up. (To find more about methods here.)
As I mentioned – we are sending a request to an external server through the internet. This ‘leaflet’ server which we have a link to in the header of our .html file then spits back the map (and it’s functionality) that we see on the screen.
If you’re curious, here’s some documentation on the leaflet server: http://leafletjs.com/reference-1.0.3.html.
Question: Explain your process a bit, the choices you make, and the result. Think about the code specifically. Can you see the results of your modifications on the resulting map?
Paste your resulting map into this lab.
PART B: Repeating this process using data of your own
You knew this would happen, right? Now that you’ve seen how this works, choose a different kind of business (bookstores, liquor stores, a type of restaurant, anything that will have a Yelp review). Search for 6 (six) different locations. Change the portions of the code as we did above, this time changing all of the names, all of the coordinates, and all of the Yelp info.
You should also change the title. Feel free to change the background and text color.
You may also change the variable names (the arrays) to make them more suitable. But you can also just use the old ones (even though cs stands for “cheesesteak”). If you do want to change the variable names, you’ll also need to change them in the loop function. That can get tricky. But it’s also pretty straightforward.
Also note, depending on where the locations are and how spread out they are, you may want to modify the level of zoom and/or recenter the map. I describe this in the VoiceThread. But the pertinent block of code is right here:
Note: zoom:13 is the starting point. If you make this number smaller, the map will zoom out. Experiment with it.
Also note: the coordinates are the center of the map. If you want to re-center the map, simply change to coordinates. Again, experiment!