tafsiri/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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/


## index.html
<!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>

## scene.yaml
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

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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> \| © 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