D3 Examples - Tangram plaything with OSM2VectorTiles tiles

Tangram personal playground

We choose to play with it, featuring basic map creation with Tangram.

Two files are required:

an html file for the web page to call Leaflet and Tangram together (they work together)

a yaml file for tiles styling configuration required for Tangram engine where we use http://osm2vectortiles.org remote CDN tiles.

Demo is available at </thomasg77/52f729ba5bf18d5051018dec516fe778>

Feel free to ask any questions or improvements in the comments.

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Web Map</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://mapzen.com/js/mapzen.css">
    <script src="https://mapzen.com/js/mapzen.min.js"></script>
​
    <style>
      #map {
        height: 100%;
        width: 100%;
        position: absolute;
      }
    html,body{margin: 0; padding: 0}
  </style>
​
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map = L.Mapzen.map('map', {
        scene: 'vector.yaml'//L.Mapzen.BasemapStyles.TronMoreLabels
      });
      map.setView([37.7749, -122.4194], 12);
​
      map.on('tangramloaded', function(event) {
        console.log(event.tangramLayer);
      });
​
      var locator = L.Mapzen.locator();
      locator.setPosition('bottomright');
      locator.addTo(map);
​
      L.Mapzen.hash({
        map: map
      });
​
    </script>
  </body>
</html>
    