Mercurial > hg > batmud > gmap2

changeset 153:a7f43ddd1c5e gmap2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 &amp; Ggr</title>
   <meta name="description" content="BatMUD - The Age of Exiles - Google Maps hack by Jeskko &amp; 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)