Lexington Parcels - Vector Tiles w/ Mapbox Studio by maptastik

index.html

<!doctype html>
<html lang='en'>
	<head>
		<meta charset="UTF-8">
		<title>Lexington Parcels - Vector Tiles</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: 12,
	maxZoom: 18
}).setView([38.046441, -84.497019], 12);

// The base and parcels were added to the base layer in Mapbox Studio so we only add this one layer
L.mapbox.tileLayer('maptastik.2adeb805').addTo(map);

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

parcels.mss

#parcel {
  line-color:#000;
  polygon-opacity:0.2;
  polygon-fill:#000;
  [zoom <= 12] {
  	line-width:0.05;
  }
  [zoom = 13] {
  	line-width:0.25;
  }
  [zoom = 14] {
  	line-width:0.5;
  }
  [zoom >= 15] {
  	line-width: 1;
  }
}