Mercurial > hg > batmud > gmap2
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 & 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();