clhenrick/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Documenting missing documentation that results in a bug for the Leaflet.Draw Plugin

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
   integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
   crossorigin=""/>
  <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@0.4.10/dist/leaflet.draw.css" />
  <style>
    body { margin:0; position: fixed; top: 0; bottom: 0; left: 0; right: 0;}
    #map { height: 100%; width: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"
   integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="
   crossorigin=""></script>
  <script src="https://unpkg.com/leaflet-draw@0.4.10"></script>
  <script>
		var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

   // FeatureGroup is to store editable layers
   var drawnItems = new L.FeatureGroup();
   map.addLayer(drawnItems);
   var drawControl = new L.Control.Draw({
       edit: {
           featureGroup: drawnItems
       }
   });
   map.addControl(drawControl);

   // without the next code block, drawn items will not persist to the map
//    map.on(L.Draw.Event.CREATED, function (e) {
//       var type = e.layerType,
//           layer = e.layer;

//       if (type === 'marker') {
//           layer.bindPopup('A popup!');
//       }

//       editableLayers.addLayer(layer);
//    });
  </script>
</body>

## scene.yaml
cameras:
    camera1:
        type: perspective

lights:
    light1:
        type: directional
        direction: [0, 1, -.5]
        diffuse: .3
        ambient: 1

sources:
    mapzen:
        type: TopoJSON
        url: https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.topojson
        url_params:
            api_key: mapzen-tDHBHDp
        max_zoom: 16

layers:
    earth:
        data: { source: mapzen }
        draw:
            polygons:
                order: function() { return feature.sort_rank; }
                color: '#C6DB52'

    landuse:
        data: { source: mapzen }
        draw:
            polygons:
                order: function() { return feature.sort_rank; }
                color: '#77A23C'

    water:
        data: { source: mapzen }
        draw:
            polygons:
                order: function() { return feature.sort_rank; }
                color: '#5BC5C4'

    roads:
        data: { source: mapzen }
        enabled: false
        filter:
            not: { kind: [path, rail, ferry] }
        draw:
            lines:
                order: function() { return feature.sort_rank; }
                color: gray
                width: 8
                cap: round
        highway:
            filter:
                kind: highway
            draw:
                lines:
                    order: function() { return feature.sort_rank; }
                    color: '#cc6666'
                    width: 12
                    outline:
                        color: grey
                        width: 1.5
        minor_road:
            filter:
                kind: minor_road
            draw:
                lines:
                    order: function() { return feature.sort_rank; }
                    color: lightgrey
                    width: 5

    buildings:
        data: { source: mapzen }
        enabled: false
        draw:
            polygons:
                order: function() { return feature.sort_rank; }
                color: |
                    function () {
                        var h = feature.height || 20;
                        h = Math.min((h + 50)/ 255, .8); // max brightness: .8
                        h = Math.max(h, .4); // min brightness: .4
                        return [h, h, h];
                    }
        3d-buildings:
            filter: { $zoom: { min: 15 } }
            draw:
                polygons:
                    extrude: function () { return feature.height > 20 || $zoom >= 16; }
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
	integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
	crossorigin=""/>
	<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@0.4.10/dist/leaflet.draw.css" />
	<style>
	body { margin:0; position: fixed; top: 0; bottom: 0; left: 0; right: 0;}
	#map { height: 100%; width: 100%; }
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"
	integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="
	crossorigin=""></script>
	<script src="https://unpkg.com/leaflet-draw@0.4.10"></script>
	<script>
	var map = L.map('map').setView([51.505, -0.09], 13);
	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);

	// FeatureGroup is to store editable layers
	var drawnItems = new L.FeatureGroup();
	map.addLayer(drawnItems);
	var drawControl = new L.Control.Draw({
	edit: {
	featureGroup: drawnItems
	}
	});
	map.addControl(drawControl);

	// without the next code block, drawn items will not persist to the map
	// map.on(L.Draw.Event.CREATED, function (e) {
	// var type = e.layerType,
	// layer = e.layer;

	// if (type === 'marker') {
	// layer.bindPopup('A popup!');
	// }

	// editableLayers.addLayer(layer);
	// });
	</script>
	</body>
	cameras:
	camera1:
	type: perspective

	lights:
	light1:
	type: directional
	direction: [0, 1, -.5]
	diffuse: .3
	ambient: 1

	sources:
	mapzen:
	type: TopoJSON
	url: https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.topojson
	url_params:
	api_key: mapzen-tDHBHDp
	max_zoom: 16

	layers:
	earth:
	data: { source: mapzen }
	draw:
	polygons:
	order: function() { return feature.sort_rank; }
	color: '#C6DB52'

	landuse:
	data: { source: mapzen }
	draw:
	polygons:
	order: function() { return feature.sort_rank; }
	color: '#77A23C'

	water:
	data: { source: mapzen }
	draw:
	polygons:
	order: function() { return feature.sort_rank; }
	color: '#5BC5C4'

	roads:
	data: { source: mapzen }
	enabled: false
	filter:
	not: { kind: [path, rail, ferry] }
	draw:
	lines:
	order: function() { return feature.sort_rank; }
	color: gray
	width: 8
	cap: round
	highway:
	filter:
	kind: highway
	draw:
	lines:
	order: function() { return feature.sort_rank; }
	color: '#cc6666'
	width: 12
	outline:
	color: grey
	width: 1.5
	minor_road:
	filter:
	kind: minor_road
	draw:
	lines:
	order: function() { return feature.sort_rank; }
	color: lightgrey
	width: 5

	buildings:
	data: { source: mapzen }
	enabled: false
	draw:
	polygons:
	order: function() { return feature.sort_rank; }
	color: \|
	function () {
	var h = feature.height \|\| 20;
	h = Math.min((h + 50)/ 255, .8); // max brightness: .8
	h = Math.max(h, .4); // min brightness: .4
	return [h, h, h];
	}
	3d-buildings:
	filter: { $zoom: { min: 15 } }
	draw:
	polygons:
	extrude: function () { return feature.height > 20 \|\| $zoom >= 16; }