changeset 200:f5aa704b1ddf gmap2

Add "Make a link" feature.
author Matti Hamalainen <ccr@tnsp.org>
date Wed, 12 Mar 2014 06:27:26 +0200
parents fc99d2ca3424
children 14659de17205
files css/mapstyle1.css index.php map.js
diffstat 3 files changed, 45 insertions(+), 12 deletions(-) [+]
line wrap: on
line diff
--- a/css/mapstyle1.css	Wed Mar 12 06:26:35 2014 +0200
+++ b/css/mapstyle1.css	Wed Mar 12 06:27:26 2014 +0200
@@ -196,13 +196,15 @@
 	display: inline-block;
 }
 
-#headcontent .info {
+#headcontent div.controls {
 	position: absolute;
 	right: 280px;
 	width: auto;
 }
 
-#headcontent a {
+#headcontent div.controls a {
+	background: #600;
+	padding: 0.5em;
 	color: white;
 }
 
--- a/index.php	Wed Mar 12 06:26:35 2014 +0200
+++ b/index.php	Wed Mar 12 06:27:26 2014 +0200
@@ -36,6 +36,7 @@
         <h1><?php echo $pageTitle1 ?></h1>
         <h2><?php echo $pageTitle2." v".$pageVersion ?></h2>
         <div class="credits"><?php echo $pageBy ?></div>
+        <div class="controls"><a href="javascript:pmapMakeLink()">Make link</a></div>
       </div>
     </div>
     <div id="map"></div>
@@ -55,7 +56,6 @@
     </div>
     <div id="footer">
       <div id="footercontent">
-      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="map.js"></script>
@@ -66,8 +66,11 @@
     <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 type="text/javascript">
-    pmapInitializeMap();
-    </script>
+<?php
+  echo "    <script type=\"text/javascript\">pmapInitializeMap(";
+  if (isset($_GET["x"]) && isset($_GET["y"]) && isset($_GET["zoom"]))
+    echo intval($_GET["x"]).",".intval($_GET["y"]).",".intval($_GET["zoom"]);
+  echo ");</script>\n";
+?>
   </body>
 </html>
--- a/map.js	Wed Mar 12 06:26:35 2014 +0200
+++ b/map.js	Wed Mar 12 06:27:26 2014 +0200
@@ -53,7 +53,7 @@
 CanvasProjectionOverlay.prototype.onRemove = function(){};
 
 
-function pmapInitializeMap()
+function pmapInitializeMap(sx, sy, szoom)
 {
   // Initialize custom imagemap with our tiles
   var pmapBatMap = new google.maps.ImageMapType(
@@ -96,6 +96,12 @@
   pmapInitializeIcons();
   pmapInitializeMarkers();
   pmapInitializeNav();
+
+  if (szoom && sx && sy)
+  {
+    pmap.setZoom(szoom);
+    pmap.panTo(pmapMapCoordsToLatLng(new google.maps.Point(sx, sy), 6));
+  }
 }
 
 
@@ -108,8 +114,7 @@
   var tx = Math.round((p.x + 1) / 2.0);
   var ty = Math.round((p.y + 1) / 2.0);
 
-  var cx = tx;
-  var cy = ty;
+  var cx, cy;
   var cont = "Deep Sea";
   
   for (i = 0; i < pmapContinents.length; i++)
@@ -124,7 +129,30 @@
     }
   }
 
-  document.getElementById("xcoord").innerHTML = cx;
-  document.getElementById("ycoord").innerHTML = cy;
-  document.getElementById("continent").innerHTML = cont;
+  tx += 8192;
+  ty += 8192;
+
+  var str = "Cursor: "+
+    "Global X: <span class=\"coord\">"+ tx +"</span>, Y: <span class=\"coord\">"+ ty +"</span>, "+
+    "Continent: <span class=\"continent\">"+ cont +"</span> ";
+
+  if (cx >= 0 && cy >= 0)
+    str += "[ Local X: <span class=\"coord\">"+ cx +"</span>, Y: <span class=\"coord\">"+ cy +"</span> ]";
+
+  document.getElementById("footercontent").innerHTML = str;
 }
+
+
+function pmapMakeLink()
+{
+  if (pmap)
+  {
+    var p = pmapLatLngToMapCoords(pmap.getCenter(), 6);
+    var tx = Math.round(p.x) + 8192;
+    var ty = Math.round(p.y) + 8192;
+    
+    str = "http://tnsp.org/gmap2/?x="+ tx +"&y="+ ty +"&zoom="+ pmap.getZoom();
+
+    window.prompt("Copy to clipboard: Ctrl+C, Enter", str);
+  }
+}