Skip to content

Instantly share code, notes, and snippets.

@tafsiri
Last active Sep 7, 2016
Embed
What would you like to do?
tangram-test
license: mit

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

<!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/0.8/tangram.min.js"></script>
<script src="https://d3js.org/d3.v4.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;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map');
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);
var scene = layer.scene;
scene.subscribe({
error: function (e) {
console.log('scene error:', e);
},
warning: function (e) {
console.log('scene warning:', e);
}
});
</script>
</body>
cameras:
camera1:
type: perspective
lights:
light1:
visible: true
type: directional
direction: [0, 1, -.5]
diffuse: .4
ambient: 1
light2:
visible: false
type: point
position: [42.364506, -71.038887, 100]
origin: world
ambient: .5
diffuse: 1
specular: .4
sources:
osm:
type: TopoJSON
url: https://vector.mapzen.com/osm/all/{z}/{x}/{y}.topojson?api_key=vector-tiles-HqUVidw
max_zoom: 16
layers:
earth:
data: { source: osm }
draw:
polygons:
order: function() { return feature.sort_key; }
color: '#ffffff'
landuse:
visible: true
data: { source: osm }
draw:
polygons:
order: function() { return feature.sort_key; }
color: '#ffffff'
water:
data: { source: osm }
draw:
polygons:
order: function() { return feature.sort_key; }
color: '#96acba'
roads:
data: { source: osm }
filter:
not: { kind: ["path", "rail"] }
draw:
lines:
order: function() { return feature.sort_key; }
color: '#6e6e6e'
width: 8
cap: round
minor_road:
filter:
kind: minor_road
draw:
lines:
order: function() { return feature.sort_key; }
color: '#cfcfcf'
width: 5
buildings:
data: { source: osm }
draw:
polygons:
order: function() { return feature.sort_key; }
color: grey
3d-buildings:
filter: { $zoom: { min: 15 } }
draw:
polygons:
extrude: function () { return feature.height > 20 || $zoom >= 16; }
pois:
data: { source: osm }
draw:
points:
order: function() { return feature.sort_key; }
color: rgb(41, 34, 6)
size: 0
text:
text_source: name
font:
family: Arial
size: 14px
style: italic
weight: bold
fill: '#222222'
stroke: { color: white, width: 2 }
transform: uppercase
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment