My Interactive Web Map



1. The purpose of this map is to show you another version of the surrounding around the River and trail shop. You also can zoom out or relate this area to where you are.

2. This interactive web map was built by adding in a map link from Leaflet into a new html file titled Lab 4. We also added in a javascript source from leaflet as well. I decided to add the map into the content of the html page but underneath my heading. I then took the latitude and longitude from the http://itouchmap.com website. I used a MapQuest API key to along with the source from the website to help with the layers control. I then took style code and put in which size I wanted my map to be (I chose height:500px and width:1000px and it fit my page. The last part that needed to be added was the interactive features. To do this I opened my .shp files in QGIS and saved them as GEOJSON files, which I then opened in notepad and copied and pasted it into a new javascript file in Dreamweaver.

3. To make this interactive map I had to use html to adjust my Lab 4 template, then javascript to edit within the script tags. I also had to open QGIS (which I had never previously used) and learn a bit about that program.

4. I dislike that my map is very basic, I wish I could add in pictures of the actual sites to pop up in a inset, or some unique variable on it.

5. If I had more time I would have liked to change the colours of the pop ups on the map, or used unique icons to add some visual interest

6. The most frustrating part of this map was pretty much the entire process from start to finish. Every stage comes with it's individual challenges.

7. The most awesome part of this lab was when the lab appeared on my website because it means it worked! It is exciting as well to learn this skill as I can see how helpful it will be in the future and perhaps open new doors career-wise.

8. A fellow classmate showed me this website which is helpful: http://www.w3schools.com/js/.