Skip to content

Instantly share code, notes, and snippets.

@mojodna mojodna/index.html Secret

Last active May 15, 2018
Embed
What would you like to do?
Rhode Island viewer
<!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: "&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);
});
})();
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.