block by maptastik 66217f142b80fea71be9

Lexington Parcels - Tilemill Method

Full Screen

index.html

<!doctype html>
<html lang='en'>
	<head>
		<meta charset="UTF-8">
		<title>Lexington Parcels - Tilemill</title>
		<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
		<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
		<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
		<style>
			body {
				margin: 0;
				padding: 0;
			}
			#map {
				position: absolute;
				top: 0;
				bottom: 0;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div id="map"></div>
		<script src='app.js'></script>
	</body>
</html>

app.js

// Mapbox access token. You'll want to use your own
L.mapbox.accessToken = 'pk.eyJ1IjoibWFwdGFzdGlrIiwiYSI6IjNPMkREV1kifQ.2KGPFZD0QaGfvYzXYotTXQ';

// Initialize the map, set the minimum and maximum zoom, and specify starting zoom and center
var map = L.map('map', {
	minZoom: 11,
	maxZoom: 16
}).setView([38.046441, -84.497019], 11);

// Add Stamen Toner basemap
var base = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
	subdomains: 'abcd',
	ext: 'png'
}).addTo(map);

// This is where you add the parcels layer you made in Tilemill!
L.mapbox.tileLayer('maptastik.lex-parcels').addTo(map);

// Then whatever features (vacant parcels, some kind of point feature...really any feature) can be added below

style.mss

/*Here's how you might style the parcels.*/
#parcels {
  line-color:#000;
  polygon-opacity:0.2;
  polygon-fill:#000;
  [zoom = 11] {
  	line-width:0.1
  }
  [zoom = 12] {
  	line-width:0.2;
  }
  [zoom = 13] {
  	line-width:0.35;
  }
  [zoom = 14] {
  	line-width:0.65;
  }
  [zoom >= 15] {
  	line-width: 1;
  }
}