Making an interactive Map of San Diego
Since I posted my last JavaScript project there were some students who wanted to know how I created my map. So here I am going to break down into some easy steps what I did to do so. If you want to see the original demo of my project you can view it here.
First I looked around for a map that looked like it would be a good fit for what I had in mind. After shaking the google tree for a while, I found sandiego.org, a website with a lot of free promotional travel material that had the perfect map.
Then having already decided on my hikes I wanted to feature, I super imposed buttons over the map and placed them exactly where I wanted them.
For the buttons I gave each of them a unique id so that I could play with their individual positioning in CSS. I also gave them a class of “dot” so I would be able to call them later in my JavaScript.
I positioned each hike using the “top” and “left” properties and used trial-and-error until they were in the spot I was happy with.
In my JavaScript function I used querySelectorAll to collect my “dots”, which I then converted from a Nodelist to an Array.
Knowing now that I was dealing with two arrays, one filled with my buttons and one with my hiking objects. I made it easy on myself and put them in order beforehand. I added a for loop that created an event listener for each button. Through each iteration I passed the current “i” value to a seperate function that bridged each button with a corresponding object from my hikes.
Once I got the functions working, I ended up going back and adding a hover effect in my CSS. As a developer it is important to make your UI feel responsive and it added a nice touch.
And there you have it! I hope that explaining my step by step process helps others who are learning how to make fun, responsive UI’s. If you have any questions please let me know!