Tangram Firefly Map

Tangram Shader Firefly Map

Visual effects with fragment shaders

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.js"></script>
    
    <script src="https://mapzen.com/tangram/tangram.min.js"></script>

#map {
      height: 100%;
      width: 100%;
      position: absolute;
      z-index: 0;
    }
 </style>
</head>

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>

https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.js

https://mapzen.com/tangram/tangram.min.js

https://cdn.jsdelivr.net/quicksettings/latest/quicksettings.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js