Skip to content

Instantly share code, notes, and snippets.

@patriciogonzalezvivo

patriciogonzalezvivo/index.html

Last active February 14, 2017 16:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save patriciogonzalezvivo/a19856bbb21acfca34271df6a96e8e5b to your computer and use it in GitHub Desktop.
Save patriciogonzalezvivo/a19856bbb21acfca34271df6a96e8e5b to your computer and use it in GitHub Desktop.
Download ZIP
territory
Raw
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>Territory</title>
<!-- 3rd party libraries -->
<!-- Leaflet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.js"></script>
<!-- bog-standard leaflet URL hash -->
<script type="text/javascript" src="https://cdn.rawgit.com/mlevans/leaflet-hash/master/leaflet-hash.js"></script>
<!-- Main tangram library -->
<script type="text/javascript" src="https://mapzen.com/tangram/0.11/tangram.min.js"></script>
<!-- Load geocoding plugin after Leaflet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.4.1/leaflet-geocoder-mapzen.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.4.1/leaflet-geocoder-mapzen.js"></script>
<!-- SouthUp the input controls of a leaflet map -->
<script type="text/javascript" src="https://patriciogonzalezvivo.github.io/southUp/leaflet-southup.js"></script>
<!-- End of 3rd party libraries -->
<style>
body {
margin: 0px;
border: 0px;
padding: 0px;
overflow: hidden;
}
#map {
position: absolute;
background: black;
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background: rgba(0, 0, 0, 0);
z-index:0;
}
.wind_rose {
z-index: 2;
color: white;
position: absolute;
width: 220px;
bottom: 50px;
right: 55px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
user-drag: none;
-webkit-user-drag: none;
}
</style>
</head>
<body>
<div class="label" id="popup"></div>
<div id="map"></div>
<img class="wind_rose" src="https://patriciogonzalezvivo.github.io/Territory/images/rose.png">
<!-- Demo module -->
<script type="text/javascript">
var map = (function () {
'use strict';
var map_start_location = [-24.98,-62.53, 3.6];
/*** URL parsing ***/
// leaflet-style URL hash pattern:
// ?style.yaml#[zoom],[lat],[lng]
var url_hash = window.location.hash.slice(1).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);
}
var animated = true;
var url_search = window.location.search.slice(1);
if (url_search.length > 0) {
if (url_search.indexOf('animated=false') > -1) {
animated = false;
}
}
/*** Map ***/
var map = L.map('map', {
maxZoom: 20,
trackResize: true,
keyboard: false
});
L.control.geocoder('mapzen-YoRQaZF',{pointIcon: false, markers: false}).addTo(map);
var layer = Tangram.leafletLayer({
scene: 'https://patriciogonzalezvivo.github.io/Territory/territory.yaml',
minZoom: 2,
maxZoom: 18,
introspection: true,
attribution: 'Tangram, <a href="http://jenlowe.net/" target="_blank">@datatelling</a> & <a href="http://patricio.io" target="_blank">@patriciogv</a>'
});
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();
// S <-> N
southUp(map);
window.addEventListener('load', function () {
layer.addTo(map);
layer.setSelectionEvents({
hover: function(selection) {
if (!selection || selection.feature == null || selection.feature.properties == null) {
return;
}
scene.styles.constellations.shaders.uniforms.u_selected = selection.feature.properties.id;
},
click: function(selection) {
if (!selection || selection.feature == null || selection.feature.properties == null) {
return;
}
scene.styles.constellations.shaders.uniforms.u_selected = selection.feature.properties.id;
}
});
});
return map;
}());
</script>
<!-- Adding a script block to post message to the parent container (think iframed demos) -->
<script type="text/javascript">
window.addEventListener("hashchange",function(){parent.postMessage(window.location.hash, "*")});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment