Mercurial > hg > batmud > gmap2
changeset 153:a7f43ddd1c5e gmap2
Functionalize.
author | Matti Hamalainen <ccr@tnsp.org> |
---|---|
date | Sun, 09 Mar 2014 19:11:31 +0200 |
parents | 095754c6b332 |
children | d9427e98c979 |
files | icons.js index.html map.js markers.js nav.js |
diffstat | 5 files changed, 214 insertions(+), 183 deletions(-) [+] |
line wrap: on
line diff
--- a/icons.js Sun Mar 09 18:44:07 2014 +0200 +++ b/icons.js Sun Mar 09 19:11:31 2014 +0200 @@ -1,27 +1,32 @@ // $Id: icons.js 2150 2009-05-29 02:03:34Z jeskko $ -var iconBase = new GIcon(); -iconBase.iconSize = new GSize(12,20); -iconBase.shadowSize = new GSize(22,20); -iconBase.iconAnchor = new GPoint(6,20); -iconBase.infoWindowAnchor = new GPoint(5,1); +var pmap_icons = []; +var pmap_icon; -function createStdIcon(name) +function pmapCreateStdIcon(name) { -// var iconBaseURL = "http://maps.google.com/mapfiles/kml/"; -// var iconBaseURL = "http://maps.google.com/mapfiles/ms/micons/"; + //var iconBaseURL = "http://maps.google.com/mapfiles/kml/"; + //var iconBaseURL = "http://maps.google.com/mapfiles/ms/mpmap_icons/"; var iconBaseURL = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_"; - return new GIcon(iconBase, iconBaseURL+name+".png", iconBaseURL+name+"s.png"); + + return new GIcon(pmap_icon, iconBaseURL+name+".png", iconBaseURL+name+"s.png"); } -var icons = []; +function pmapInitializeIcons() +{ + pmap_icon = new GIcon(); + pmap_icon.iconSize = new GSize(12,20); + pmap_icon.shadowSize = new GSize(22,20); + pmap_icon.iconAnchor = new GPoint(6,20); + pmap_icon.infoWindowAnchor = new GPoint(5,1); -icons["default"] = createStdIcon("yellow"); -icons["ferry"] = createStdIcon("purple"); -icons["tradelane"] = createStdIcon("gray"); -icons["guild"] = createStdIcon("red"); -icons["pcity"] = createStdIcon("purple"); -icons["city"] = createStdIcon("red"); -icons["ss"] = createStdIcon("blue"); -icons["shrine"] = createStdIcon("green"); + pmap_icons["default"] = pmapCreateStdIcon("yellow"); + pmap_icons["ferry"] = pmapCreateStdIcon("purple"); + pmap_icons["tradelane"] = pmapCreateStdIcon("gray"); + pmap_icons["guild"] = pmapCreateStdIcon("red"); + pmap_icons["pcity"] = pmapCreateStdIcon("purple"); + pmap_icons["city"] = pmapCreateStdIcon("red"); + pmap_icons["ss"] = pmapCreateStdIcon("blue"); + pmap_icons["shrine"] = pmapCreateStdIcon("green"); +} \ No newline at end of file
--- a/index.html Sun Mar 09 18:44:07 2014 +0200 +++ b/index.html Sun Mar 09 19:11:31 2014 +0200 @@ -8,10 +8,16 @@ <title>BatMUD: The Age of Exiles - Google Maps hack by Jeskko & Ggr</title> <meta name="description" content="BatMUD - The Age of Exiles - Google Maps hack by Jeskko & Ggr"/> <meta name="keywords" content="batmud,map,laenor,lucentium,rothikgen,desolathya,furnachia,mud,mush,moo,online,massively,multiplayer,game,mmorpg,jeskko"/> + <script type="text/javascript" src="continents.js"></script> + <script type="text/javascript" src="map.js"></script> + <script type="text/javascript" src="icons.js"></script> + <script type="text/javascript" src="markers.js"></script> + <script type="text/javascript" src="nav.js"></script> <script src="http://www.google.com/jsapi?key=ABQIAAAAGYTF74Bq5AUl-ZP4_H43hRR48Kuhy7JOZf8BW92g851cDrXCbhTSumpGAGuccZMsuGYF77ZKHuaJ4Q" type="text/javascript"></script> <script type="text/javascript"> <!-- google.load("maps", "2.x", {other_params:"sensor=false"}); + google.setOnLoadCallback(pmapInitializeMap); --> </script> </head> @@ -47,10 +53,5 @@ Cursor X: <span id="xcoord">0</span>, Y: <span id="ycoord">0</span>, Continent: <span id="continent">X</span> </div> </div> - <script type="text/javascript" src="continents.js"></script> - <script type="text/javascript" src="map.js"></script> - <script type="text/javascript" src="icons.js"></script> - <script type="text/javascript" src="markers.js"></script> - <script type="text/javascript" src="nav.js"></script> </body> </html>
--- a/map.js Sun Mar 09 18:44:07 2014 +0200 +++ b/map.js Sun Mar 09 19:11:31 2014 +0200 @@ -1,47 +1,60 @@ // $Id: map.js 2404 2009-12-24 20:01:32Z jeskko $ -var map = new GMap2(document.getElementById("map"),{draggableCursor: 'crosshair', draggingCursor: 'pointer'}); -map.enableContinuousZoom(); -map.enableScrollWheelZoom(); -map.addControl(new GLargeMapControl3D()); +var map; +var batMap; +var proj; -var copyright = new GCopyright(1, - new GLatLngBounds(new GLatLng(-90, -180), - new GLatLng(90, 180)), - 0, "Map data by BAT ry, Ggr, Slobber and Jeskko"); - -var cc = new GCopyrightCollection('BatMUD'); -cc.addCopyright(copyright); -var tl = [ - new GTileLayer(cc, 2, 10) - , - new GTileLayer(cc, 6, 10) -]; +function pmapInitializeMap() +{ + map = new google.maps.Map(document.getElementById("map"), { + + draggableCursor: 'crosshair', + draggingCursor: 'pointer' + }); -tl[0].getTileUrl = function(a,b) { return "tiles/"+(b)+"/"+a.y+"/"+a.x+".png"; } -tl[1].getTileUrl = function(a,b) { return "overlay.php?x="+a.x+"&y="+a.y+"&zoom="+(b); } - -var custommap = new GMapType(tl, new GMercatorProjection(12),"BatMud", {errorMessage:"No data available"}); -map.addMapType(custommap); -var proj = map.getCurrentMapType().getProjection(); -map.setCenter(proj.fromPixelToLatLng(new GPoint(8556,8664), 6), 3, custommap); + map.enableContinuousZoom(); + map.enableScrollWheelZoom(); + map.addControl(new GLargeMapControl3D()); -function pmapCheckCoords(cx, cy, cxmin, cymin, cxmax, cymax, cname) -{ - if (cx > cxmin && cx < cxmax && cy > cymin && cy < cymax) - return { x: cx + cxmin, y: cy + cymin, name: cname }; - else - return null; + var copyright = new GCopyright(1, + new GLatLngBounds(new GLatLng(-90, -180), + new GLatLng(90, 180)), + 0, "Map data by BAT ry, Ggr, Slobber and Jeskko"); + + var cc = new GCopyrightCollection('BatMUD'); + cc.addCopyright(copyright); + + + var tl = [ + new GTileLayer(cc, 2, 10) + , + new GTileLayer(cc, 6, 10) + ]; + + tl[0].getTileUrl = function(a,b) { return "tiles/"+(b)+"/"+a.y+"/"+a.x+".png"; } + tl[1].getTileUrl = function(a,b) { return "overlay.php?x="+a.x+"&y="+a.y+"&zoom="+(b); } + + + batMap = new google.maps.MapType(tl, new google.maps.MercatorProjection(12), "BatMud", {errorMessage:"No data available"}); + map.addMapType(batMap); + + proj = map.getCurrentMapType().getProjection(); + map.setCenter(proj.fromPixelToLatLng(new GPoint(8556,8664), 6), 3, batMap); + + google.maps.Event.addListener(map, "mousemove", pmapCoordinateListener); + + pmapInitializeMarkers(); + pmapInitializeIcons(); + pmapInitializeNav(); } // // Listener for updating coordinates display // -google.maps.Event.addListener(map, "mousemove", -function(point) +function pmapCoordinateListener(point) { var p = proj.fromLatLngToPixel(point, 7); tx = Math.round((p.x - 16383) / 2); @@ -66,4 +79,4 @@ document.getElementById("xcoord").innerHTML = xx; document.getElementById("ycoord").innerHTML = yy; document.getElementById("continent").innerHTML = cont; -}); +}
--- a/markers.js Sun Mar 09 18:44:07 2014 +0200 +++ b/markers.js Sun Mar 09 19:11:31 2014 +0200 @@ -11,8 +11,7 @@ ]; - -var mgr = new GMarkerManager(map); +var pmap_mmgr; var pmap_areas = []; var pmap_markers = []; var pmap_mindex = 0; @@ -61,101 +60,148 @@ } -// -// Parse markers from XML -// -GDownloadUrl("markers.xml", function(data,responseCode) +function pmapInitializeMarkers() { - var xml = GXml.parse(data); - var markers = xml.documentElement.getElementsByTagName("marker"); - pmap_side_builtin_html = ""; - - for (var nid = 0; nid < markers.length; nid++) + pmap_mmgr = new GMarkerManager(map); + // + // Parse markers from XML + // + GDownloadUrl("markers.xml", function(data,responseCode) { - var name = markers[nid].getAttribute("name"); - var html = markers[nid].getAttribute("html"); - var x = markers[nid].getAttribute("x"); - var y = markers[nid].getAttribute("y"); - var type = markers[nid].getAttribute("type"); - if (type == "") type = "default"; - if (name.indexOf('FERRY') == 0) type = "ferry"; - var continent = markers[nid].getAttribute("continent"); - var p = proj.fromPixelToLatLng(new GPoint(x*2+1,y*2+1),7); - var marker = pmapCreateMarker(p, name, html, icons[type], type, continent, "builtin"); - if (pmap_areas[type] == undefined) pmap_areas[type] = []; - pmap_areas[type].push(marker); - } + var xml = GXml.parse(data); + var markers = xml.documentElement.getElementsByTagName("marker"); + pmap_side_builtin_html = ""; + + for (var nid = 0; nid < markers.length; nid++) + { + var name = markers[nid].getAttribute("name"); + var html = markers[nid].getAttribute("html"); + var x = markers[nid].getAttribute("x"); + var y = markers[nid].getAttribute("y"); + var type = markers[nid].getAttribute("type"); + if (type == "") type = "default"; + if (name.indexOf('FERRY') == 0) type = "ferry"; + var continent = markers[nid].getAttribute("continent"); + var p = proj.fromPixelToLatLng(new GPoint(x*2+1,y*2+1),7); + var marker = pmapCreateMarker(p, name, html, pmap_icons[type], type, continent, "builtin"); + if (pmap_areas[type] == undefined) pmap_areas[type] = []; + pmap_areas[type].push(marker); + } + + pmap_mmgr.addMarkers(pmap_areas["default"], 7, 11); + pmap_mmgr.addMarkers(pmap_areas["guild"], 6, 11); + pmap_mmgr.addMarkers(pmap_areas["shrine"], 7, 11); + pmap_mmgr.addMarkers(pmap_areas["ferry"], 4, 11); + pmap_mmgr.addMarkers(pmap_areas["city"], 4, 11); + + pmap_mmgr.addMarkers(pmap_areas["pcity"], 8, 11); + pmap_mmgr.addMarkers(pmap_areas["fort"], 8, 11); + pmap_mmgr.refresh(); - mgr.addMarkers(pmap_areas["default"], 7, 11); - mgr.addMarkers(pmap_areas["guild"], 6, 11); - mgr.addMarkers(pmap_areas["shrine"], 7, 11); - mgr.addMarkers(pmap_areas["ferry"], 4, 11); - mgr.addMarkers(pmap_areas["city"], 4, 11); + document.getElementById("sidecontent").innerHTML = pmap_side_builtin_html; + }); + + + // + // Parse tradelane markers from another XML + // + GDownloadUrl("tradelane.xml", function(data,responseCode) + { + var xml = GXml.parse(data); + var markers = xml.documentElement.getElementsByTagName("marker"); - mgr.addMarkers(pmap_areas["pcity"], 8, 11); - mgr.addMarkers(pmap_areas["fort"], 8, 11); - mgr.refresh(); + for (var id = 0; id < markers.length; id++) + { + var name = markers[id].getAttribute("name"); + var html = markers[id].getAttribute("html"); + var x = markers[id].getAttribute("x"); + var y = markers[id].getAttribute("y"); + var type = markers[id].getAttribute("type"); + if (type == "") type = "default"; + var continent = markers[id].getAttribute("continent"); + var p = proj.fromPixelToLatLng(new GPoint(x*2+1,y*2+1),7); + var marker = pmapCreateMarker(p, name, html, pmap_icons[type], type, continent, "tradelane"); + if (pmap_areas[type] == undefined) pmap_areas[type] = []; + pmap_areas[type].push(marker); + } - document.getElementById("sidecontent").innerHTML = pmap_side_builtin_html; -}); + pmap_mmgr.addMarkers(pmap_areas["tradelane"], 5, 11); + pmap_mmgr.refresh(); + }); -// -// Parse tradelane markers from another XML -// -GDownloadUrl("tradelane.xml", function(data,responseCode) -{ - var xml = GXml.parse(data); - var markers = xml.documentElement.getElementsByTagName("marker"); - - for (var id = 0; id < markers.length; id++) + // + // Create GMap polylines from tradelane line data + // + GDownloadUrl("troverlay.xml", function(data,responseCode) { - var name = markers[id].getAttribute("name"); - var html = markers[id].getAttribute("html"); - var x = markers[id].getAttribute("x"); - var y = markers[id].getAttribute("y"); - var type = markers[id].getAttribute("type"); - if (type == "") type = "default"; - var continent = markers[id].getAttribute("continent"); - var p = proj.fromPixelToLatLng(new GPoint(x*2+1,y*2+1),7); - var marker = pmapCreateMarker(p, name, html, icons[type], type, continent, "tradelane"); - if (pmap_areas[type] == undefined) pmap_areas[type] = []; - pmap_areas[type].push(marker); - } + // Parse fetched XML + var xml = GXml.parse(data); + var lines = xml.documentElement.getElementsByTagName("line"); + + // Go through array of line elements + for (var nid = 0; nid < lines.length; nid++) + { + var coords = []; + var points = lines[nid].getElementsByTagName("point"); - mgr.addMarkers(pmap_areas["tradelane"], 5, 11); - mgr.refresh(); -}); + // Create polyline points + for (var npt = 0; npt < points.length; npt++) + { + var x = points[npt].getAttribute("x"); + var y = points[npt].getAttribute("y"); + coords.push(proj.fromPixelToLatLng(new GPoint(x*2 + 1, y*2 + 1), 7)); + } + + // Create new polyline and add it to map overlay + var poly = new GPolyline(coords, "#ffffff", 1, 0.7); + map.addOverlay(poly); + } + }); -// -// Create GMap polylines from tradelane line data -// -GDownloadUrl("troverlay.xml", function(data,responseCode) -{ - // Parse fetched XML - var xml = GXml.parse(data); - var lines = xml.documentElement.getElementsByTagName("line"); - - // Go through array of line elements - for (var nid = 0; nid < lines.length; nid++) + // + // Print control elements + // + var str = ""; + var n = 0; + for (var i = 0; i < pmap_continents.length; i++) { - var coords = []; - var points = lines[nid].getElementsByTagName("point"); - - // Create polyline points - for (var npt = 0; npt < points.length; npt++) + var q = pmap_continents[i]; + if (q != null) { - var x = points[npt].getAttribute("x"); - var y = points[npt].getAttribute("y"); - coords.push(proj.fromPixelToLatLng(new GPoint(x*2 + 1, y*2 + 1), 7)); + var c = q[0]; + str += "<span id=\"sp"+c+"\"><a href=\"javascript:pmapToggleVisContinent('"+c+"')\">"+c+"</a></span>\n"; + if (n == 2) str += "<br />\n"; + n++; } + } + + str += "<span id=\"spall_c\"><a href=\"javascript:pmapToggleVisContinent('all_c')\">All</a></span>\n"; + + str += "<br /><br />\n"; - // Create new polyline and add it to map overlay - var poly = new GPolyline(coords, "#ffffff", 1, 0.7); - map.addOverlay(poly); - } -}); + n = 0; + for (var i = 0; i < pmap_markertypes.length; i++) + { + var q = pmap_markertypes[i]; + if (q != null) + { + var c = q[1]; + str += "<span id=\"sp"+c+"\"><a href=\"javascript:pmapToggleVisType('"+c+"')\">"+pmap_markertypes[i][0]+"</a></span>\n"; + if (n == 2) str += "<br />\n"; + n++; + } + } + + str += "<span id=\"spall_t\"><a href=\"javascript:pmapToggleVisType('all_t')\">All</a></span>\n"; + + document.getElementById("controls").innerHTML = str; + + pmapSetVisContinent("all_c", true); + pmapSetVisType("all_t", true); + pmapUpdateVisible(); +} // @@ -163,6 +209,7 @@ // var markerVisStates = []; + function pmapSetVisState(c, show) { markerVisStates[c] = show; @@ -245,44 +292,3 @@ pmapSetVisType(c, !markerVisStates[c]); pmapUpdateVisible(); } - - -// Print elements -var str = ""; -var n = 0; -for (var i = 0; i < pmap_continents.length; i++) -{ - var q = pmap_continents[i]; - if (q != null) - { - var c = q[0]; - str += "<span id=\"sp"+c+"\"><a href=\"javascript:pmapToggleVisContinent('"+c+"')\">"+c+"</a></span>\n"; - if (n == 2) str += "<br />\n"; - n++; - } -} - -str += "<span id=\"spall_c\"><a href=\"javascript:pmapToggleVisContinent('all_c')\">All</a></span>\n"; - -str += "<br /><br />\n"; - -n = 0; -for (var i = 0; i < pmap_markertypes.length; i++) -{ - var q = pmap_markertypes[i]; - if (q != null) - { - var c = q[1]; - str += "<span id=\"sp"+c+"\"><a href=\"javascript:pmapToggleVisType('"+c+"')\">"+pmap_markertypes[i][0]+"</a></span>\n"; - if (n == 2) str += "<br />\n"; - n++; - } -} - -str += "<span id=\"spall_t\"><a href=\"javascript:pmapToggleVisType('all_t')\">All</a></span>\n"; - -document.getElementById("controls").innerHTML = str; - -pmapSetVisContinent("all_c", true); -pmapSetVisType("all_t", true); -pmapUpdateVisible();
--- a/nav.js Sun Mar 09 18:44:07 2014 +0200 +++ b/nav.js Sun Mar 09 19:11:31 2014 +0200 @@ -1,9 +1,15 @@ // $Id: nav.js 2291 2009-09-21 14:43:50Z ggr $ -var collapsed = false; -var css_sidecoll = document.getElementById("sidecoll").style.right; -var css_footer = document.getElementById("footer").style.right; -var css_map_right = document.getElementById("map").style.right; -var css_map_top = document.getElementById("map").style.top; +var collapsed, css_sidecoll, css_footer, css_map_right, css_map_top; + + +function pmapInitializeNav() +{ + collapsed = false; + css_sidecoll = document.getElementById("sidecoll").style.right; + css_footer = document.getElementById("footer").style.right; + css_map_right = document.getElementById("map").style.right; + css_map_top = document.getElementById("map").style.top; +} function pmapSE(name)