-
-
Save mojodna/c499a2352993321c1515b6e61de4fc6d to your computer and use it in GitHub Desktop.
Rhode Island viewer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*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); | |
}); | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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