Add a "tile details" view accessed from the context menu

app/assets/javascripts/index.js

@@ -19,6 +19,7 @@
 //= require index/directions
 //= require index/changeset
 //= require index/query
+//= require index/tileinfo
 //= require router
 
 $(document).ready(function () {
@@ -362,7 +363,8 @@ $(document).ready(function () {
     "/way/:id(/history)":          OSM.Browse(map, 'way'),
     "/relation/:id(/history)":     OSM.Browse(map, 'relation'),
     "/changeset/:id":              OSM.Changeset(map),
-    "/query":                      OSM.Query(map)
+    "/query":                      OSM.Query(map),
+    "/tileinfo":                   OSM.TileInfo(map)
   });
 
   if (OSM.preferred_editor === "remote" && document.location.pathname === "/edit") {

app/assets/javascripts/index/contextmenu.js

@@ -70,6 +70,23 @@ OSM.initializeContextMenu = function (map) {
     }
   });
 
+  map.contextmenu.addItem({
+    separator: true
+  });
+
+  map.contextmenu.addItem({
+    text: I18n.t("javascripts.context.tile_details"),
+    callback: function tileDetails(e) {
+      var zoom = map.getZoom(),
+          precision = OSM.zoomPrecision(zoom),
+          latlng = e.latlng.wrap(),
+          lat = latlng.lat.toFixed(precision),
+          lng = latlng.lng.toFixed(precision);
+
+      OSM.router.route("/tileinfo?lat=" + lat + "&lon=" + lng + "&zoom=" + zoom);
+    }
+  });
+
   map.on("mousedown", function (e) {
     if (e.originalEvent.shiftKey) map.contextmenu.disable();
     else map.contextmenu.enable();

app/assets/javascripts/index/tileinfo.js

@@ -0,0 +1,90 @@
+OSM.TileInfo = function(map) {
+  var tile;
+
+  function lon2x(lon, zoom) {
+    return Math.floor((lon + 180) / 360 * Math.pow(2, zoom));
+  }
+
+  function lat2y(lat, zoom) {
+    return Math.floor((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 /
+                                    Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom));
+  }
+
+  function x2lon(x, z) {
+    return x / Math.pow(2, z) * 360 - 180;
+  }
+
+  function y2lat(y, z) {
+    var n = Math.PI - 2 * Math.PI * y / Math.pow(2, z);
+    return 180 / Math.PI * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
+  }
+
+  var page = {};
+
+  page.pushstate = page.popstate = function(path) {
+    OSM.loadSidebarContent(path, function () {
+      page.load(path, true);
+    });
+  };
+
+  page.load = function(path, noCentre) {
+    var params = querystring.parse(path.substring(path.indexOf('?') + 1)),
+        lat = parseFloat(params.lat),
+        lon = parseFloat(params.lon),
+        zoom = parseInt(params.zoom),
+        y = lat2y(lat, zoom),
+        x = lon2x(lon, zoom),
+        sw = L.latLng(y2lat(y, zoom), x2lon(x, zoom)),
+        ne = L.latLng(y2lat(y + 1, zoom), x2lon(x + 1, zoom)),
+        bounds = L.latLngBounds(sw, ne),
+        latlng = L.latLng(lat, lon),
+        layer = map.getBaseLayer(),
+        url = layer.getTileUrl({ x: x, y : y });
+
+    tile = L.rectangle(bounds, {
+      color: "#FF6200",
+      weight: 4,
+      opacity: 1,
+      interactive: false
+    }).addTo(map);
+
+    $("#tileinfo-url").attr("href", url).text(url);
+    $("#tileinfo-z").text(zoom);
+    $("#tileinfo-y").text(y);
+    $("#tileinfo-x").text(x);
+
+    if (layer.options.code === "M")
+    {
+      $.ajax({
+        url: url + "/status",
+        success: function (data) {
+          var re = /^Tile is (.*?)\. Last rendered at (.*?)\. Last accessed at (.*?)\./,
+              matches = data.match(re);
+
+          if (matches)
+          {
+            $("#tileinfo-state").text(matches[1]);
+            $("#tileinfo-rendered").text(matches[2]);
+            $("#tileinfo-accessed").text(matches[3]);
+          }
+        }
+      });
+    }
+    else
+    {
+      $("#tileinfo-status").hide();
+    }
+
+    if (!window.location.hash && !noCentre && !map.getBounds().contains(latlng)) {
+      OSM.router.withoutMoveListener(function () {
+        map.setView(latlng, zoom);
+      });
+    }
+  };
+
+  page.unload = function() {
+    map.removeLayer(tile);
+  };
+
+  return page;
+};

app/assets/javascripts/leaflet.map.js

@@ -63,6 +63,12 @@ L.OSM.Map = L.Map.extend({
     });
   },
 
+  getBaseLayer: function() {
+    for (var i = 0; i < this.baseLayers.length; i++) {
+      if (this.hasLayer(this.baseLayers[i])) return this.baseLayers[i];
+    }
+  },
+
   updateLayers: function(layerParam) {
     layerParam = layerParam || "M";
     var layersAdded = "";

app/assets/stylesheets/common.scss

@@ -1328,6 +1328,52 @@ tr.turn:hover {
   }
 }
 
+/* Rules for the routing sidebar */
+
+#sidebar_content {
+  .tileinfo-section {
+    padding: $lineheight/2 $lineheight;
+
+    h3:first-child {
+      margin-top: 0;
+    }
+
+    table {
+      background-color: #F6F6F6;
+      border: 1px solid #ddd;
+      border-radius: 3px;
+      font-size: 12px;
+      table-layout: fixed;
+      border-collapse: separate;
+      margin-bottom: 0px;
+
+      th, td {
+        border-bottom: 1px solid #ddd;
+      }
+
+      tr:last-child th, tr:last-child td {
+        border-bottom: 0;
+      }
+
+      th, td {
+        padding: 6px 10px;
+      }
+
+      th {
+        width: 35%;
+        font-weight: 500;
+        background-color: #F6F6F6;
+      }
+
+      td {
+        width: 65%;
+        border-left: 1px solid #ddd;
+        background-color: #fff;
+      }
+    }
+  }
+}
+
 /* Rules for edit pages */
 
 .site-edit {

app/controllers/site_controller.rb

@@ -1,6 +1,6 @@
 class SiteController < ApplicationController
   layout "site"
-  layout :map_layout, :only => [:index, :export]
+  layout :map_layout, :only => [:index, :export, :tileinfo]
 
   before_action :authorize_web
   before_action :set_locale

app/views/site/tileinfo.html.erb

@@ -0,0 +1,29 @@
+<% set_title(t("site.tileinfo.title")) %>
+
+<h2>
+  <a class="geolink" href="<%= root_path %>"><span class="icon close"></span></a>
+  <%= t("site.tileinfo.title") %>
+</h2>
+
+<div class="tileinfo-section">
+  <h3><%= t("site.tileinfo.url") %></h3>
+  <a href="#" id="tileinfo-url"></a>
+</div>
+
+<div class="tileinfo-section">
+  <h3><%= t("site.tileinfo.coordinates") %></h3>
+  <table>
+    <tr><th>Z</th><td id="tileinfo-z"></td></tr>
+    <tr><th>X</th><td id="tileinfo-x"></td></tr>
+    <tr><th>Y</th><td id="tileinfo-y"></td></tr>
+  </table>
+</div>
+
+<div class="tileinfo-section" id="tileinfo-status">
+  <h3><%= t("site.tileinfo.status") %></h3>
+  <table>
+    <tr><th><%= t("site.tileinfo.state") %></th><td id="tileinfo-state"></td></tr>
+    <tr><th><%= t("site.tileinfo.last_rendered") %></th><td id="tileinfo-rendered"></td></tr>
+    <tr><th><%= t("site.tileinfo.last_accessed") %></th><td id="tileinfo-accessed"></td></tr>
+  </table>
+</div>

config/locales/en.yml

@@ -1423,6 +1423,14 @@ en:
       where_am_i: "Where am I?"
       where_am_i_title: Describe the current location using the search engine
       submit_text: "Go"
+    tileinfo:
+      title: Tile Details
+      coordinates: Coordinates
+      url: URL
+      status: Status
+      state: State
+      last_rendered: Last Rendered
+      last_accessed: Last Accessed
     key:
       table:
         entry:
@@ -2313,6 +2321,7 @@ en:
       show_address: Show address
       query_features: Query features
       centre_map: Centre map here
+      tile_details: Show tile details
   redaction:
     edit:
       description: "Description"

config/routes.rb

@@ -157,6 +157,7 @@
   match "/offline" => "site#offline", :via => :get
   match "/key" => "site#key", :via => :get
   match "/id" => "site#id", :via => :get
+  match "/tileinfo" => "site#tileinfo", :via => :get
   match "/query" => "browse#query", :via => :get
   match "/user/new" => "user#new", :via => :get
   match "/user/new" => "user#create", :via => :post

test/controllers/site_controller_test.rb

@@ -82,6 +82,10 @@ def test_routes
       { :path => "/id", :method => :get },
       { :controller => "site", :action => "id" }
     )
+    assert_routing(
+      { :path => "/tileinfo", :method => :get },
+      { :controller => "site", :action => "tileinfo" }
+    )
   end
 
   # Test the index page
@@ -382,4 +386,17 @@ def test_id
     assert_template "id"
     assert_template :layout => false
   end
+
+  # Test the tileinfo page
+  def test_tileinfo
+    get :tileinfo
+    assert_response :success
+    assert_template "tileinfo"
+    assert_template :layout => "map"
+
+    xhr :get, :tileinfo
+    assert_response :success
+    assert_template "tileinfo"
+    assert_template :layout => "xhr"
+  end
 end