Skip to content

Instantly share code, notes, and snippets.

@maptastik
Created August 1, 2015 02:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maptastik/66217f142b80fea71be9 to your computer and use it in GitHub Desktop.
Save maptastik/66217f142b80fea71be9 to your computer and use it in GitHub Desktop.
Lexington Parcels - Tilemill Method
// 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
<!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>
/*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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment