VFE's in Google Earth
Click on the blue placemarker to get started
Miller VFE 2.0 BETA
Note this section is about putting the VFE together for the end user. For more information on the VFE process, go here.
WARNING: I've tried to spell this out as much as I can...you will need to be comfortable with creating webpages, limited HTML and other general computer skills. This whole process is in its beta state, email me sarahATmillerscience.com if you have questions about VFE's or the process of putting them together. This VFE is my sister's. Questions about what you see in the pictures should be directed to her (HEZ EMAIL).
Creating a interactive web based VFE using free/cross platform programs.
- Create webpage for the specific field experience (this page was done using Google Sites). You're on your own here, but there are plenty of tutorials out there if you need them.
- Create an online database of the pictures you will be using picasa, flickr, etc.
- Plan out your VFE
- Choose a picture that shows an area of your VFE. I will refer to this as the "overview".
- Match up the close ups with you're overview. Make a list and write it down/type it up. For example:
- Tree stump
- Sand at edge of lake
- Find the x,y coordinates on the overview for each coordinate. There are a bunch of ways to do this, but you can find the free/cross platform one here. Go back to your list and write down the top, left coordinates followed by the bottom, right coordinates. Your list should look something like this:
- Tree stump 143,379,178,398
- Sand at edge of lake
- Make a map of your VFE area.
- Go to Google Maps, choose my maps, pick create a new map link, make sure the map is public
- Find the location of your VFE
- Add a placemark (balloon shaped thing) and put it where your overview is.
- Add a title (for simplicity's sake I called mine overview)
- Under description you can add text (I didn't for pedagogical reasons)
- Add your overview picture
- select edit HTML
- copy and paste the following HTML into the placemarker box <img src="THE PICTURE'S WEB ADDRESS GOES HERE" USEMAP="#overview"/>
- Then copy the overview picture's location and paste it between the quotes. Mine looked like this: <img src="http://lh6.ggpht.com/_P1XMOHSe-k8/TD9HVs14iOI/AAAAAAAAANo/7TUKAnwr17c/s640/IMG_3087.JPG" USEMAP="#overview">
- To see if you've done it correctly, hit OK, then Done on the left side of the screen. It works if when you click on the placemarker your picture shows up (you'll have to hit Edit on the left side to do the next step).
- Creating clickable "hotspots" on your picture
- Copy and paste the following HTML into the placemarker box beneath your picture HTML <map name="overview "> <area shape="rect" coords="YOUR LIST OF COORDINATES" href="URL"></map>
- Mine looks like this <map name="overview"> <area shape="rect" coords="0,0,178,398" href="http://lh6.ggpht.com/_P1XMOHSe-k8/TD9I-FJqWaI/AAAAAAAAAPE/9-7DqRLyjbo/s512/IMG_3123.JPG"> </map>
- Hit OK, then Done on the left side of the screen.
- Copy your map's KML URL buy right-clicking (command click) the View in Google Earth link and copy the URL.
- Save by hitting the Save button.
- Embed a KML Gadget onto your webpage
- I'm using Google sites and I used this one. You do have some choices though, if you're so inclined.
- For Google Sites, sign in to your site, and select edit. Go to Insert, then down to More, then add by URL. The URL for the one I used is http://code.google.com/apis/kml/embed/embedkmlgadget.xml
- Paste the My Maps URL into the top box