changeset 67:6fd8670a9243 gmap2

Improve filtering features.
author Matti Hamalainen <ccr@tnsp.org>
date Fri, 25 Feb 2011 19:01:38 +0200
parents 6a267fe394b0
children fe6a078c70c8
files css/mapstyle1.css index.html map.js markers.js
diffstat 4 files changed, 67 insertions(+), 30 deletions(-) [+]
line wrap: on
line diff
--- a/css/mapstyle1.css	Mon Feb 21 17:17:18 2011 +0200
+++ b/css/mapstyle1.css	Fri Feb 25 19:01:38 2011 +0200
@@ -68,7 +68,7 @@
 	position: absolute;
 	z-index: 15;
 
-	top: 80px;
+	top: 140px;
 	bottom: 32px;
 
 	right: 16px;
@@ -105,7 +105,9 @@
 
 #controls span {
 	text-shadow: 2px 2px 2px #000;
-	margin: 4px;
+	border: 1px solid black;
+	margin: 2px;
+	display: inline-table;
 }
 
 #controls * a {
--- a/index.html	Mon Feb 21 17:17:18 2011 +0200
+++ b/index.html	Fri Feb 25 19:01:38 2011 +0200
@@ -18,7 +18,8 @@
  <body onunload="GUnload()">
    <div id="header">
     <div id="headcontent">
-     Google Maps Hack NG<br />
+     Google Maps Hack NG
+     <span style="font-size: 8pt">By Jeskko &amp; Ggr</span>
     </div>
    </div>
    <div id="map">
--- a/map.js	Mon Feb 21 17:17:18 2011 +0200
+++ b/map.js	Fri Feb 25 19:01:38 2011 +0200
@@ -9,6 +9,13 @@
   ["Renardy",     2066, -912,   2238, -825],
 ];
 
+var markertypes = [
+  ["Guilds",    "guild"],
+  ["PCities",   "pcity"],
+  ["Forts",     "fort"],
+  ["Shrines",   "shrine"],
+  ["Areas",     "default"],
+];
 
 var map = new GMap2(document.getElementById("map"),{draggableCursor: 'crosshair', draggingCursor: 'pointer'});
 map.enableContinuousZoom();
--- a/markers.js	Mon Feb 21 17:17:18 2011 +0200
+++ b/markers.js	Fri Feb 25 19:01:38 2011 +0200
@@ -5,8 +5,7 @@
 var gmarkers = [];
 var mi = 0;
 var bi = 0;
-var builtin_type = [];
-var builtin_cont = [];
+var builtin_data = [];
 var side_builtin_html = "";
 
 function myclick(i) {
@@ -14,15 +13,16 @@
   map.panTo(b);
 }
 
-function createMarker(point,name, html,icon,type,continent,sidebar) {
+function createMarker(point,name,html,icon,type,continent,sidebar) {
   var marker = new GMarker(point,{icon:icon});
   GEvent.addListener(marker,"click",function() {
     marker.openInfoWindowHtml("<div style=\"color:#000;\">"+html+"</div>");
   });
   gmarkers[mi] = point;
   if (sidebar == "builtin") { 
-    builtin_type[bi] = type;
-    builtin_cont[bi] = continent;
+    builtin_data[bi] = new Array(2);
+    builtin_data[bi][0] = type;
+    builtin_data[bi][1] = continent;
     side_builtin_html += '<div class="'+continent+'" id="marker'+bi+'"><a href="javascript:myclick(' + mi + ')">' + name + '</a></div>';
     bi++;
   }
@@ -108,45 +108,72 @@
 
 
 
-var visStateCont = [];
-var visStateType = [];
+var visStates = [];
+
+function setVisState(c, show) {
+  visStates[c] = show;
+  document.getElementById("sp" + c).style.background = show ? "white" : "rgba(0,0,0,0.1)";
+}
+
+function updateVisible()
+{
+  for (var i = 0; i < builtin_data.length; i++) {
+    var show = visStates[builtin_data[i][0]] && visStates[builtin_data[i][1]];
+    document.getElementById("marker" + i).style.display = show ? "block" : "none";
+  }
+}
 
 function setVisContinent(c, show) {
-  visStateCont[c] = show;
-  document.getElementById("sp" + c).style.background = show ? "white" : "rgba(0,0,0,0.1)";
-  for (var i = 0; i < builtin_cont.length; i++) {
-    if (builtin_cont[i] == c)
-      document.getElementById("marker" + i).style.display = show ? "block" : "none";
-  }
+  setVisState(c, show);
+  if (c == "all_c") {
+    for (var i = 0; i < continents.length; i++)
+      setVisState(continents[i][0], show);
+  }
 }
 
 function setVisType(c, show) {
-  visStateType[c] = show;
-  document.getElementById("sp" + c).style.background = show ? "white" : "rgba(0,0,0,0.1)";
-  for (var i = 0; i = builtin_type.length; i++) {
-    if (builtin_type[i] == c || c == "any")
-      document.getElementById("marker" + i).style.display = show ? "block" : "none";
-  }
+  setVisState(c, show);
+  if (c == "all_t") {
+    for (var i = 0; i < markertypes.length; i++)
+      setVisState(markertypes[i][1], show);
+  }
 }
 
 function toggleVisContinent(c) {
-  setVisContinent(c, !visStateCont[c]);
+  setVisContinent(c, !visStates[c]);
+  updateVisible();
 }
 
-function toggleVisType(c) {
-  setVisType(c, !visStateType[c]);
+function toggleVisType(c) {
+  setVisType(c, !visStates[c]);
+  updateVisible();
 }
 
+
+// Print elements
 var str = "";
 for (var i = 0; i < continents.length; i++) {
 	c = continents[i][0];
 	str += "<span id=\"sp"+c+"\"><a href=\"javascript:toggleVisContinent('"+c+"')\">"+c+"</a></span>\n";
 	if (i == 2)
-		str += "<br /><br />\n";
+		str += "<br />\n";
 }	
+
+str += "<span id=\"spall_c\"><a href=\"javascript:toggleVisContinent('all_c')\">All</a></span>\n";
+
+str += "<br /><br />\n";
+
+for (var i = 0; i < markertypes.length; i++) {
+	c = markertypes[i][1];
+	str += "<span id=\"sp"+c+"\"><a href=\"javascript:toggleVisType('"+c+"')\">"+markertypes[i][0]+"</a></span>\n";
+	if (i == 2)
+		str += "<br />\n";
+}	
+
+str += "<span id=\"spall_t\"><a href=\"javascript:toggleVisType('all_t')\">All</a></span>\n";
+
 document.getElementById("controls").innerHTML = str;
 
-for (var i = 0; i < continents.length; i++)
-	setVisContinent(continents[i][0], true);
-
-
+setVisContinent("all_c", true);
+setVisType("all_t", true);
+updateVisible();