Skip to content

Instantly share code, notes, and snippets.

@patriciogonzalezvivo

patriciogonzalezvivo/index.html

Last active February 14, 2017 16:17
Show Gist options
  • 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

Revisions

  1. patriciogonzalezvivo revised this gist Feb 14, 2017. 1 changed file with 3 additions and 26 deletions.
    29 changes: 3 additions & 26 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -17,9 +17,6 @@
    <!-- 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>
    <!-- Language Selector for Tangram -->
    <link rel="stylesheet" href="https://tangrams.github.io/ux_narrative/ux_narrative.css" />
    <script type="text/javascript" src="https://tangrams.github.io/ux_narrative/ux_narrative.js"></script>
    <!-- SouthUp the input controls of a leaflet map -->
    <script type="text/javascript" src="https://patriciogonzalezvivo.github.io/southUp/leaflet-southup.js"></script>

    @@ -59,31 +56,13 @@
    user-drag: none;
    -webkit-user-drag: none;
    }
    .ux_narrative-story {
    margin-left: 10px;
    margin-right: 10px;
    font-family: Baskerville, Times, Sans;
    font-size: 14px;
    line-height: normal;
    }
    .ux_narrative-story img {
    width: 100%;
    }
    .ux_narrative-story p {
    width: 100%;
    line-height: normal;
    }
    .ux_narrative-story a {
    width: 100%;
    line-height: normal;
    }
    </style>
    </head>

    <body>
    <div class="label" id="popup"></div>
    <div id="map"></div>
    <img class="wind_rose" src="images/rose.png">
    <img class="wind_rose" src="https://patriciogonzalezvivo.github.io/Territory/images/rose.png">

    <!-- Demo module -->
    <script type="text/javascript">
    @@ -114,11 +93,11 @@
    });
    L.control.geocoder('mapzen-YoRQaZF',{pointIcon: false, markers: false}).addTo(map);
    var layer = Tangram.leafletLayer({
    scene: 'territory.yaml',
    scene: 'https://patriciogonzalezvivo.github.io/Territory/territory.yaml',
    minZoom: 2,
    maxZoom: 18,
    introspection: true,
    attribution: '<a href="http://jenlowe.net/" target="_blank">@datatelling</a> & <a href="http://patricio.io" target="_blank">@patriciogv</a>'
    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;
    @@ -137,8 +116,6 @@
    southUp(map);
    window.addEventListener('load', function () {
    layer.addTo(map);
    // Add layer explorer
    map.addControl(L.uxNarrative({story:'README.md', position: 'topleft'}));
    layer.setSelectionEvents({
    hover: function(selection) {
    if (!selection || selection.feature == null || selection.feature.properties == null) {
  2. patriciogonzalezvivo created this gist Feb 14, 2017.
    167 changes: 167 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,167 @@
    <!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>
    <!-- Language Selector for Tangram -->
    <link rel="stylesheet" href="https://tangrams.github.io/ux_narrative/ux_narrative.css" />
    <script type="text/javascript" src="https://tangrams.github.io/ux_narrative/ux_narrative.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;
    }
    .ux_narrative-story {
    margin-left: 10px;
    margin-right: 10px;
    font-family: Baskerville, Times, Sans;
    font-size: 14px;
    line-height: normal;
    }
    .ux_narrative-story img {
    width: 100%;
    }
    .ux_narrative-story p {
    width: 100%;
    line-height: normal;
    }
    .ux_narrative-story a {
    width: 100%;
    line-height: normal;
    }
    </style>
    </head>

    <body>
    <div class="label" id="popup"></div>
    <div id="map"></div>
    <img class="wind_rose" src="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: 'territory.yaml',
    minZoom: 2,
    maxZoom: 18,
    introspection: true,
    attribution: '<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);
    // Add layer explorer
    map.addControl(L.uxNarrative({story:'README.md', position: 'topleft'}));
    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>