tafsiri · December 21, 2016 02:41
diff --git a/README.md b/README.md
diff --git a/index.html b/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://cdn.jsdelivr.net/quicksettings/latest/quicksettings.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.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;
      z-index: 0;
    }
 </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);

    // Keep a reference to the scene
    var scene = layer.scene;

    // World
    map.setView([16.0315162,8.7011004], 3);

    var updateConfig = function() {
      if(scene.config) {
        window.requestAnimationFrame(function() {
          console.log('scene.config', scene.config);
          scene.updateConfig();
        });
      } else {
        console.log('scene config not ready')
      }

    }

    updateConfig();

    scene.subscribe({
      error: function (e) {
        console.log('scene error:', e);
      },
      warning: function (e) {
        console.log('scene warning:', e);
      },
      load: function (e) {
        console.log('scene load complete');

        setTimeout(function() {
          loadData();
        }, 500);
      }
    });

    function loadData() {
      //Load some data and then update the scene.
      d3.csv("world_population.csv", function(error, data) {

        // Reshape the data, and extract the population counts
        // for 2015.
        var rows = data.map(function(d){
          return {
            'code': d['Country Code'],
            'name': d['Country Name'],
            'population': Number(d['2015'])
          }
        })

        // Make a color scale
        //
        var lowCol = "hsl(62,100%,90%)";
        var highCol = "hsl(222,30%,20%)";

        var domain = d3.extent(rows, function(d) {
          if (d.population > 0) {
            return d.population
          }
        });

        var color = d3.scaleLog()
          .domain(domain)
          .range([lowCol, highCol])
          .interpolate(d3.interpolateHcl);

        // So it looks like the color scale can't be correctly serialized
        // across to the tangram renderer (which i think is running in a web
        // worker), so we pre-compute the colors here.
        var mapData = rows.reduce(function(memo, d) {
          d.color = color(d.population);
          memo[d.code] = d;
          return memo
        }, {});

        attachData(scene, mapData);
    });
  }

  function attachData(scene, mapData) {
    // Attach the data and scale functions to the scene
    var config = scene.config;
    config.global.data = mapData;
    config.layers.FeatureCollection.draw.polygons.color = function() {
      var countryData = global.data[feature.adm0_a3];
      if (countryData && countryData.color) {
        return countryData.color;
      } else {
        return 'black'
      }
    };

    updateConfig();
  }

  </script>
 </body>
diff --git a/scene.yaml b/scene.yaml
 cameras:
  camera1:
    type: perspective

 lights:
  directional:
    visible: true
    type: directional
    direction: [0, 1, -.5]
    diffuse: .8
    ambient: .55

 sources:
  osm:
    type: TopoJSON
    url:  https://vector.mapzen.com/osm/all/{z}/{x}/{y}.topojson?api_key=vector-tiles-jvpqPNW
    max_zoom: 16

  countryData:
    type: GeoJSON
    url: world.json

 scene:
  background:
    color: white

 global:
  data: # Our choropleth data will go here.


 layers:
  FeatureCollection:
    visible: true
    data:
      source: countryData
    draw:
      polygons:
        order: 200
        color: rgb(255, 190, 0)
      lines:
        order: 201
        color: 'blue'
        width: 1px


  earth:
    visible: true
    data: { source: osm }
    draw:
      polygons:
        order: 101
        color: '#C4B295'

  landuse:
    visible: false
    data: { source: osm }
    draw:
      polygons:
        order: 101
        color: '#C4B295'
    forest:
      filter: function() { return feature.protect_class }
      draw:
        polygons:
          order: 100
          color: '#84932D'

  water:
    visible: false
    data: { source: osm }
    draw:
      polygons:
        order: 100
        color: '#183969'

  roads:
    data: { source: osm }
    filter:
      not: { kind: ["path", "rail"] }
    draw:
      lines:
        order: 401
        color: '#6e6e6e'
        width: 8
        cap: round
    minor_road:
      filter:
        kind: minor_road
      draw:
        lines:
          order: 400
          color: '#cfcfcf'
          width: 5

  buildings:
    data: { source: osm }
    draw:
      polygons:
        order: 450
        color: '#dddddd'
    3d-buildings:
      filter: { $zoom: { min: 15 } }
      draw:
        polygons:
          extrude: function () { return (Math.random() * 30) + 10 }

  # These boundaries are not what you think they are.
  # boundaries:
  #   data: { source: osm }
  #   filter:
  #     kind: country
  #   draw:
  #     lines:
  #       order: global.order
  #       color: green
  #       width: 2px
  #     outlines:
  #       style: lines
  #       order: global.order
  #       color: red
  #       width: 3px

  places:
    data: { source: osm }
    countries:
      filter:
        kind: country
      draw:
        points:
          order: 501
          color: rgb(41, 34, 6)
          size: 0
          text:
            text_source: function() { return feature.int_name || feature.name; }
            font:
              family: Arial
              size: 14px
              style: italic
              weight: bold
              fill: '#111'
              stroke: { color: white, width: 2 }
              transform: uppercase
    cities:
      filter: |
        function() {
          return feature.kind == 'Populated place' ||
          feature.kind == 'Admin-0 capital' ||
          feature.kind == 'Admin-1 capital';
        }
      draw:
        points:
          order: 500
          color: rgb(41, 34, 6)
          size: 0
          text:
            text_source: function() { return feature.int_name || feature.name; }
            font:
              family: Arial
              size: 12px
              weight: normal
              fill: '#333'
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/world.json b/world.json
diff --git a/world_population.csv b/world_population.csv
	<!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://cdn.jsdelivr.net/quicksettings/latest/quicksettings.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.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;
	z-index: 0;
	}
	</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);

	// Keep a reference to the scene
	var scene = layer.scene;

	// World
	map.setView([16.0315162,8.7011004], 3);

	var updateConfig = function() {
	if(scene.config) {
	window.requestAnimationFrame(function() {
	console.log('scene.config', scene.config);
	scene.updateConfig();
	});
	} else {
	console.log('scene config not ready')
	}

	}

	updateConfig();

	scene.subscribe({
	error: function (e) {
	console.log('scene error:', e);
	},
	warning: function (e) {
	console.log('scene warning:', e);
	},
	load: function (e) {
	console.log('scene load complete');

	setTimeout(function() {
	loadData();
	}, 500);
	}
	});

	function loadData() {
	//Load some data and then update the scene.
	d3.csv("world_population.csv", function(error, data) {

	// Reshape the data, and extract the population counts
	// for 2015.
	var rows = data.map(function(d){
	return {
	'code': d['Country Code'],
	'name': d['Country Name'],
	'population': Number(d['2015'])
	}
	})

	// Make a color scale
	//
	var lowCol = "hsl(62,100%,90%)";
	var highCol = "hsl(222,30%,20%)";

	var domain = d3.extent(rows, function(d) {
	if (d.population > 0) {
	return d.population
	}
	});

	var color = d3.scaleLog()
	.domain(domain)
	.range([lowCol, highCol])
	.interpolate(d3.interpolateHcl);

	// So it looks like the color scale can't be correctly serialized
	// across to the tangram renderer (which i think is running in a web
	// worker), so we pre-compute the colors here.
	var mapData = rows.reduce(function(memo, d) {
	d.color = color(d.population);
	memo[d.code] = d;
	return memo
	}, {});

	attachData(scene, mapData);
	});
	}

	function attachData(scene, mapData) {
	// Attach the data and scale functions to the scene
	var config = scene.config;
	config.global.data = mapData;
	config.layers.FeatureCollection.draw.polygons.color = function() {
	var countryData = global.data[feature.adm0_a3];
	if (countryData && countryData.color) {
	return countryData.color;
	} else {
	return 'black'
	}
	};

	updateConfig();
	}

	</script>
	</body>
	cameras:
	camera1:
	type: perspective

	lights:
	directional:
	visible: true
	type: directional
	direction: [0, 1, -.5]
	diffuse: .8
	ambient: .55

	sources:
	osm:
	type: TopoJSON
	url: https://vector.mapzen.com/osm/all/{z}/{x}/{y}.topojson?api_key=vector-tiles-jvpqPNW
	max_zoom: 16

	countryData:
	type: GeoJSON
	url: world.json

	scene:
	background:
	color: white

	global:
	data: # Our choropleth data will go here.


	layers:
	FeatureCollection:
	visible: true
	data:
	source: countryData
	draw:
	polygons:
	order: 200
	color: rgb(255, 190, 0)
	lines:
	order: 201
	color: 'blue'
	width: 1px


	earth:
	visible: true
	data: { source: osm }
	draw:
	polygons:
	order: 101
	color: '#C4B295'

	landuse:
	visible: false
	data: { source: osm }
	draw:
	polygons:
	order: 101
	color: '#C4B295'
	forest:
	filter: function() { return feature.protect_class }
	draw:
	polygons:
	order: 100
	color: '#84932D'

	water:
	visible: false
	data: { source: osm }
	draw:
	polygons:
	order: 100
	color: '#183969'

	roads:
	data: { source: osm }
	filter:
	not: { kind: ["path", "rail"] }
	draw:
	lines:
	order: 401
	color: '#6e6e6e'
	width: 8
	cap: round
	minor_road:
	filter:
	kind: minor_road
	draw:
	lines:
	order: 400
	color: '#cfcfcf'
	width: 5

	buildings:
	data: { source: osm }
	draw:
	polygons:
	order: 450
	color: '#dddddd'
	3d-buildings:
	filter: { $zoom: { min: 15 } }
	draw:
	polygons:
	extrude: function () { return (Math.random() * 30) + 10 }

	# These boundaries are not what you think they are.
	# boundaries:
	# data: { source: osm }
	# filter:
	# kind: country
	# draw:
	# lines:
	# order: global.order
	# color: green
	# width: 2px
	# outlines:
	# style: lines
	# order: global.order
	# color: red
	# width: 3px

	places:
	data: { source: osm }
	countries:
	filter:
	kind: country
	draw:
	points:
	order: 501
	color: rgb(41, 34, 6)
	size: 0
	text:
	text_source: function() { return feature.int_name \|\| feature.name; }
	font:
	family: Arial
	size: 14px
	style: italic
	weight: bold
	fill: '#111'
	stroke: { color: white, width: 2 }
	transform: uppercase
	cities:
	filter: \|
	function() {
	return feature.kind == 'Populated place' \|\|
	feature.kind == 'Admin-0 capital' \|\|
	feature.kind == 'Admin-1 capital';
	}
	draw:
	points:
	order: 500
	color: rgb(41, 34, 6)
	size: 0
	text:
	text_source: function() { return feature.int_name \|\| feature.name; }
	font:
	family: Arial
	size: 12px
	weight: normal
	fill: '#333'