delta.html、delta.jsをコピー

nayutaya · Nov 17, 2011 · 52cfa4d · 52cfa4d
1 parent 385932b
commit 52cfa4d
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 0 deletions.
diff --git a/src/ruby/example/geodelta_server/public/hex.html b/src/ruby/example/geodelta_server/public/hex.html
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
+ <head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>GeoDelta</title>
+  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
+  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
+  <script type="text/javascript" src="hex.js"></script>
+ </head>
+ <body>
+  <div id="map_canvas" style="width: 800px; height: 600px;"></div>
+ </body>
+</html>
diff --git a/src/ruby/example/geodelta_server/public/hex.js b/src/ruby/example/geodelta_server/public/hex.js
@@ -0,0 +1,51 @@
+
+$(function() {
+  var map = new google.maps.Map(document.getElementById("map_canvas"), {
+    zoom: 10,
+    center: new google.maps.LatLng(34.68, 135.18),
+    mapTypeId: google.maps.MapTypeId.ROADMAP
+  });
+
+  var cache = {};
+
+  google.maps.event.addListener(map, "bounds_changed", function() {
+    var bounds = map.getBounds();
+    var north_east = bounds.getNorthEast();
+    var south_west = bounds.getSouthWest();
+    var params = {
+      north: north_east.lat(),
+      south: south_west.lat(),
+      west: south_west.lng(),
+      east: north_east.lng(),
+      level: 11
+    };
+
+    $.get("/api/get_all_deltas", params, function(data) {
+      var deltas = data.response.deltas;
+
+      for ( var i = 0, len = deltas.length; i < len; i++ )
+      {
+        var code = deltas[i].code;
+
+        if ( !cache[code] )
+        {
+          var coordinates = deltas[i].coordinates;
+          var points = [
+            new google.maps.LatLng(coordinates[1].lat, coordinates[1].lng),
+            new google.maps.LatLng(coordinates[2].lat, coordinates[2].lng),
+            new google.maps.LatLng(coordinates[3].lat, coordinates[3].lng),
+            new google.maps.LatLng(coordinates[1].lat, coordinates[1].lng)
+          ];
+          var path = new google.maps.Polyline({
+            map: map, 
+            path: points,
+            strokeColor: "#FF0000",
+            strokeOpacity: 0.5,
+            strokeWeight: 1
+          });
+          cache[code] = path;
+        }
+      }
+    });
+  });
+});
diff --git a/src/ruby/example/geodelta_server/public/index.html b/src/ruby/example/geodelta_server/public/index.html
@@ -10,6 +10,7 @@
   <ul>
    <li><a href="/app1.html">/app1.html</a></li>
    <li><a href="/delta.html">/delta.html</a></li>
+   <li><a href="/hex.html">/hex.html</a></li>
    <li><a href="/demo/delta.svg?level=1">/demo/delta.svg?level=1</a></li>
    <li><a href="/demo/delta.svg?level=2">/demo/delta.svg?level=2</a></li>
    <li><a href="/demo/delta.svg?level=3">/demo/delta.svg?level=3</a></li>