tangram-test

First Tangram map.

Getting up and running with a Tangram map. Started with the example at https://github.com/tangrams/simple-demo

Notes

Changes

The main changes this introduces is adding POIs and labels for them to the map as well as changing some colors of various features and centering the map in Boston.

Colors

When setting colors, keep in mind that they will be affected by the light in the scene, so while the earth layer color is set to #ffffff, it ended up rendering at #d7d7d7 based on a given configuration of lights. In this case it gets darker when the ambient value for the main light goes below 1.

POI Labels

To get POI labels to show up, you need to have the land use layer visible. Not really sure why this is at the moment but it is hinted at here (https://mapzen.com/documentation/vector-tiles/layers/ in the Points of Interest section). This is true even though the text sublayer is part of the POI layer in this map.

Different POI names show at different zoom levels, not sure how to control this yet, or filter out POIs that do not have their name displayed yet.

Links

Layers Documentation for available layers from Mapzen vector tiles are documented here: https://mapzen.com/documentation/vector-tiles/layers/

<!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/0.8/tangram.min.js"></script>

#map {
      height: 100%;
      width: 100%;
      position: absolute;
    }
 </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);

// map.setView([40.70531887544228, -74.00976419448853], 15);

map.setView([42.364506, -71.038887], 15);

</script>
</body>

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

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

https://d3js.org/d3.v4.min.js