mojodna/index.html Secret

## index.html
<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Rhode Island</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />

    <style>
        body {
            margin: 0px;
            border: 0px;
            padding: 0px;
        }

        #map {
            background: rgba(0, 0, 0, 0);
            height: 100%;
            width: 100%;
            position: absolute;
        }

        #info {
            position: fixed;
            float: left;
            top: 0px;
            left: 50px;
            width: 300px;
            padding: 10px;
            background-color: black;
            color: white;
            font: 16px 'Lucida Grande', sans-serif;
            z-index: 500
        }
        #info p {
            margin: 12px;
        }
        #info p.title {
            color: #0cf;
        }

        @media (max-width: 700px) {
            #info {
              visibility: hidden;
            }
        }

    </style>
  </head>

  <body>
    <div id="map"></div>
    <div id="info">
      <p id="timecode" class="title"></p>
    </div>
    <!-- <div id="info">
        <p class="title">BUILDING NAME FILTERING</p><p>Many buildings in OpenStreetMap have names. This demo filters buildings by name and building height.</p>
        <p><b>building scale:</b> scales 3D building height</p>
        <p><b>height filter:</b> filters geometry by building height, in meters - then rebuilds the tiles</p>
        <p><b>text filter:</b> filters buildings by name - try park, building, house, school, or church</p>
     </div> -->

    <!-- Start of 3rd party libraries -->
    <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
    <!-- A lightweight graphical user interface for changing variables in JavaScript.  -->
    <script src="https://unpkg.com/dat.gui@0.6.5/build/dat.gui.min.js"></script>
    <!-- bog-standard leaflet URL hash -->
    <script src="https://unpkg.com/leaflet-hash"></script>
    <!-- End of 3rd party libraries -->

    <!-- Main tangram library -->
    <script src="https://www.nextzen.org/tangram/0.14/tangram.min.js"></script>

    <!-- Demo module -->
    <script src="main.js"></script>

    <style>
        /* enlarge dat.gui */
        /* .dg {
            font-size: 12pt;
        }
        .dg li:not(.folder) {
            height: 40px;
            line-height: 40px;
        }
        .dg .c .slider {
            height: 30px;
        }
        .dg .c input[type=text] {
            font-size: 12pt;
            height: 24px;
        } */
    </style>

  </body>
</html>

## main.js
/*jslint browser: true*/
/*global Tangram, gui */

(function() {
  var map_start_location = [41.8221, -71.4252, 13]; // Providence

  /*** URL parsing ***/

  // leaflet-style URL hash pattern:
  // #[zoom],[lat],[lng]
  var url_hash = window.location.hash
    .slice(1, window.location.hash.length)
    .split("/");

  if (url_hash.length == 3) {
    map_start_location = [url_hash[1], url_hash[2], url_hash[0]];
    // convert from strings
    map_start_location = map_start_location.map(Number);
  }

  /*** Map ***/

  var map = L.map("map", {
    maxZoom: 20,
    minZoom: 12,
    inertia: false,
    keyboard: true
  });
  var layer = Tangram.leafletLayer({
    scene: "scene.yaml",
    attribution: "&copy; OSM contributors"
  });

  window.layer = layer;
  var scene = layer.scene;
  window.scene = scene;

  map.setView(map_start_location.slice(0, 2), map_start_location[2]);

  var hash = new L.Hash(map);

  // // Resize map to window
  // function resizeMap() {
  //   document.getElementById("map").style.width = window.innerWidth + "px";
  //   document.getElementById("map").style.height = window.innerHeight + "px";
  //   map.invalidateSize(false);
  // }
  //
  // window.addEventListener("resize", resizeMap);
  // resizeMap();

  scene.subscribe({
    view_complete: function() {
      console.log("scene view complete");
    }
  });

  var startDate = new Date("2007-09-01T00:00:00Z");
  var endDate = new Date();
  document.getElementById("timecode").textContent = endDate.toDateString();

  // Create dat GUI
  var gui = new dat.GUI({ autoPlace: true, width: 350 });
  function addGUI() {
    gui.domElement.parentNode.style.zIndex = 500; // make sure GUI is on top of map
    window.gui = gui;

    var DatePicker = function() {
      this.date = endDate.getTime();
    };

    // gui["date"] = startDate;
    // var d = gui.add(gui, "date", startDate.getTime(), endDate.getTime());
    // var d = gui.add(gui, "date", 0, 100);
    // d.onChange(function(value) {
    //     scene.config.global.min_height = value;
    //     scene.rebuildGeometry();
    // });

    var picker = new DatePicker();
    var dp = gui.add(picker, "date", startDate.getTime(), endDate.getTime());
    dp.onFinishChange(function(value) {
      var d = new Date(value);
      var ds = d.toISOString();

      console.log(d);
      document.getElementById("timecode").textContent = d.toDateString();

      scene.config.layers.snapshot.filter = `function() {
        return feature.updated <= "${ds}" &&
        (feature.validUntil > "${ds}" || feature.validUntil === "");
      }`;

      scene.rebuild();
    });
  }

  // Add map
  window.addEventListener("load", function() {
    // Scene initialized
    layer.on("init", function() {
      addGUI();
    });
    layer.addTo(map);
  });
})();

## scene.yaml
sources:
    ri:
        max_zoom: 15
        max_display_zoom: 22
        min_display_zoom: 12
        type: MVT
        url: https://mojodna-temp.s3.amazonaws.com/rhode-island-all/{z}/{x}/{y}.mvt
scene:
    background:
        color: white
styles:
    all_lines:
        base: lines
        blend: inlay
        draw:
            order: 10
            color: [0.333, 0.333, 0.682, 0.025]
            width: 1.5px
    all_points:
        base: points
        blend: inlay
        draw:
            collide: false
            order: 10
            color: [0.333, 0.333, 0.682, 0.025]
            size: 1px
    snapshot_lines:
        base: lines
        blend: inlay
        draw:
            order: 10
            color: [0.333, 0.333, 0.682, 0.25]
            width: 1px
    snapshot_points:
        base: points
        blend: inlay
        draw:
            collide: false
            order: 10
            color: [0.333, 0.333, 0.682, 0.25]
            size: 1px
layers:
    all:
        enabled: false
        data:
            source: ri
            layer: points
        draw:
            lines:
                style: all_lines
            points:
                style: all_points
    snapshot:
        enabled: true
        data:
            source: ri
            layer: points
        filter: |
            function() {
                return feature.updated <= "2016-01-01T00:00:00Z" &&
                    (feature.validUntil > "2016-01-01T00:00:00Z" || feature.validUntil === "");
            }
        draw:
            lines:
                style: snapshot_lines
            points:
                style: snapshot_points
	<!doctype html>
	<html lang="en-us">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>Rhode Island</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />

	<style>
	body {
	margin: 0px;
	border: 0px;
	padding: 0px;
	}

	#map {
	background: rgba(0, 0, 0, 0);
	height: 100%;
	width: 100%;
	position: absolute;
	}

	#info {
	position: fixed;
	float: left;
	top: 0px;
	left: 50px;
	width: 300px;
	padding: 10px;
	background-color: black;
	color: white;
	font: 16px 'Lucida Grande', sans-serif;
	z-index: 500
	}
	#info p {
	margin: 12px;
	}
	#info p.title {
	color: #0cf;
	}

	@media (max-width: 700px) {
	#info {
	visibility: hidden;
	}
	}

	</style>
	</head>

	<body>
	<div id="map"></div>
	<div id="info">
	<p id="timecode" class="title"></p>
	</div>
	<!-- <div id="info">
	<p class="title">BUILDING NAME FILTERING</p><p>Many buildings in OpenStreetMap have names. This demo filters buildings by name and building height.</p>
	<p><b>building scale:</b> scales 3D building height</p>
	<p><b>height filter:</b> filters geometry by building height, in meters - then rebuilds the tiles</p>
	<p><b>text filter:</b> filters buildings by name - try park, building, house, school, or church</p>
	</div> -->

	<!-- Start of 3rd party libraries -->
	<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
	<!-- A lightweight graphical user interface for changing variables in JavaScript. -->
	<script src="https://unpkg.com/dat.gui@0.6.5/build/dat.gui.min.js"></script>
	<!-- bog-standard leaflet URL hash -->
	<script src="https://unpkg.com/leaflet-hash"></script>
	<!-- End of 3rd party libraries -->

	<!-- Main tangram library -->
	<script src="https://www.nextzen.org/tangram/0.14/tangram.min.js"></script>

	<!-- Demo module -->
	<script src="main.js"></script>

	<style>
	/* enlarge dat.gui */
	/* .dg {
	font-size: 12pt;
	}
	.dg li:not(.folder) {
	height: 40px;
	line-height: 40px;
	}
	.dg .c .slider {
	height: 30px;
	}
	.dg .c input[type=text] {
	font-size: 12pt;
	height: 24px;
	} */
	</style>

	</body>
	</html>
	/jslint browser: true/
	/global Tangram, gui /

	(function() {
	var map_start_location = [41.8221, -71.4252, 13]; // Providence

	/* URL parsing */

	// leaflet-style URL hash pattern:
	// #[zoom],[lat],[lng]
	var url_hash = window.location.hash
	.slice(1, window.location.hash.length)
	.split("/");

	if (url_hash.length == 3) {
	map_start_location = [url_hash[1], url_hash[2], url_hash[0]];
	// convert from strings
	map_start_location = map_start_location.map(Number);
	}

	/* Map */

	var map = L.map("map", {
	maxZoom: 20,
	minZoom: 12,
	inertia: false,
	keyboard: true
	});
	var layer = Tangram.leafletLayer({
	scene: "scene.yaml",
	attribution: "© OSM contributors"
	});

	window.layer = layer;
	var scene = layer.scene;
	window.scene = scene;

	map.setView(map_start_location.slice(0, 2), map_start_location[2]);

	var hash = new L.Hash(map);

	// // Resize map to window
	// function resizeMap() {
	// document.getElementById("map").style.width = window.innerWidth + "px";
	// document.getElementById("map").style.height = window.innerHeight + "px";
	// map.invalidateSize(false);
	// }
	//
	// window.addEventListener("resize", resizeMap);
	// resizeMap();

	scene.subscribe({
	view_complete: function() {
	console.log("scene view complete");
	}
	});

	var startDate = new Date("2007-09-01T00:00:00Z");
	var endDate = new Date();
	document.getElementById("timecode").textContent = endDate.toDateString();

	// Create dat GUI
	var gui = new dat.GUI({ autoPlace: true, width: 350 });
	function addGUI() {
	gui.domElement.parentNode.style.zIndex = 500; // make sure GUI is on top of map
	window.gui = gui;

	var DatePicker = function() {
	this.date = endDate.getTime();
	};

	// gui["date"] = startDate;
	// var d = gui.add(gui, "date", startDate.getTime(), endDate.getTime());
	// var d = gui.add(gui, "date", 0, 100);
	// d.onChange(function(value) {
	// scene.config.global.min_height = value;
	// scene.rebuildGeometry();
	// });

	var picker = new DatePicker();
	var dp = gui.add(picker, "date", startDate.getTime(), endDate.getTime());
	dp.onFinishChange(function(value) {
	var d = new Date(value);
	var ds = d.toISOString();

	console.log(d);
	document.getElementById("timecode").textContent = d.toDateString();

	scene.config.layers.snapshot.filter = `function() {
	return feature.updated <= "${ds}" &&
	(feature.validUntil > "${ds}" \|\| feature.validUntil === "");
	}`;

	scene.rebuild();
	});
	}

	// Add map
	window.addEventListener("load", function() {
	// Scene initialized
	layer.on("init", function() {
	addGUI();
	});
	layer.addTo(map);
	});
	})();
	sources:
	ri:
	max_zoom: 15
	max_display_zoom: 22
	min_display_zoom: 12
	type: MVT
	url: https://mojodna-temp.s3.amazonaws.com/rhode-island-all/{z}/{x}/{y}.mvt
	scene:
	background:
	color: white
	styles:
	all_lines:
	base: lines
	blend: inlay
	draw:
	order: 10
	color: [0.333, 0.333, 0.682, 0.025]
	width: 1.5px
	all_points:
	base: points
	blend: inlay
	draw:
	collide: false
	order: 10
	color: [0.333, 0.333, 0.682, 0.025]
	size: 1px
	snapshot_lines:
	base: lines
	blend: inlay
	draw:
	order: 10
	color: [0.333, 0.333, 0.682, 0.25]
	width: 1px
	snapshot_points:
	base: points
	blend: inlay
	draw:
	collide: false
	order: 10
	color: [0.333, 0.333, 0.682, 0.25]
	size: 1px
	layers:
	all:
	enabled: false
	data:
	source: ri
	layer: points
	draw:
	lines:
	style: all_lines
	points:
	style: all_points
	snapshot:
	enabled: true
	data:
	source: ri
	layer: points
	filter: \|
	function() {
	return feature.updated <= "2016-01-01T00:00:00Z" &&
	(feature.validUntil > "2016-01-01T00:00:00Z" \|\| feature.validUntil === "");
	}
	draw:
	lines:
	style: snapshot_lines
	points:
	style: snapshot_points