var oMarkers = new Object;
//var aMarkers = [];
//var aMarkerHtml = [];
//var iMarkerIndex = 0;
var oMap;
var LastInfoBox;
var iCurrentRegionId = 5;
var iCurrentCatId = 0;
var sIconBase = '/imagebank/map_icons';
var oIconMap = new Object;
var oRegionLocations = new Object;
var sLinkBase = 'http://www.virtualnorthwest.org.uk/imagebank/imagedetail';
var sThumbImgBase = 'http://www.virtualnorthwest.org.uk/imagebank-images';
oIconMap.cat6 = "icon-bridges-buildings.png";oIconMap.cat30 = "icon-gardens-flowers.png";oIconMap.cat22 = "icon-scenery-nature.png";oIconMap.cat17 = "icon-leisure.png";oIconMap.cat4 = "icon-people.png";oIconMap.cat9 = "icon-science.png";oIconMap.cat14 = "icon-transport.png";
oRegionLocations.region5 = new Array(53.18299586008718000000, -2.80700683593750000000);oRegionLocations.region1 = new Array(54.43650500000000000000, -3.09402500000000000000);oRegionLocations.region3 = new Array(53.46352600000000000000, -2.22473144531250000000);oRegionLocations.region2 = new Array(53.96335700000000000000, -2.55706800000000000000);oRegionLocations.region4 = new Array(53.45616700000000000000, -2.78503400000000000000);oRegionLocations.region6 = new Array(0.00000000000000000000, 0.00000000000000000000);
function InitMap() {
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("googlemap-container"));
map.setCenter(new GLatLng(53.343173, -2.441711), 9);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
oMap = map;
GetImages(5, 0);
//GetImages(0, 0);
}
}
function InitMiniMap(iMapInitLong, iMapInitLat, iCatId) {
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("google-mini-map"));
map.setCenter(new GLatLng(iMapInitLat, iMapInitLong), 12);
var icon = new GIcon();
icon.image = sIconBase + '/' + oIconMap['cat'+iCatId];
icon.iconSize = new GSize(21, 21);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
var marker = new GMarker(new GLatLng(iMapInitLat, iMapInitLong), icon);
map.addOverlay(marker);
}
}
function PanToLocation(lat, lng)
{
oMap.panTo(new GLatLng(parseFloat(lat), parseFloat(lng)));
}
function ChangeLocation(iRegionId)
{
//iCurrentRegionId = iRegionId;
//oMap.clearOverlays();
//GetImages(iCurrentRegionId, iCurrentCatId);
PanToLocation(oRegionLocations['region'+iRegionId][0], oRegionLocations['region'+iRegionId][1]);
}
function ChangeCat(iCatId)
{
document.getElementById('mapkey'+iCurrentCatId).className = document.getElementById('mapkey'+iCurrentCatId).className.replace(/active/, "inactive");
iCurrentCatId = iCatId;
oMap.clearOverlays();
GetImages(iCurrentRegionId, iCurrentCatId);
document.getElementById('mapkey'+iCurrentCatId).className = document.getElementById('mapkey'+iCurrentCatId).className.replace(/inactive/, "active");
}
function GetImages(iRegionId, iCatId)
{
//alert("/imagebank/services/GetImages.xml.php?iRegionId="+iRegionId+"&iCatId="+iCatId);
GDownloadUrl("/imagebank/map/GetImages.xml.php?iRegionId="+iRegionId+"&iCatId="+iCatId, function(data, responseCode)
{
var xml = GXml.parse(data);
var results = document.getElementById('results');
try
{
if (xml.documentElement == null) throw "Error obtaining XML";
var images = xml.documentElement.getElementsByTagName("image");
if (images == null) throw "Error obtaining XML";
if (images == null || images.length == 0) throw "No Results";
//clear previous if any
oMarkers = new Object;
//aMarkerHtml = [];
//iMarkerIndex = 0;
for (var i = 0; i < images.length; i++)
{
//if (i > 3) break;
var point = new GLatLng(
parseFloat(images[i].getAttribute("lat")),
parseFloat(images[i].getAttribute("lng"))
);
oMarkerData = new MarkerData(images[i].getAttribute("image_id"), images[i].getAttribute("cat_id"),
images[i].getAttribute("name"), images[i].getAttribute("thumb"),
images[i].getAttribute("thumb_width"), images[i].getAttribute("thumb_height"),
images[i].getAttribute("caption"));
oMap.addOverlay(CreateMarker(point, oMarkerData));
//iMarkerIndex++;
}
}
catch (e)
{
alert(e);
return false;
}
}
);
return true;
}
function CreateMarker(point, oMarkerData)
{
var icon = new GIcon();
//alert('here2');
//alert(iCatId);
icon.image = sIconBase + '/' + oIconMap['cat'+oMarkerData.iCatId];
//icon.shadow = "/assets/shared/images/services/mm_20_shadow.png";
//if (sName == 'Jodrell Bank') alert(icon.image);
icon.iconSize = new GSize(21, 21);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
var marker = new GMarker(point, icon);
var sImgThumb = sThumbImgBase+"/"+oMarkerData.iImgId+"/thumb/"+oMarkerData.sThumb;
var sHtml = ""+oMarkerData.sName+"
" + "![\""+oMarkerData.sName+"\"](\""+sImgThumb+"\")
";
oMarkers['img'+oMarkerData.iImgId] = new MarkerObj(marker, oMarkerData);
GEvent.addListener(marker, "click", function() {
//marker.openInfoWindowHtml(sHtml);
//marker.shopMapBlowup(sHtml);
ShowInfo(oMarkerData.iImgId);
});
return marker;
}
/*function FindMarker(iImgId)
{
for (i in aMarkers) {
if (aMarkers[i].markerId == markerId) return aMarkers[i];
}
return null;
}*/
function ShowInfo(iImgId)
{
oMarker = oMarkers['img'+iImgId];
document.getElementById('map-image-label').innerHTML = GetContent(oMarker.oMarkerData);
document.getElementById('map-image').innerHTML = GetImage(oMarker.oMarkerData);
if (LastInfoBox)
{
HideInfoBox();
lastInfoBox = null;
}
LastInfoBox=new Infobox(oMarker);
oMap.addOverlay(LastInfoBox);
MarkerPoint = oMarker.marker.getPoint();
var bounds = oMap.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var minLat = southWest.lat();
var maxLat = northEast.lat();
var minLon = southWest.lng();
var maxLon = northEast.lng();
var newLat=MarkerPoint.lat() - 0.3*(minLat-maxLat);
var newLon=MarkerPoint.lng() - 0.17*(maxLon-minLon);
oMap.panTo(new GLatLng(newLat, newLon));
}
function HideInfoBox()
{
oMap.removeOverlay(LastInfoBox);
}
function MarkerData(iImgId, iCatId, sName, sThumb, iThumbWidth, iThumbHeight, sCaption)
{
this.iImgId=iImgId;
this.iCatId=iCatId;
this.sName=sName;
this.sThumb=sThumb;
this.iThumbWidth=iThumbWidth;
this.iThumbHeight=iThumbHeight;
this.sCaption=sCaption;
}
function MarkerObj(marker, oMarkerData)
{
this.marker = marker;
this.oMarkerData = oMarkerData;
}
// OVERLAY FUNCTIONS
// Here, we define the infobox class for a custom Google maps overlay.
// Next, we define the functions for initialise, remove from map and copy.
// Lastly, we define the redraw function for plotting the infobox in the
// correct position on the Google Maps.
function Infobox(oMarkerObj) {
this.oMarkerObj = oMarkerObj;
}
Infobox.prototype = new GOverlay();
Infobox.prototype.initialize = function(map) {
var div = document.createElement("div");
div.style.position = "absolute";
// Specifies which google map layer the infobox will appear on
map.getPane(G_MAP_MARKER_PANE).appendChild(div);
this.map_ = oMap;
this.div_ = div;
}
// Remove the main DIV from the map pane
Infobox.prototype.remove = function() {
this.div_.parentNode.removeChild(this.div_);
}
// Copy our data to a new Rectangle
Infobox.prototype.copy = function() {
return new Infobox(this.oMarkerObj);
}
// Redraw the rectangle based on the current projection and zoom level
Infobox.prototype.redraw = function(force) {
// We only need to redraw if the coordinate system has changed
// if (!force) return;
// Work out what content we need to put in the info box
insertContent = '';
//alert(insertContent);
MarkerPoint = this.oMarkerObj.marker.getPoint();
// Insert content into parent div defined in initialise function
this.div_.innerHTML=insertContent;
// Now work out where to place the info box on the basis of infobox height,
// infobox width, and lon and lat of marker
// Calculate the DIV coordinates
var markerpos = this.map_.fromLatLngToDivPixel(new GLatLng(MarkerPoint.lat(), MarkerPoint.lng()));
// set dimensions
var divheight = document.getElementById("google-map-popup").offsetHeight;
var divwidth = document.getElementById("google-map-popup").offsetWidth;
// position the DIV
this.div_.style.width = divwidth + "px";
this.div_.style.height = divheight + "px";
this.div_.style.left = markerpos.x + "px";
//this.div_.style.top = (markerpos.y-divheight+2) + "px";
this.div_.style.top = (markerpos.y-divheight+20) + "px";
}
function GetContent(oMarkerData)
{
//var sImgThumb = sThumbImgBase+"/"+oMarkerData.iImgId+"/thumb/"+oMarkerData.sThumb;
insertContent = oMarkerData.sName;
insertContent += '
+ more info';
/*insertContent = ""+oMarkerData.sName+"
test
";*/
//insertContent+= ""+this.oMarkerObj.oMarkerData.sName+"
";
/*insertContent+="
";
insertContent+="Close
";*/
return insertContent;
}
function GetImage(oMarkerData)
{
var sImgThumb = sThumbImgBase+"/"+oMarkerData.iImgId+"/thumb/"+oMarkerData.sThumb;
sImgContent = "";
return sImgContent;
}
