From eac56a6513a8f1942b962cae93d2050e3ec3a1fc Mon Sep 17 00:00:00 2001 From: Michael Writhe Date: Thu, 14 Apr 2011 09:32:47 -0600 Subject: [PATCH] clickable and now toggleable regions --- config.js | 20 ++++++++++++++++++-- web_assets/functions.js | 24 ++++++++++++++++++++++-- 2 files changed, 40 insertions(+), 4 deletions(-) diff --git a/config.js b/config.js index 0954116..90415f4 100644 --- a/config.js +++ b/config.js @@ -33,9 +33,25 @@ var signGroups = [ {label: "All", match: function(s) {return true}}, ]; -//piTODO: document this +/* regionGroups -- A list of region groups. A region can fall into zero, one, or more than one + * group. See below for some examples. + * regions have been designed to work with the + * WorldGuard Overviewer Region importer at https://github.com/pironic/WG2OvR But your host must support php in order + * to run WG2OvR. You can also continue to use any other region format, but your regions + * must now have a label definned in the regions.js. + * + * Required: + * label : string. Displayed in the drop down menu control. + * clickable : boolean. Will determine if we should generate an experimental info window + * that shows details about the clicked region. + * match : function. Applied to each region (from region.js). It returns true if the region + * Should be part of the group. + * + * Optional: + * checked : boolean. Set to true to have the group visible by default + */ var regionGroups = [ - {label: "WorldGuard", match: function(s) {return true}}, + //{label: "WorldGuard", clickable: false, checked: false, match: function(s) {return true}}, ]; /* mapTypeData -- a list of alternate map renderings available. At least one rendering must be diff --git a/web_assets/functions.js b/web_assets/functions.js index e2d1123..1ad1714 100644 --- a/web_assets/functions.js +++ b/web_assets/functions.js @@ -219,20 +219,23 @@ function initRegions() { // pull all the points out of the regions file. var converted = new google.maps.MVCArray(); + var infoPoint = ""; for (j in region.path) { var point = region.path[j]; converted.push(fromWorldToLatLng(point.x, point.y, point.z)); + } for (idx in regionGroups) { var regionGroup = regionGroups[idx]; var testfunc = regionGroup.match; + var clickable = regionGroup.clickable var label = regionGroup.label; if (region.closed) { var shape = new google.maps.Polygon({ name: region.label, - clickable: false, + clickable: clickable, geodesic: false, map: null, strokeColor: region.color, @@ -246,7 +249,7 @@ function initRegions() { } else { var shape = new google.maps.Polyline({ name: region.label, - clickable: false, + clickable: clickable, geodesic: false, map: null, strokeColor: region.color, @@ -257,6 +260,23 @@ function initRegions() { }); } regionCollection[label].push(shape); + + if (clickable) { + // add the region infowindow popup + infowindow = new google.maps.InfoWindow(); + google.maps.event.addListener(shape, 'click', function(e,i) { + + var contentString = "Region: "+this.name+"
"; + contentString += "Clicked Location:
" + e.latLng.lat() + "," + e.latLng.lng() + "
"; + + // Replace our Info Window's content and position + infowindow.setContent(contentString); + infowindow.setPosition(e.latLng); + + infowindow.open(map); + + }); + } } } }