Skip to content

Instantly share code, notes, and snippets.

@maptastik
Last active January 30, 2017 03:13
Show Gist options
  • Save maptastik/492de278799da03636021f7ff35eb1e4 to your computer and use it in GitHub Desktop.
Save maptastik/492de278799da03636021f7ff35eb1e4 to your computer and use it in GitHub Desktop.
MapzenJS w/ a feature layer
license: mit
scrolling: yes
border: yes

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

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment