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!
Paste your map in this space.
And paste in your code for Part B as well!
Question: Describe your process. What type of locations have you created a map for? What was the most difficult aspect of this process? What parts were more intuitive? And describe your outputs. What does the map look like? Does it work? And finally, what have you learned about the process of coding?