<title>Te Whanga nui a Tara</title>
<h1>Te Whanga nui a Tara</h1>
<h2>Wellington</h2>
<div id="map-div" style="width: 512px;height: 512px;"></div>
function onFeatureSelect(clickInfo) {
clickedFeature = clickInfo.feature;
if (clickedFeature.attributes.video == "video") {
popup = new OpenLayers.Popup.FramedCloud("featurePopup", // an ID for this popup
clickedFeature.geometry.getBounds().getCenterLonLat(), // anchor to the icon
new OpenLayers.Size(240, 360), // set height and width of the window
clickedFeature.attributes.name + "<br>" + // HTML displayed inside the window
clickedFeature.attributes.desc + "<br>" + "<a href=" + clickedFeature.attributes.webpage + ">" + "Visit" + "</a><br>", null, // used for other applications
true, // have an [x] to close the Popup
onPopupClose // call another function when the Popup is closed
);
} else {
popup = new OpenLayers.Popup.FramedCloud("featurePopup", // an ID for this popup
clickedFeature.geometry.getBounds().getCenterLonLat(), // anchor to the icon
new OpenLayers.Size(240, 360), // set height and width of the window
clickedFeature.attributes.name + "<br>" + // HTML displayed inside the window
clickedFeature.attributes.desc + "<br>" + "<a href=" + clickedFeature.attributes.webpage + ">" + "Visit" + "</a><br>" + "<br><iframe src='" + clickedFeature.attributes.video + "' width='350' height='220' frameborder='0' allowfullscreen></iframe>", null, // used for other applications
true, // have an [x] to close the Popup
onPopupClose // call another function when the Popup is closed
);
}
// let feature and popup 'know' about each other
clickedFeature.popup = popup;
popup.feature = clickedFeature;
// add the popup to the map
map.addPopup(popup);
}
function onFeatureUnselect(clickInfo) {
feature = clickInfo.feature;
if (feature.popup) {
// if an icon with a popup window is un-selected, that popup is removed
popup.feature = null;
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
}
function onPopupClose(closeInfo) {
// closing the Popup un-selects the icon
selectControl.unselect(this.feature);
}
/*
var p0 = new Array ()
p0[0] = 'name'
p0[1] = 'desc'
p0[2] = "http://google-maps-icons.googlecode.com/files/kindergarten.png"
p0[3] = 'long'
p0[4] = 'lat'
p0[5] = 'webpage'
p0[6] = 'pointRadius = 16;
p0[7] = 'rotation = 45;
p0[8] = 'graphicOpacity = 1; // from 0 (transparent) to 1 (opaque)
p0[9] = 'video'
*/
var p0 = new Array()
p0[0] = 'Wilton Bush'
p0[1] = 'Easy walks, glow worms too!'
p0[2] = "http://google-maps-icons.googlecode.com/files/hiking-tourism.png"
p0[3] = 174.7578009
p0[4] = -41.2678145
p0[5] = "http://www.wellington.govt.nz/services/gardens/otariwiltonsbush/otariwiltonsbush.html"
p0[6] = 16
p0[7] = 0
p0[8] = 1
p0[9] = "http://www.youtube.com/embed/MM_2S8P6em8?rel=0"
var p1 = new Array()
p1[0] = 'Weta Cave'
p1[1] = 'Where I wielded a copy of one of THE LOTR swords!'
p1[2] = "http://google-maps-icons.googlecode.com/files/cave.png"
p1[3] = 174.8245127
p1[4] = -41.3044041
p1[5] = "http://www.wetanz.com/cave"
p1[6] = 16
p1[7] = 0
p1[8] = .75
p1[9] = "http://www.youtube.com/embed/we-JD-XIYBk?rel=0"
var p2 = new Array()
p2[0] = 'Karori Wildlife Sanctuary'
p2[1] = 'Meet the natives'
p2[2] = "http://google-maps-icons.googlecode.com/files/bird.png"
p2[3] = 174.7540709
p2[4] = -41.2886071
p2[5] = "http://www.sanctuary.org.nz/Site/About_us/A_500_year_journey/A_500-year_journey.aspx"
p2[6] = 16
p2[7] = 0
p2[8] = .75
p2[9] = "http://www.youtube.com/embed/AoM6jvd-c94?rel=0"
var p3 = new Array()
p3[0] = 'Makara Peak Mountain Bike Park'
p3[1] = 'Gangin'
p3[2] = "http://google-maps-icons.googlecode.com/files/mountainbike.png"
p3[3] = 174.7221598
p3[4] = -41.2969089
p3[5] = "http://www.mountainbike.co.nz/places/makarapeak/"
p3[6] = 16
p3[7] = 0
p3[8] = 1
p3[9] = "http://www.youtube.com/embed/z4kPuJ7B7zk?rel=0"
var p4 = new Array()
p4[0] = 'Matiu / Somes Island'
p4[1] = 'Native animals'
p4[2] = "http://google-maps-icons.googlecode.com/files/animals.png"
p4[3] = 174.8710000
p4[4] = -41.2581737
p4[5] = "https://secure.wikimedia.org/wikipedia/en/wiki/Matiu/Somes_Island"
p4[6] = 16
p4[7] = 45
p4[8] = 1
p4[9] = "http://www.youtube.com/embed/AoM6jvd-c94?rel=0"
var p5 = new Array()
p5[0] = 'Matiu'
p5[1] = 'Views and fresh sea breezes'
p5[2] = "http://google-maps-icons.googlecode.com/files/park-urban.png"
p5[3] = 174.8640000
p5[4] = -41.2500000
p5[5] = "https://secure.wikimedia.org/wikipedia/en/wiki/Matiu/Somes_Island"
p5[6] = 16
p5[7] = 0
p5[8] = 1
p5[9] = "http://www.youtube.com/embed/utfd4g9f_GI?rel=0"
var p6 = new Array()
p6[0] = "The Cake Tin"
p6[1] = 'Home of the Hurricanes and the Phoenix'
p6[2] = "http://google-maps-icons.googlecode.com/files/stadium.png"
p6[3] = 174.7732353
p6[4] = -41.2924945
p6[5] = "https://secure.wikimedia.org/wikipedia/en/wiki/Wellington_Stadium"
p6[6] = 16
p6[7] = 0
p6[8] = 1
p6[9] = "http://www.youtube.com/embed/HY7I9nj9AZo?rel=0"
var placesRef = new Array()
placesRef[0] = p0
placesRef[1] = p1
placesRef[2] = p2
placesRef[3] = p3
placesRef[4] = p4
placesRef[5] = p5
placesRef[6] = p6
var hlong = 174.8045753;
var hlat = -41.2872426;
var zoom = 12;
map = new OpenLayers.Map({
div: "map-div",
projection: new OpenLayers.Projection('EPSG:900913'),
'displayProjection': new OpenLayers.Projection('EPSG:4326')
});
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
var name = ''
var desc = ''
var icon = ''
var notes = ''
var long = ''
var lat = ''
var webpage = ''
var video = ''
layerStyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//var pointLayer = new OpenLayers.Layer.Vector("Layer Name", {style: layerStyle});
var pointLayer = new OpenLayers.Layer.Vector("Wgtn", {
attribution: "<br>introvert"
}, {
style: layerStyle
});
map.addLayer(pointLayer);
for (i = 0; i < placesRef.length; i++) {
long = placesRef[i][3];
lat = placesRef[i][4];
newPoint = new OpenLayers.Geometry.Point(long, lat).transform(map.displayProjection, map.projection);
newStyle = OpenLayers.Util.extend({}, layerStyle);
newStyle.pointRadius = placesRef[i][6];
newStyle.rotation = placesRef[i][7];
newStyle.graphicOpacity = placesRef[i][8];
newStyle.externalGraphic = placesRef[i][2];
// newStyle.label = 'this is a test';
// newStyle.fontColor = '#00FF00';
newPointFeature = new OpenLayers.Feature.Vector(newPoint, null, newStyle);
newPointFeature.attributes = {
name: placesRef[i][0],
desc: placesRef[i][1],
webpage: placesRef[i][5],
video: placesRef[i][9],
};
pointLayer.addFeatures([newPointFeature]);
} // for
// create a Control that watches for clicking on a feature, then add the control to the map
selectControl = new OpenLayers.Control.SelectFeature(pointLayer);
map.addControl(selectControl);
selectControl.activate();
pointLayer.events.on({
'featureselected': onFeatureSelect,
'featureunselected': onFeatureUnselect
});
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.Attribution());
var centerlonlat = new OpenLayers.LonLat(hlong, hlat);
centerlonlat = centerlonlat.transform(map.displayProjection, map.projection);
map.setCenter(centerlonlat, zoom);