Ryan Cooper maptastik

	ROUTE	MATCHED
	ALGONQUIN PKWY	1
	BANK ST	1
	BARRET AVE	1
	BAXTER AVE	1
	BELMAR DR	1
	BERRY BLVD	1
	BLUEGRASS AVE	1
	BRECKINRIDGE LN	1
	E BRECKINRIDGE ST	1

What

In this map I'm attempting to do a couple things.

Create an oblique Leaflet map (Drawing on this little tutorial from Peter Liu at Mapbox)
Use the leaflet-boundary-canvas plugin to display a cutout of night time imagery of Kentucky

Issues

~~tiles load unreliably. They flicker in and out of view. What's going on here?~~ SOLVED!

My first mapbox-gl.js map!

This is a really simple map. I just added added a GeoJSON layer depicting the boundary for Franklin County, Kentucky. I have to admit, I had to take a couple days break between my first attempt to add the county boundary and this successful one. It took running across this example from bwyss on GitHub. For some reason, looking at his project it finally clicked about how to add a feature, particularly of the GeoJSON variety, using this new library. I'm not sure that it's actually different from what is in the docmentation at Mapbox, but I had my 'Ah ha!' moment with the aforementioned example. Coming from LeafletJS/MapboxJS, mapbox-gl.js has a bit of a learning curve. There's so much styling that can be done with this new library that isn't possible when using pre-rendered tiles. It's exciting, but also means thinking differently about what I'm doing when I'm adding data to a webmap. Next steps are to add some markers an

	<html>
	<head>
	<title>Leaflet Squirrel - Step 4</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<style>
	#map{ height: 100% }
	</style>
	</head>

	<html>
	<head>
	<title>Leaflet Squirrel - Part 5</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<style>
	#map{ height: 100% }
	</style>
	</head>

	<html>
	<head>
	<title>Leaflet Squirrel - Part 6</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<style>
	#map{ height: 100% }
	</style>
	</head>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Zoom to location on link click</title>

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>

	<!DOCTYPE html>
	<html>
	<head>
	<title>It's Full of Points - Lexington Address Locations</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
	<link href="style.css" rel="stylesheet" type="text/css" />
	<style>