<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet-hash/0.2.1/leaflet-hash.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.9.3/leaflet-geocoder-mapzen.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.9.3/leaflet-geocoder-mapzen.js"></script>
<style type="text/css">
body, #map {
  height: 100%;
  margin: 0;
  padding: 0;
  background-image: url({{ url_for('static', filename='images/transparent.png') }});
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map("map", {
  scrollWheelZoom: false,
  attributionControl: false,
  keyboardPanOffset: 256  });
L.control.geocoder("mapzen-LU6enDV").addTo(map);

$.getJSON("{{ tilejson_url }}", function(data) {
  // provide a default location in the hash, not the L.map (since that will
  // load before L.Hash takes control)
  if (!location.hash) {
    if (data.center) {
      location.hash = "#" + data.center.reverse().join("/");
    } else {
      location.hash = "#10/18.5486/-72.3148";
    }
  }

  var options = {
    minZoom: data.minzoom || 0,
    maxZoom: data.maxzoom || Infinity
  };

  var hash = new L.Hash(map);
  var provider = data.tiles.pop();

  function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? null : decodeURIComponent(results[1].replace(/\+/g, " "));
  }

  var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
                    (min--moz-device-pixel-ratio: 1.5),\
                    (-o-min-device-pixel-ratio: 3/2),\
                    (min-resolution: 1.5dppx)";

  if (getParameterByName("retina") !== "false" &&
      (getParameterByName("retina") ||
       window.devicePixelRatio > 1 ||
       (window.matchMedia && window.matchMedia(mediaQuery).matches))) {
    provider = provider.replace(/\.(?!.*\.)/, "@2x.");
  }

  L.tileLayer(provider, options).addTo(map);


  L.tileLayer(provider, options).addTo(map);

  var context = getParameterByName("context");

  if (context != null && context !== "false") {
    L.tileLayer('http://{s}.tile.stamen.com/toner-hybrid/{z}/{x}/{y}{r}.png').addTo(map);
  }
});
</script>
</body>
</html>
