D3 Examples - Tangram Firefly Map

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
    <!-- leaflet -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.js"></script>
    <!-- Main tangram library -->
    <script src="https://mapzen.com/tangram/tangram.min.js"></script>
​
    <script src="https://cdn.jsdelivr.net/quicksettings/latest/quicksettings.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
​
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.css" />
  <style>
    body {
      margin:0;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
  }
​
    #map {
      height: 100%;
      width: 100%;
      position: absolute;
      z-index: 0;
    }
 </style>
</head>
​
<body>
  <div id="map"></div>
​
  <script>
    var mapContainer = document.querySelector('#map');
    var map = L.map('map');
    map.setView([36.2453813,-100.7281112], 5);
​
    var layer = Tangram.leafletLayer({
      scene: 'scene.yaml',
      attribution: '<a href="https://mapzen.com/tangram" target="_blank">Tangram</a> | &copy; OSM contributors | <a href="https://mapzen.com/" target="_blank">Mapzen</a>'
    });
    layer.addTo(map);
    var scene = layer.scene;
​
    var requestRedraw = function() {
      window.requestAnimationFrame(function() {
        scene.requestRedraw();
      });
    }
​
    // Interaction callbacks
    layer.setSelectionEvents({
      hover: function(selection) {
​
        if (selection.pixel && selection.leaflet_event.target) {
          var node = selection.leaflet_event.target._container;
​
          var x = selection.pixel.x;
          var y = selection.pixel.y;
​
          scene.styles.citydot.shaders.uniforms.u_mouse_x = x;
          scene.styles.citydot.shaders.uniforms.u_mouse_y = y;
          requestRedraw();
        }
      }
    });
​
    // Scene warnings & errors.
    scene.subscribe({
      error: function (e) {
        console.log('scene error:', e);
      },
      warning: function (e) {
        console.log('scene warning:', e);
      },
      load: function () {
        console.log('scene load complete');
      }
    });
​
​
  </script>
</body>
​
    