/leaflet.html Secret

## leaflet.html


<!DOCTYPE html>
<html>
<head>
  <title>tee gee ess ess thirteen map</title>
  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
  <link rel="stylesheet" href="https://unpkg.com/tachyons@4.5.3/css/tachyons.min.css"/>
  <style>
  .leaflet-grid-label,
  .leaflet-control-mouseposition{
    color: white;
  }
  img[src$=".gif"], img[src$=".png"] {
   image-rendering: -moz-crisp-edges;         /* Firefox */
   image-rendering:   -o-crisp-edges;         /* Opera */
   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
   image-rendering: crisp-edges;
   -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
 }
  </style>
</head>
<body class="vh-100 w-100">
  <div style="position: absolute; top: 20px; left: 100px; z-index: 99999" class="bg-light-gray pa1 bg-red">Nonfinal - Do not distribute - UNCLASSIFIED // NO-FORN \\ UNCLASSIFIED</div>
  <div id="mapid" class="vh-75 w-100" style="background: #151515"></div>
  <div id="" class="vh-25 w-100 gray bg-near-black pa2" style="overflow: scroll">
    <p class="mt0 db w-25" id="tileinfo">Click on a tile to show information</p>
  </div>
  <script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
  <script type="text/javascript" src="js/L.SimpleGraticule-teegee.js"></script>
  <script type="text/javascript" src="js/L.Control.MousePosition.js"></script>
  <script type="text/javascript" src="js/leaflet-hash-teegee.js"></script>

  <script type="text/javascript" src="defs.json"></script>
  <script type="text/javascript" src="tiles.json"></script>


  <script>

    var mymap = L.map('mapid',{
      crs:L.CRS.Simple,
      minZoom: 1,
      maxZoom: 6,
    }).setView([-128/2,128/2], 3);
    var southWest = mymap.unproject([8192,0], mymap.getMaxZoom());
    var northEast = mymap.unproject([0,8192], mymap.getMaxZoom());

    L.tileLayer('tiles/{z}/tile_{x}-{y}.png', {
      maxZoom: 6,
      attribution: "BoxStation as of Sept. 2016",
      id: 'mapbox.boxstation',
      continuousWorld: true,
      bounds: new L.LatLngBounds(northEast,southWest),
      tms: false
    }).addTo(mymap);

    // var popup = L.popup()
    //     .setLatLng(tg2leaflet(120,117))
    //     .setContent("The captain's spare ID!")
    //     .openOn(mymap);

    // var popup = L.popup();

    L.marker(tg2leaflet(130,181)).bindPopup("HoS Locker").addTo(mymap);
    L.marker(tg2leaflet(116, 182)).bindPopup("Armory Ablative").addTo(mymap);
    L.marker(tg2leaflet(107,147)).bindPopup("EVA Plasteel").addTo(mymap);
    L.marker(tg2leaflet(160,106)).bindPopup("CMO's Locker").addTo(mymap);
    L.marker(tg2leaflet(119,81)).bindPopup("CE's Locker").addTo(mymap);

    mymap.on('click', function(e) {
      var coords = leaflet2tg(e.latlng.lat,e.latlng.lng);
      console.log(coords);
      console.log();
    });

    var popup = L.popup();

    function onMapClick(e) {
      var coords = leaflet2tg(e.latlng.lat,e.latlng.lng);
      var data = defs[map[coords[1]][coords[0]]];
      var area = data['area'];
      var info = '';
      if(typeof(area) == 'object'){
        console.log(area);
        var title = "<strong class='f2 white'>"+area.object+"</strong><br><small>"+coords[2]+","+coords[3]+"</small><br>";
        if (area.parameters){
          info = info+'<table class="pa1 mt0 dt">';
          area.parameters.forEach(function(p){
            info = info+"<tr><td class='ba b--gray'>"+p.key+"</td><td class='ba b--gray'>"+p.value+"</td></tr>";
          })
          info = info+'</table>';
        }
      } else {
        var title = "<strong class='f2 white'>"+area+"</strong><br><small>"+coords[2]+","+coords[3]+"</small><br>";
      }
      console.log(data);
      data.contents.forEach(function (e){
        if (typeof(e) == 'object') {
          info = info+"<strong>"+e.object+"</strong><br>";
          if (e.parameters){
            info = info+'<table class="pa1 mt0 dt">';
            e.parameters.forEach(function(p){
              info = info+"<tr><td class='ba b--gray'>"+p.key+"</td><td class='ba b--gray'>"+p.value+"</td></tr>";
            })
            info = info+'</table>';
          }
        } else {
          info = info+"<strong>"+e+"</strong><br>";
        }
      })
      var contents = title+info;
      document.getElementById("tileinfo").innerHTML = contents;
      }

      mymap.on('click', onMapClick);

    var options = {
    interval: 16,
      showshowOriginLabel: true,
      redraw: 'moveend'
    };

    L.simpleGraticule(options).addTo(mymap);

    var options = {
      separator: ',',
      numDigits: 1,
      latFormatter: function(e){
        return Math.floor(e*2)+256;
      },
      lngFormatter: function(e){
        return Math.floor(e*2)+1;
      },
      lngFirst: true
    };
    L.control.mousePosition(options).addTo(mymap);

    //var hash = new L.Hash(mymap);

    function tg2leaflet(x,y){
      x = (x/2);
      y = ((255-y+1)/2)*-1;
      return [y+.25,x-.25];
    }

    function leaflet2tg (x,y) {
      newx = Math.floor(x*2)+255;
      newy = Math.abs(Math.floor(y*2)-254);
      y = Math.floor(y*2)+1;
      x = Math.floor(x*2)+256;
      return [newy,newx, y, x];
    }

  </script>
</body>
</html>


	<!DOCTYPE html>
	<html>
	<head>
	<title>tee gee ess ess thirteen map</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
	<link rel="stylesheet" href="https://unpkg.com/tachyons@4.5.3/css/tachyons.min.css"/>
	<style>
	.leaflet-grid-label,
	.leaflet-control-mouseposition{
	color: white;
	}
	img[src$=".gif"], img[src$=".png"] {
	image-rendering: -moz-crisp-edges; /* Firefox */
	image-rendering: -o-crisp-edges; /* Opera */
	image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
	}
	</style>
	</head>
	<body class="vh-100 w-100">
	<div style="position: absolute; top: 20px; left: 100px; z-index: 99999" class="bg-light-gray pa1 bg-red">Nonfinal - Do not distribute - UNCLASSIFIED // NO-FORN \\ UNCLASSIFIED</div>
	<div id="mapid" class="vh-75 w-100" style="background: #151515"></div>
	<div id="" class="vh-25 w-100 gray bg-near-black pa2" style="overflow: scroll">
	<p class="mt0 db w-25" id="tileinfo">Click on a tile to show information</p>
	</div>
	<script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
	<script type="text/javascript" src="js/L.SimpleGraticule-teegee.js"></script>
	<script type="text/javascript" src="js/L.Control.MousePosition.js"></script>
	<script type="text/javascript" src="js/leaflet-hash-teegee.js"></script>

	<script type="text/javascript" src="defs.json"></script>
	<script type="text/javascript" src="tiles.json"></script>


	<script>

	var mymap = L.map('mapid',{
	crs:L.CRS.Simple,
	minZoom: 1,
	maxZoom: 6,
	}).setView([-128/2,128/2], 3);
	var southWest = mymap.unproject([8192,0], mymap.getMaxZoom());
	var northEast = mymap.unproject([0,8192], mymap.getMaxZoom());

	L.tileLayer('tiles/{z}/tile_{x}-{y}.png', {
	maxZoom: 6,
	attribution: "BoxStation as of Sept. 2016",
	id: 'mapbox.boxstation',
	continuousWorld: true,
	bounds: new L.LatLngBounds(northEast,southWest),
	tms: false
	}).addTo(mymap);

	// var popup = L.popup()
	// .setLatLng(tg2leaflet(120,117))
	// .setContent("The captain's spare ID!")
	// .openOn(mymap);

	// var popup = L.popup();

	L.marker(tg2leaflet(130,181)).bindPopup("HoS Locker").addTo(mymap);
	L.marker(tg2leaflet(116, 182)).bindPopup("Armory Ablative").addTo(mymap);
	L.marker(tg2leaflet(107,147)).bindPopup("EVA Plasteel").addTo(mymap);
	L.marker(tg2leaflet(160,106)).bindPopup("CMO's Locker").addTo(mymap);
	L.marker(tg2leaflet(119,81)).bindPopup("CE's Locker").addTo(mymap);

	mymap.on('click', function(e) {
	var coords = leaflet2tg(e.latlng.lat,e.latlng.lng);
	console.log(coords);
	console.log();
	});

	var popup = L.popup();

	function onMapClick(e) {
	var coords = leaflet2tg(e.latlng.lat,e.latlng.lng);
	var data = defs[map[coords[1]][coords[0]]];
	var area = data['area'];
	var info = '';
	if(typeof(area) == 'object'){
	console.log(area);
	var title = "<strong class='f2 white'>"+area.object+"</strong><br><small>"+coords[2]+","+coords[3]+"</small><br>";
	if (area.parameters){
	info = info+'<table class="pa1 mt0 dt">';
	area.parameters.forEach(function(p){
	info = info+"<tr><td class='ba b--gray'>"+p.key+"</td><td class='ba b--gray'>"+p.value+"</td></tr>";
	})
	info = info+'</table>';
	}
	} else {
	var title = "<strong class='f2 white'>"+area+"</strong><br><small>"+coords[2]+","+coords[3]+"</small><br>";
	}
	console.log(data);
	data.contents.forEach(function (e){
	if (typeof(e) == 'object') {
	info = info+"<strong>"+e.object+"</strong><br>";
	if (e.parameters){
	info = info+'<table class="pa1 mt0 dt">';
	e.parameters.forEach(function(p){
	info = info+"<tr><td class='ba b--gray'>"+p.key+"</td><td class='ba b--gray'>"+p.value+"</td></tr>";
	})
	info = info+'</table>';
	}
	} else {
	info = info+"<strong>"+e+"</strong><br>";
	}
	})
	var contents = title+info;
	document.getElementById("tileinfo").innerHTML = contents;
	}

	mymap.on('click', onMapClick);

	var options = {
	interval: 16,
	showshowOriginLabel: true,
	redraw: 'moveend'
	};

	L.simpleGraticule(options).addTo(mymap);

	var options = {
	separator: ',',
	numDigits: 1,
	latFormatter: function(e){
	return Math.floor(e*2)+256;
	},
	lngFormatter: function(e){
	return Math.floor(e*2)+1;
	},
	lngFirst: true
	};
	L.control.mousePosition(options).addTo(mymap);

	//var hash = new L.Hash(mymap);

	function tg2leaflet(x,y){
	x = (x/2);
	y = ((255-y+1)/2)*-1;
	return [y+.25,x-.25];
	}

	function leaflet2tg (x,y) {
	newx = Math.floor(x*2)+255;
	newy = Math.abs(Math.floor(y*2)-254);
	y = Math.floor(y*2)+1;
	x = Math.floor(x*2)+256;
	return [newy,newx, y, x];
	}

	</script>
	</body>
	</html>