rfriberg · February 28, 2017 18:34
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <title>Dot Mapping</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>
      html,body{margin: 0; padding: 0}
      #map {
        height: 100%;
        width: 100%;
        position: absolute;
      }
  </style>
  </head>
 <body>
  <div id="map"></div>

  <script>
    var popup = L.popup();
    var treeList = [
      'Acacia baileyana', 'Ginko biloba', 'Melaleuca quinquenervia', 
      'Prunus serrulata', 'Arbutus unedo', 'Ligustrum lucidum', 
      'Metrosideros excelsus', 'Pyrus calleryana', 'Dodonea viscosa', 
      'Lophostemon confertus', 'Olea europaea', 'Rhaphiolepsis', 
      'Eriobotrya baileyana', 'Magnolia grandiflora', 'Pittosporum undulatum', 
      'Tristaniopsis laurina', 'Ficus microcarpa', 'Maytenus boaria', 
      'Prunus cerasifera'];

    // Mapzen API key (replace key with your own)
    // To generate your own key, go to https://mapzen.com/developers/
    L.Mapzen.apiKey = 'mapzen-JA21Wes';

    var map = L.Mapzen.map('map', {
      center: [37.7443, -122.4229],
      zoom: 18,
      debugTangram: true,
      scene: 'scene.yaml'
    });

    // add lat/lon hash 
    L.Mapzen.hash({
      map: map
    });


    // qSpecies:
    // "Ficus microcarpa nitida 'Green Gem' :: Indian Laurel Fig Tree 'Green Gem'"
    function getTreeContent(props) {
      var commonName = props.qSpecies.split(' :: ')[1];
      var latinName = props.qSpecies.split(' :: ')[0];

      if (!commonName) {
        return '<p>Unknown</p>';
      }

      // Get photo if available
      var photo = getTreePhoto(latinName);

      return '<p>' + commonName + '</p>' + photo;
    }

    function getTreePhoto(latinName) {
      var photo = '';

      if (treeList.indexOf(latinName) >= 0) {
        photo = '<div style="width:200px">'
              + '<img src="https://s3.amazonaws.com/mapzen-assets/images/dot-mapping/trees/' + latinName + '.jpg" width="200" />'
              + '</div>';
      }
      return photo;
    }

    function showPopup(latlng, content) {
      popup
        .setLatLng(latlng)
        .setContent(content)
        .openOn(map);        
    }

    function onMapHover(selection) {
      document.getElementById('map').style.cursor = selection.feature ? 'pointer' : '';

      if (selection.feature) {
        var content,
            props = selection.feature.properties;

        if (props.qSpecies) {
          content = getTreeContent(props);
        } else {
          return;
        }

        showPopup(selection.leaflet_event.latlng, content);
      }
    }

    // Add a Tangram event listener
    map.on('tangramloaded', function(e) {
      e.tangramLayer.setSelectionEvents({
         hover: onMapHover
      });
    });

  </script>
 </body>
 </html>
diff --git a/scene.yaml b/scene.yaml
 import: https://mapzen.com/carto/refill-style/refill-style.yaml

 sources:
    trees:
        type: GeoJSON
        url: https://s3.amazonaws.com/mapzen-assets/images/dot-mapping/trees_min.geojson

 styles:
    _tree_icons_style:
        base: points
        blend_order: 1
        texture: https://s3.amazonaws.com/mapzen-assets/images/dot-mapping/tree_white.png

 layers:
    _trees_layer:
        data: { source: trees }
        filter: { $zoom: { min: 12 } }
        draw:
            points:
                color: [[12, [0.290, 0.604, 0.290, 0.30]], [18, [0.165, 0.478, 0.165, 0.85]]] 
                size: [[12, 1px], [15, 5px], [18, 14px], [18, 20px], [22, 52px]]
                collide: false
                interactive: true
        _trees_icon_sublayer:
            filter: { $zoom: { min: 18 } }
            draw:
                _tree_icons_style:
                    size: [[18, 14px], [22, 40px]]
                    collide: false
                points:
                    text:
                        text_source: |
                            function () {
                                return feature.qSpecies.split(':: ')[1];
                            }
                        font:
                            fill: forestgreen
                            size: 10pt
                            stroke:
                                width: 5px
                                color: white
                        optional: true

    roads:
        filter: { $zoom: { min: 18} }
        draw:
            lines:
                interactive: false
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Dot Mapping</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>
	html,body{margin: 0; padding: 0}
	#map {
	height: 100%;
	width: 100%;
	position: absolute;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>

	<script>
	var popup = L.popup();
	var treeList = [
	'Acacia baileyana', 'Ginko biloba', 'Melaleuca quinquenervia',
	'Prunus serrulata', 'Arbutus unedo', 'Ligustrum lucidum',
	'Metrosideros excelsus', 'Pyrus calleryana', 'Dodonea viscosa',
	'Lophostemon confertus', 'Olea europaea', 'Rhaphiolepsis',
	'Eriobotrya baileyana', 'Magnolia grandiflora', 'Pittosporum undulatum',
	'Tristaniopsis laurina', 'Ficus microcarpa', 'Maytenus boaria',
	'Prunus cerasifera'];

	// Mapzen API key (replace key with your own)
	// To generate your own key, go to https://mapzen.com/developers/
	L.Mapzen.apiKey = 'mapzen-JA21Wes';

	var map = L.Mapzen.map('map', {
	center: [37.7443, -122.4229],
	zoom: 18,
	debugTangram: true,
	scene: 'scene.yaml'
	});

	// add lat/lon hash
	L.Mapzen.hash({
	map: map
	});


	// qSpecies:
	// "Ficus microcarpa nitida 'Green Gem' :: Indian Laurel Fig Tree 'Green Gem'"
	function getTreeContent(props) {
	var commonName = props.qSpecies.split(' :: ')[1];
	var latinName = props.qSpecies.split(' :: ')[0];

	if (!commonName) {
	return '<p>Unknown</p>';
	}

	// Get photo if available
	var photo = getTreePhoto(latinName);

	return '<p>' + commonName + '</p>' + photo;
	}

	function getTreePhoto(latinName) {
	var photo = '';

	if (treeList.indexOf(latinName) >= 0) {
	photo = '<div style="width:200px">'
	+ '<img src="https://s3.amazonaws.com/mapzen-assets/images/dot-mapping/trees/' + latinName + '.jpg" width="200" />'
	+ '</div>';
	}
	return photo;
	}

	function showPopup(latlng, content) {
	popup
	.setLatLng(latlng)
	.setContent(content)
	.openOn(map);
	}

	function onMapHover(selection) {
	document.getElementById('map').style.cursor = selection.feature ? 'pointer' : '';

	if (selection.feature) {
	var content,
	props = selection.feature.properties;

	if (props.qSpecies) {
	content = getTreeContent(props);
	} else {
	return;
	}

	showPopup(selection.leaflet_event.latlng, content);
	}
	}

	// Add a Tangram event listener
	map.on('tangramloaded', function(e) {
	e.tangramLayer.setSelectionEvents({
	hover: onMapHover
	});
	});

	</script>
	</body>
	</html>
	import: https://mapzen.com/carto/refill-style/refill-style.yaml

	sources:
	trees:
	type: GeoJSON
	url: https://s3.amazonaws.com/mapzen-assets/images/dot-mapping/trees_min.geojson

	styles:
	_tree_icons_style:
	base: points
	blend_order: 1
	texture: https://s3.amazonaws.com/mapzen-assets/images/dot-mapping/tree_white.png

	layers:
	_trees_layer:
	data: { source: trees }
	filter: { $zoom: { min: 12 } }
	draw:
	points:
	color: [[12, [0.290, 0.604, 0.290, 0.30]], [18, [0.165, 0.478, 0.165, 0.85]]]
	size: [[12, 1px], [15, 5px], [18, 14px], [18, 20px], [22, 52px]]
	collide: false
	interactive: true
	_trees_icon_sublayer:
	filter: { $zoom: { min: 18 } }
	draw:
	_tree_icons_style:
	size: [[18, 14px], [22, 40px]]
	collide: false
	points:
	text:
	text_source: \|
	function () {
	return feature.qSpecies.split(':: ')[1];
	}
	font:
	fill: forestgreen
	size: 10pt
	stroke:
	width: 5px
	color: white
	optional: true

	roads:
	filter: { $zoom: { min: 18} }
	draw:
	lines:
	interactive: false