maptastik/.block

## .block
license: mit
scrolling: yes
border: yes

## README.md

      
    Raw
  

              README.md
            
          
    MapzenJS w/ a feature layer

Scott County B3 zone example

Adaptation of map created in the "Map Sandwich" tutorial. GeoJSON for the B3 zones in Scott County is pulled via a query of GSCPC's zoning data REST endpoint. The feature layer is ordered so that the polygon fill is drawn underneath roads and whatever features are usually draw above roads in their Refill basemap. This is done with the setting:
draw:
	polygons:
		order: global.sdk_order_under_roads_0
The outline of the feature is drawn above everything but text using the parameter:
draw:
	...
	lines:
		order: global.sdk_order_over_everything_but_text_0
Built with blockbuilder.org

  
## app.js
var georgetown = [38.209940, -84.559847]

var map = L.Mapzen.map('map', {
    center: georgetown,
    zoom: 16,
    scene: 'scene.yaml'
});

map.zoomControl.setPosition('topright');

## index.html
<!DOCTYPE html>
<head>
  <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>
    body {
  margin:0; padding:0;
    }
    #map {
      top:0;
      bottom:0;
      width: 100%;
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script src="app.js"></script>
</body>

## scene.yaml
import: https://mapzen.com/carto/refill-style/4/refill-style.yaml

sources:
    _georgetown_b3:
        type: GeoJSON
        url: http://gis.gscplanning.com/arcgis/rest/services/Zoning/MapServer/0/query?where=ZONE%3D%27B-3%27&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=&returnGeometry=true&returnTrueCurves=false&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&resultOffset=&resultRecordCount=&f=geojson

layers:
    _downtown:
        data: {source: _georgetown_b3}
        draw:
            polygons:
                color: '#BCE3B4'
                order: global.sdk_order_under_roads_0
            lines:
                width: 2px
                color: '#518946'
                order: global.sdk_order_over_everything_but_text_0
	var georgetown = [38.209940, -84.559847]

	var map = L.Mapzen.map('map', {
	center: georgetown,
	zoom: 16,
	scene: 'scene.yaml'
	});

	map.zoomControl.setPosition('topright');
	<!DOCTYPE html>
	<head>
	<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>
	body {
	margin:0; padding:0;
	}
	#map {
	top:0;
	bottom:0;
	width: 100%;
	position: absolute;
	}
	</style>
	</head>

	<body>
	<div id="map"></div>
	<script src="app.js"></script>
	</body>
	import: https://mapzen.com/carto/refill-style/4/refill-style.yaml

	sources:
	_georgetown_b3:
	type: GeoJSON
	url: http://gis.gscplanning.com/arcgis/rest/services/Zoning/MapServer/0/query?where=ZONE%3D%27B-3%27&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=&returnGeometry=true&returnTrueCurves=false&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&resultOffset=&resultRecordCount=&f=geojson

	layers:
	_downtown:
	data: {source: _georgetown_b3}
	draw:
	polygons:
	color: '#BCE3B4'
	order: global.sdk_order_under_roads_0
	lines:
	width: 2px
	color: '#518946'
	order: global.sdk_order_over_everything_but_text_0