Mercurial > hg > batmud > gmap2

changeset 161:074b6936ec4f gmap2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
"Kind of works", but not really. Almost nothing works. And even that probably works wrong.
author Matti Hamalainen <ccr@tnsp.org>
date Mon, 10 Mar 2014 01:42:31 +0200
parents 7a1b8099b5f7
children 46e0413a8dad
files css/mapstyle1.css icons.js index.html map.js markers.js
diffstat 5 files changed, 119 insertions(+), 108 deletions(-) [+]
line wrap: on
line diff
--- a/css/mapstyle1.css	Mon Mar 10 01:36:44 2014 +0200
+++ b/css/mapstyle1.css	Mon Mar 10 01:42:31 2014 +0200
@@ -44,7 +44,7 @@
 
 #sidebox {
 	position: absolute;
-	background: url(../img/scroll_mid.jpg) repeat-y 2px 0px;
+	background: url(../img/scroll_mid.png) repeat-y 2px 0px;
 
 	width: 100%;
 	height: 100%;
@@ -186,6 +186,8 @@
 	bottom: 2em;
 	padding: 0px;
 	margin: 0px;
+
+	box-shadow: 10px 10px 5px #000;
 }
 
 #copyrights {
--- a/icons.js	Mon Mar 10 01:36:44 2014 +0200
+++ b/icons.js	Mon Mar 10 01:42:31 2014 +0200
@@ -1,6 +1,5 @@
 // $Id: icons.js 2150 2009-05-29 02:03:34Z jeskko $
 var pmapIcons = [];
-var pmapIcon;
 
 
 function pmapCreateStdIcon(name)
@@ -9,18 +8,12 @@
   //var iconBaseURL = "http://maps.google.com/mapfiles/ms/mpmapIcons/";
   var iconBaseURL = "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_";
 
-  return new GIcon(pmapIcon, iconBaseURL+name+".png", iconBaseURL+name+"s.png");
+  return iconBaseURL+name+".png";
 }
 
 
 function pmapInitializeIcons()
 {
-  pmapIcon = new GIcon();
-  pmapIcon.iconSize = new GSize(12,20);
-  pmapIcon.shadowSize = new GSize(22,20);
-  pmapIcon.iconAnchor = new GPoint(6,20);
-  pmapIcon.infoWindowAnchor = new GPoint(5,1);
-
   pmapIcons["default"]    = pmapCreateStdIcon("yellow");
   pmapIcons["ferry"]      = pmapCreateStdIcon("purple");
   pmapIcons["tradelane"]  = pmapCreateStdIcon("gray");
@@ -29,4 +22,4 @@
   pmapIcons["city"]       = pmapCreateStdIcon("red");
   pmapIcons["ss"]         = pmapCreateStdIcon("blue");
   pmapIcons["shrine"]     = pmapCreateStdIcon("green");
-}
\ No newline at end of file
+}
--- a/index.html	Mon Mar 10 01:36:44 2014 +0200
+++ b/index.html	Mon Mar 10 01:42:31 2014 +0200
@@ -16,15 +16,17 @@
   <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.load("maps", "3.15", { other_params:"sensor=false" });
     google.setOnLoadCallback(pmapInitializeMap);
 -->
   </script>
+  <script type="text/javascript" src="lib/util.js"></script>
+  <script type="text/javascript" src="lib/markermanager.js"></script>
  </head>
- <body onunload="GUnload()">
+ <body>
    <div id="header">
     <div id="headcontent">
-     <div>Google Maps Hack NG <span style="color: red; font-size: 14pt;">v2014-03-09</span></div>
+     <div>BatMUD GMaps Hack TNG <span style="color: red; font-size: 14pt;">v2014-03-09</span></div>
      <div style="font-size: 12pt">By Jeskko &amp; Ggr</div>
     </div>
    </div>
--- a/map.js	Mon Mar 10 01:36:44 2014 +0200
+++ b/map.js	Mon Mar 10 01:42:31 2014 +0200
@@ -1,52 +1,58 @@
 // $Id: map.js 2404 2009-12-24 20:01:32Z jeskko $
 
-var map;
-var batMap;
+var pmap;
+var pmapCanvas;
 var proj;
 
 
+
 function pmapInitializeMap()
 {
-  map = new google.maps.Map(document.getElementById("map"), {
-  
-    draggableCursor: 'crosshair',
-    draggingCursor: 'pointer'
+  function CanvasProjectionOverlay() {}
+  CanvasProjectionOverlay.prototype = new google.maps.OverlayView();
+  CanvasProjectionOverlay.prototype.constructor = CanvasProjectionOverlay;
+  CanvasProjectionOverlay.prototype.onAdd = function(){};
+  CanvasProjectionOverlay.prototype.draw = function(){};
+  CanvasProjectionOverlay.prototype.onRemove = function(){};
+
+  var pmapBatMap = new google.maps.ImageMapType(
+  {
+    getTileUrl: function(coord, zoom)
+    {
+      return "tiles/"+ zoom +"/"+ coord.y +"/"+ coord.x +".png";
+    },
+
+    tileSize: new google.maps.Size(256, 256),
+    maxZoom: 10,
+    minZoom: 3,
+    radius: 1738000,
+    name: 'BatMap'
   });
 
-  map.enableContinuousZoom();
-  map.enableScrollWheelZoom();
-  map.addControl(new GLargeMapControl3D());
-
-
-  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);
-
+  pmap = new google.maps.Map(document.getElementById("map"),
+  {
+    zoom: 3,
+    center: new google.maps.LatLng(-15, 10),
 
-  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); }
-
+    streetViewControl: false,
+    draggableCursor: 'crosshair',
+    draggingCursor: 'pointer',
+    mapTypeControl: false,
+    scaleControl: false,
+    rotateControl: false,
+    overviewMapControl: false,
+  });
 
-  batMap = new google.maps.MapType(tl, new google.maps.MercatorProjection(12), "BatMud", {errorMessage:"No data available"});
-  map.addMapType(batMap);
+  pmap.mapTypes.set('BatMap', pmapBatMap);
+  pmap.setMapTypeId('BatMap');
 
-  proj = map.getCurrentMapType().getProjection();
-  map.setCenter(proj.fromPixelToLatLng(new GPoint(8556,8664), 6), 3, batMap);
+  pmapCanvas = new CanvasProjectionOverlay();
+  pmapCanvas.setMap(pmap);
 
-  google.maps.Event.addListener(map, "mousemove", pmapCoordinateListener);
+//  google.maps.event.addListener(pmap, "mousemove", pmapCoordinateListener);
 
+  pmapInitializeIcons();
   pmapInitializeMarkers();
-  pmapInitializeIcons();
   pmapInitializeNav();
 }
 
@@ -57,12 +63,12 @@
 function pmapCoordinateListener(point)
 {
   var p = proj.fromLatLngToPixel(point, 7);
-  tx = Math.round((p.x - 16383) / 2);
-  ty = Math.round((p.y - 16383) / 2);
+  var tx = Math.round((p.x - 16383) / 2);
+  var ty = Math.round((p.y - 16383) / 2);
 
-  xx = tx;
-  yy = ty;
-  cont = "Deep Sea";
+  var xx = tx;
+  var yy = ty;
+  var cont = "Deep Sea";
   
   for (i = 0; i < pmapContinents.length; i++)
   {
--- a/markers.js	Mon Mar 10 01:36:44 2014 +0200
+++ b/markers.js	Mon Mar 10 01:42:31 2014 +0200
@@ -29,21 +29,26 @@
 
 function pmapShowInfo(i)
 {
-  GEvent.trigger(pmapMarkers[i], "click");
+  google.maps.event.trigger(pmapMarkers[i], "click");
 }
 
 
-function pmapCreateMarker(point,name,html,icon,type,continent,sidebar)
+function pmapCreateMarker(point,name,html,icon,type,continent,mclass)
 {
-  var marker = new GMarker(point, {icon:icon});
-  GEvent.addListener(marker, "click", function()
+  var marker = new google.maps.Marker(
+  {
+    position: point,
+    icon: icon,
+  });
+
+  google.maps.event.addListener(marker, "click", function()
   {
     marker.openInfoWindowHtml("<div style=\"color:#000;\">"+html+"</div>");
   });
 
   pmapMarkers[pmapMIndex] = marker;
 
-  if (sidebar == "builtin")
+  if (mclass == "builtin")
   {
     pmapBuiltin[pmapBIndex] = new Array(2);
     pmapBuiltin[pmapBIndex][0] = type;
@@ -52,77 +57,76 @@
     pmapBIndex++;
   }
 
-  if (sidebar == "private") side_private_html += '<a href="javascript:pmapMyClick(' + pmapMIndex + ')">' + name + '</a><br>';
-  if (sidebar == "public") side_public_html += '<a href="javascript:pmapMyClick(' + pmapMIndex + ')">' + name + '</a><br>';
+//  if (mclass == "private") side_private_html += '<a href="javascript:pmapMyClick(' + pmapMIndex + ')">' + name + '</a><br>';
+//  if (mclass == "public") side_public_html += '<a href="javascript:pmapMyClick(' + pmapMIndex + ')">' + name + '</a><br>';
 
   pmapMIndex++;
   return marker;
 }
 
 
+function pmapAddMarker(m, mclass)
+{
+  var type = m["type"];
+
+  if (type == "")
+    type = "default";
+
+  if (name.indexOf('FERRY') == 0)
+    type = "ferry";
+
+  var ppos = new google.maps.LatLng(0, 0); //proj.fromPixelToLatLng(new google.maps.Point(m["x"] * 2+1, m["y"] * 2+1),7);
+  var marker = pmapCreateMarker(ppos, m["name"], m["html"], pmapIcons[type], type, m["continent"], mclass);
+
+  if (pmapAreas[type] == undefined)
+    pmapAreas[type] = [];
+
+  pmapAreas[type].push(marker);
+}
+
+
 function pmapInitializeMarkers()
 {
-  pmapMMgr = new GMarkerManager(map);
   //
   // Parse markers from XML
   //
-  GDownloadUrl("markers.xml", function(data,responseCode)
+  pmapMMgr = new MarkerManager(pmap, {});
+
+  XDownloadUrl("markers.json", function(data,responseCode)
   {
-    var xml = GXml.parse(data);
-    var markers = xml.documentElement.getElementsByTagName("marker");
+    var markers = JSON.parse(data);
     pmapSideBuiltinHTML = "";
 
     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, pmapIcons[type], type, continent, "builtin");
-      if (pmapAreas[type] == undefined) pmapAreas[type] = [];
-      pmapAreas[type].push(marker);
+      console.debug(markers[nid]);
+      pmapAddMarker(markers[nid], "builtin");
     }
 
     pmapMMgr.addMarkers(pmapAreas["default"], 7, 11);
-    pmapMMgr.addMarkers(pmapAreas["guild"],   6, 11);
-    pmapMMgr.addMarkers(pmapAreas["shrine"],  7, 11);
-    pmapMMgr.addMarkers(pmapAreas["ferry"],   4, 11);
-    pmapMMgr.addMarkers(pmapAreas["city"],    4, 11);
+//    pmapMMgr.addMarkers(pmapAreas["guild"],   6, 11);
+//    pmapMMgr.addMarkers(pmapAreas["shrine"],  7, 11);
+//    pmapMMgr.addMarkers(pmapAreas["ferry"],   4, 11);
+//    pmapMMgr.addMarkers(pmapAreas["city"],    4, 11);
 
-    pmapMMgr.addMarkers(pmapAreas["pcity"],   8, 11);
-    pmapMMgr.addMarkers(pmapAreas["fort"],    8, 11);
+//    pmapMMgr.addMarkers(pmapAreas["pcity"],   8, 11);
+//    pmapMMgr.addMarkers(pmapAreas["fort"],    8, 11);
     pmapMMgr.refresh();
 
     document.getElementById("sidecontent").innerHTML = pmapSideBuiltinHTML;
   });
 
-
+/*
   //
   // Parse tradelane markers from another XML
   //
-  GDownloadUrl("tradelane.xml", function(data,responseCode)
+  XDownloadUrl("tradelane.json", function(data,responseCode)
   {
-    var xml = GXml.parse(data);
-    var markers = xml.documentElement.getElementsByTagName("marker");
+    var markers = JSON.parse(data);
 
-    for (var id = 0; id < markers.length; id++)
+    for (var nid = 0; nid < markers.length; nid++)
     {
-      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, pmapIcons[type], type, continent, "tradelane");
-      if (pmapAreas[type] == undefined) pmapAreas[type] = [];
-      pmapAreas[type].push(marker);
+      pmapAddMarker(markers[nid], "tradelane");
     }
 
     pmapMMgr.addMarkers(pmapAreas["tradelane"], 5, 11);
@@ -133,32 +137,36 @@
   //
   // Create GMap polylines from tradelane line data
   //
-  GDownloadUrl("troverlay.xml", function(data,responseCode)
+  XDownloadUrl("troverlay.json", function(data,responseCode)
   {
-    // Parse fetched XML
-    var xml = GXml.parse(data);
-    var lines = xml.documentElement.getElementsByTagName("line");
+    var lines = JSON.parse(data);
 
     // Go through array of line elements
     for (var nid = 0; nid < lines.length; nid++)
     {
       var coords = [];
-      var points = lines[nid].getElementsByTagName("point");
+      var points = lines[nid];
 
       // 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));
+        var pt = points[npt];
+        coords.push(proj.fromPixelToLatLng(new google.maps.Point(pt["x"] * 2 + 1, pt["y"] * 2 + 1), 7));
+//        coords.push(new google.maps.Point(x*2 + 1, y*2 + 1));
       }
 
       // Create new polyline and add it to map overlay
-      var poly = new GPolyline(coords, "#ffffff", 1, 0.7);
-      map.addOverlay(poly);
+      var poly = new google.maps.Polyline({
+        path: coords,
+        strokeColor: "#ffffff",
+        strokeWeight: 1,
+        strokeOpacity: 0.7
+      });
+      
+      poly.setMap(pmap);
     }
   });
-
+*/
 
   //
   // Print control elements