yt.hub / ythub / templates / mapserver.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="/static/leaflet/leaflet.css" />
<!-- Leaflet JavaScript -->
<script src="/static/leaflet/leaflet.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
  var inspect;
  var map;
  $(document).ready(function() {
      // initialize the map on the "map" div with a given center and zoom 
      L.Control.Attribution.getPosition = function (){
        return L.Control.Position.BOTTOM_LEFT
      }
      $("#map").width($(window).width() - 20);
      $("#map").height($(window).height() - 20);
      map = new L.Map('map', {
                    center: new L.LatLng(0.0, 0.0),
                    zoom: 0,
                });

      // create a CloudMade tile layer
      var cloudmadeUrl = '/map_tiles/{{ map_id }}/tiles?z={z}&x={x}&y={y}';
      cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 30});
      cloudmade._oldUrl = cloudmade.getTileUrl;
      cloudmade.getTileUrl = function(a, b)
      {
        var mm = map.getBounds();
        var sw = map.project(mm._southWest);
        var ne = map.project(mm._northEast);
        var url = cloudmade._oldUrl(a,b) 
                + "&xmin=" + sw.x
                + "&xmax=" + ne.x
                + "&ymin=" + sw.y
                + "&ymax=" + ne.y;
        return url;
      }
      // add the CloudMade layer to the map

      var p1 = new L.Point(0, 0);
      var ll1 = map.unproject(p1);
      var mark1 = new L.Marker(ll1);
      map.addLayer(mark1);

      var p2 = new L.Point(255, 255);
      var ll2 = map.unproject(p2);
      var mark2 = new L.Marker(ll2);
      map.addLayer(mark2);

      var LLB = new L.LatLngBounds(ll1, ll2);
      map.fitBounds(LLB);

      inspect = {ll1: ll1, ll2: ll2};
      map.addLayer(cloudmade);
      map.attributionControl.setPrefix("");
      map.on("moveend", function(e) {
        var mm = map.getBounds();
        var sw = map.project(mm._southWest);
        var ne = map.project(mm._northEast);
        var url = '/map_tiles/{{ map_id }}/fov?z=' + map.getZoom()
                + "&xmin=" + sw.x
                + "&xmax=" + ne.x
                + "&ymin=" + sw.y
                + "&ymax=" + ne.y;
        $.ajax({url:url,
                success: function(data) {
                    var new_name = "FOV (" + data.unit + "): "
                                 + data.FOVx + " by " 
                                 + data.FOVy;
                    map.attributionControl.setPrefix(new_name);
                    map.attributionControl._update();
                }});
      });
      });
</script>
</HEAD>
<BODY>
  <DIV id="map"></div>
</BODY>
</HTML>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.