This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Three ways to add Maps


Back in our chat, there was a lot of interest in using the maps plugin with videos.  If you've been thinking about doing that and want to know how -- this is it!   Here are three options

Example 1: Map plugin showing Google Maps

Like other plugins, you will need to set aside a section in the page's HTML layout to hold the map:

<div id="mapdiv" style="width:400px;height:400px;"></div>

Then add some JavaScript with a list of important values that Popcorn will use to operate the map plugin.

.map({

 

    start: 5,   // show the map

    end: 10,  // end the map

    location: "Boston, MA",  // where to point the map

    zoom: 12, // zoom level of the map

    target: "mapdiv"  // the ID of the map's place in the HTML

})

There are also options to set the map type (type: "ROADMAP", type:"SATELLITE", or type:"HYBRID"), or to set the latitude and longitude directly instead of using location: "placename".  There's also StreetView, as described by the developer here: http://dseifried.wordpress.com/2011/02/08/popcorn-js-google-maps-streetview/

Working link: http://jsfiddle.net/tNhyt/47/

Example 2: OpenMap plugin showing OpenStreetMap

OpenMap works the same way as the Google Maps plugin, except with OpenStreetMap, NASA World Wind, and USGS terrain maps - all open data sources.  OpenStreetMap usually loads reasonably well, but the others can be slow.

There is no StreetView available in OpenStreetMap.

Example 3: OpenMap plugin with clickable icons

The OpenMap plugin also supports adding clickable icons to your map.  For example, this example ( http://mapmeld.appspot.com/popcorn.openmap.html ) adds a marker where the Vehicle Assembly Building is at NASA's launch center in Florida using this code:

 

.openmap( {
  start: 0,
  end: 30,
  target: 'map2',
  lat: 28.621597,
  lng: -80.693722,
  zoom: 9,
  markers: [
    {
      lat: 28.586274,
      lng: -80.650882,
      icon: "http://google-maps-icons.googlecode.com/files/museum-science.png",
      text: "Vehicle Assembly Building",
      size: 16
    }
  ]
})
 
The "markers" parameter opens and closes with square brackets [ ]  which mean a list of items.  Our list only has one item, the marker.  We store several variables in this one marker object by enclosing them with curly brackets { }, just like the list of variables we send to plugins.

Task Discussion