columbus3 0.4.0 → 0.5.0

data/bower_components/leaflet/docs/examples.md

@@ -0,0 +1,125 @@
+---
+layout: v2
+title: Tutorials
+bodyclass: examples
+---
+
+## Leaflet Tutorials
+
+Every tutorial here comes with step-by-step code explanation and is easy enough even for beginner JavaScript developers.
+
+
+{% include tutorial_link.html
+page="quick-start/"
+thumbnail="quick-start/thumbnail.png"
+title="Leaflet Quick Start Guide"
+description="A simple step-by-step guide that will quickly get you started with Leaflet basics, including setting up a Leaflet map (with Mapbox tiles) on your page, working with markers, polylines and popups, and dealing with events."
+%}
+
+
+{% include tutorial_link.html
+page="mobile/"
+thumbnail="mobile/thumbnail.png"
+title="Leaflet on Mobile"
+description="In this tutorial, you'll learn how to create a fullscreen map tuned for mobile devices like iPhone, iPad or Android phones, and how to easily detect and use the current user location."
+%}
+
+
+{% include tutorial_link.html
+page="custom-icons/"
+thumbnail="custom-icons/thumbnail.png"
+title="Markers with Custom Icons"
+description="In this pretty tutorial, you'll learn how to easily define your own icons for use by the markers you put on the map."
+%}
+
+
+{% include tutorial_link.html
+page="geojson/"
+thumbnail="geojson/thumbnail.png"
+title="Using GeoJSON with Leaflet"
+description="In this tutorial, you'll learn how to create and interact with map vectors created from [GeoJSON](http://geojson.org/) objects."
+%}
+
+
+{% include tutorial_link.html
+page="choropleth/"
+thumbnail="choropleth/thumbnail.png"
+title="Interactive Choropleth Map"
+description="A case study of creating a colorful interactive [choropleth map](http://en.wikipedia.org/wiki/Choropleth_map) of US States Population Density with GeoJSON and some custom controls. News websites will love this."
+%}
+
+
+{% include tutorial_link.html
+page="layers-control/"
+thumbnail="layers-control/thumbnail.png"
+title="Layer Groups and Layers Control"
+description="A tutorial on how to manage groups of layers and use the layer switching control."
+%}
+
+
+{% include tutorial_link.html
+page="zoom-levels/"
+thumbnail="zoom-levels/thumbnail.png"
+title="Zoom levels"
+description="A deeper look into what zoom levels are."
+%}
+
+{% include tutorial_link.html
+page="crs-simple/crs-simple.html"
+thumbnail="crs-simple/thumbnail.png"
+title="Non-geographical maps"
+description="A primer on `L.CRS.Simple`, how to make maps with no concept of \"latitude\" or \"longitude\"."
+%}
+
+
+{% include tutorial_link.html
+page="wms/wms.html"
+thumbnail="wms/thumbnail.png"
+title="WMS and TMS"
+description="How to integrate with WMS and TMS services from professional GIS software."
+%}
+
+
+{% include tutorial_link.html
+page="map-panes/"
+thumbnail="map-panes/thumbnail.png"
+title="Working with map panes"
+description="How the default map panes work to display overlays on top of tiles, and how to override that."
+%}
+
+
+{% include tutorial_link.html
+page="video-overlay/"
+thumbnail="video-overlay/thumbnail.gif"
+title="Showing video files"
+description="Leaflet can help you display videos somewhere on the map."
+%}
+
+***
+
+The following tutorials cover how to create plugins for Leaflet, and are intended only for developers experienced in Javascript:
+
+
+{% include tutorial_link.html
+page="extending/extending-1-classes.html"
+thumbnail="extending/thumbnail-1.png"
+title="Extending Leaflet: Class Theory"
+description="An overview of Leaflet's classes, class inheritance, and conventions."
+%}
+
+
+{% include tutorial_link.html
+page="extending/extending-2-layers.html"
+thumbnail="extending/thumbnail-2.png"
+title="Extending Leaflet: Layers"
+description="How to extend layers or create new ones, using specific entry points for doing so."
+%}
+
+
+{% include tutorial_link.html
+page="extending/extending-3-controls.html"
+thumbnail="extending/thumbnail-3.png"
+title="Extending Leaflet: Handlers and Controls"
+description="How to extend or create non-layers."
+%}
+

data/bower_components/leaflet/docs/examples/choropleth-example.md

@@ -0,0 +1,5 @@
+---
+layout: redirected
+sitemap: false
+redirect_to:  choropleth/example.html
+---

data/bower_components/leaflet/docs/examples/choropleth.md

@@ -0,0 +1,5 @@
+---
+layout: redirected
+sitemap: false
+redirect_to:  choropleth/
+---

data/bower_components/leaflet/docs/examples/choropleth/example-basic.md

@@ -0,0 +1,20 @@
+---
+layout: tutorial_frame
+title: Choropleth Tutorial
+---
+<script type="text/javascript" src="us-states.js"></script>
+<script type="text/javascript">
+
+	var map = L.map('map').setView([37.8, -96], 4);
+
+	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
+		maxZoom: 18,
+		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
+			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
+		id: 'mapbox.light'
+	}).addTo(map);
+
+	var geojson = L.geoJson(statesData).addTo(map);
+
+</script>

data/bower_components/leaflet/docs/examples/choropleth/example-color.md

@@ -0,0 +1,46 @@
+---
+layout: tutorial_frame
+title: Choropleth Tutorial
+---
+
+<script type="text/javascript" src="us-states.js"></script>
+<script type="text/javascript">
+
+	var map = L.map('map').setView([37.8, -96], 4);
+
+	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
+		maxZoom: 18,
+		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
+			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
+		id: 'mapbox.light'
+	}).addTo(map);
+
+	// get color depending on population density value
+	function getColor(d) {
+		return d > 1000 ? '#800026' :
+				d > 500  ? '#BD0026' :
+				d > 200  ? '#E31A1C' :
+				d > 100  ? '#FC4E2A' :
+				d > 50   ? '#FD8D3C' :
+				d > 20   ? '#FEB24C' :
+				d > 10   ? '#FED976' :
+							'#FFEDA0';
+	}
+
+	function style(feature) {
+		return {
+			weight: 2,
+			opacity: 1,
+			color: 'white',
+			dashArray: '3',
+			fillOpacity: 0.7,
+			fillColor: getColor(feature.properties.density)
+		};
+	}
+
+	var geojson = L.geoJson(statesData, {
+		style: style,
+	}).addTo(map);
+
+</script>

data/bower_components/leaflet/docs/examples/choropleth/example.md

@@ -0,0 +1,159 @@
+---
+layout: tutorial_frame
+title: Choropleth Tutorial
+css: "#map {
+			width: 800px;
+			height: 500px;
+		}
+
+		.info {
+			padding: 6px 8px;
+			font: 14px/16px Arial, Helvetica, sans-serif;
+			background: white;
+			background: rgba(255,255,255,0.8);
+			box-shadow: 0 0 15px rgba(0,0,0,0.2);
+			border-radius: 5px;
+		}
+		.info h4 {
+			margin: 0 0 5px;
+			color: #777;
+		}
+
+		.legend {
+			text-align: left;
+			line-height: 18px;
+			color: #555;
+		}
+		.legend i {
+			width: 18px;
+			height: 18px;
+			float: left;
+			margin-right: 8px;
+			opacity: 0.7;
+		}"
+---
+
+<script type="text/javascript" src="us-states.js"></script>
+<script type="text/javascript">
+
+	var map = L.map('map').setView([37.8, -96], 4);
+
+	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
+		maxZoom: 18,
+		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
+			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
+		id: 'mapbox.light'
+	}).addTo(map);
+
+
+	// control that shows state info on hover
+	var info = L.control();
+
+	info.onAdd = function (map) {
+		this._div = L.DomUtil.create('div', 'info');
+		this.update();
+		return this._div;
+	};
+
+	info.update = function (props) {
+		this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
+			'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
+			: 'Hover over a state');
+	};
+
+	info.addTo(map);
+
+
+	// get color depending on population density value
+	function getColor(d) {
+		return d > 1000 ? '#800026' :
+				d > 500  ? '#BD0026' :
+				d > 200  ? '#E31A1C' :
+				d > 100  ? '#FC4E2A' :
+				d > 50   ? '#FD8D3C' :
+				d > 20   ? '#FEB24C' :
+				d > 10   ? '#FED976' :
+							'#FFEDA0';
+	}
+
+	function style(feature) {
+		return {
+			weight: 2,
+			opacity: 1,
+			color: 'white',
+			dashArray: '3',
+			fillOpacity: 0.7,
+			fillColor: getColor(feature.properties.density)
+		};
+	}
+
+	function highlightFeature(e) {
+		var layer = e.target;
+
+		layer.setStyle({
+			weight: 5,
+			color: '#666',
+			dashArray: '',
+			fillOpacity: 0.7
+		});
+
+		if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
+			layer.bringToFront();
+		}
+
+		info.update(layer.feature.properties);
+	}
+
+	var geojson;
+
+	function resetHighlight(e) {
+		geojson.resetStyle(e.target);
+		info.update();
+	}
+
+	function zoomToFeature(e) {
+		map.fitBounds(e.target.getBounds());
+	}
+
+	function onEachFeature(feature, layer) {
+		layer.on({
+			mouseover: highlightFeature,
+			mouseout: resetHighlight,
+			click: zoomToFeature
+		});
+	}
+
+	geojson = L.geoJson(statesData, {
+		style: style,
+		onEachFeature: onEachFeature
+	}).addTo(map);
+
+	map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>');
+
+
+	var legend = L.control({position: 'bottomright'});
+
+	legend.onAdd = function (map) {
+
+		var div = L.DomUtil.create('div', 'info legend'),
+			grades = [0, 10, 20, 50, 100, 200, 500, 1000],
+			labels = [],
+			from, to;
+
+		for (var i = 0; i < grades.length; i++) {
+			from = grades[i];
+			to = grades[i + 1];
+
+			labels.push(
+				'<i style="background:' + getColor(from + 1) + '"></i> ' +
+				from + (to ? '&ndash;' + to : '+'));
+		}
+
+		div.innerHTML = labels.join('<br>');
+		return div;
+	};
+
+	legend.addTo(map);
+
+</script>

data/bower_components/leaflet/docs/examples/choropleth/index.md

@@ -0,0 +1,232 @@
+---
+layout: tutorial_v2
+title: Interactive Choropleth Map
+---
+
+## Interactive Choropleth Map
+
+This is a case study of creating a colorful interactive [choropleth map](http://en.wikipedia.org/wiki/Choropleth_map) of US States Population Density with the help of [GeoJSON](../geojson/) and some [custom controls](../../reference.html#control) (that will hopefully convince all the remaining major news and government websites that do not use Leaflet yet to start doing so).
+
+The tutorial was inspired by the [Texas Tribune US Senate Runoff Results map](http://www.texastribune.org/library/data/us-senate-runoff-results-map/) (also powered by Leaflet), created by [Ryan Murphy](http://www.texastribune.org/about/staff/ryan-murphy/).
+
+{% include frame.html url="example.html" width=816 height=516 %}
+
+### Data Source
+
+We'll be creating a visualization of population density per US state. As the amount of data (state shapes and the density value for each state) is not very big, the most convenient and simple way to store and then display it is [GeoJSON](../geojson/).
+
+Each feature of our GeoJSON data ([us-states.js](us-states.js)) will look like this:
+
+	{
+		"type": "Feature",
+		"properties": {
+			"name": "Alabama",
+			"density": 94.65
+		},
+		"geometry": ...
+		...
+	}
+
+The GeoJSON with state shapes was kindly shared by [Mike Bostock](http://bost.ocks.org/mike) of [D3](http://d3js.org/) fame, extended with density values from [this Wikipedia article](http://en.wikipedia.org/wiki/List_of_U.S._states_by_population_density) based on July 1st 2011 data from [US Census Bureau](http://www.census.gov/) and assigned to `statesData` JS variable.
+
+### Basic States Map
+
+Let's display our states data on a map with a custom Mapbox style for nice grayscale tiles that look perfect as a background for visualizations:
+
+	var mapboxAccessToken = {your access token here};
+	var map = L.map('map').setView([37.8, -96], 4);
+
+	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + mapboxAccessToken, {
+		id: 'mapbox.light',
+		attribution: ...
+	}).addTo(map);
+
+	L.geoJson(statesData).addTo(map);
+
+{% include frame.html url="example-basic.html" %}
+
+
+### Adding Some Color
+
+Now we need to color the states according to their population density. Choosing nice colors for a map can be tricky, but there's a great tool that can help with it --- [ColorBrewer](http://colorbrewer2.org/). Using the values we got from it, we create a function that returns a color based on population density:
+
+	function getColor(d) {
+		return d > 1000 ? '#800026' :
+		       d > 500  ? '#BD0026' :
+		       d > 200  ? '#E31A1C' :
+		       d > 100  ? '#FC4E2A' :
+		       d > 50   ? '#FD8D3C' :
+		       d > 20   ? '#FEB24C' :
+		       d > 10   ? '#FED976' :
+		                  '#FFEDA0';
+	}
+
+Next we define a styling function for our GeoJSON layer so that its `fillColor` depends on `feature.properties.density` property, also adjusting the appearance a bit and adding a nice touch with dashed stroke.
+
+	function style(feature) {
+		return {
+			fillColor: getColor(feature.properties.density),
+			weight: 2,
+			opacity: 1,
+			color: 'white',
+			dashArray: '3',
+			fillOpacity: 0.7
+		};
+	}
+
+	L.geoJson(statesData, {style: style}).addTo(map);
+
+Looks much better now!
+
+{% include frame.html url="example-color.html" %}
+
+
+### Adding Interaction
+
+Now let's make the states highlighted visually in some way when they are hovered with a mouse. First we'll define an event listener for layer `mouseover` event:
+
+	function highlightFeature(e) {
+		var layer = e.target;
+
+		layer.setStyle({
+			weight: 5,
+			color: '#666',
+			dashArray: '',
+			fillOpacity: 0.7
+		});
+
+		if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
+			layer.bringToFront();
+		}
+	}
+
+Here we get access to the layer that was hovered through `e.target`, set a thick grey border on the layer as our highlight effect, also bringing it to the front so that the border doesn't clash with nearby states (but not for IE, Opera or Edge, since they have problems doing `bringToFront` on `mouseover`).
+
+Next we'll define what happens on `mouseout`:
+
+	function resetHighlight(e) {
+		geojson.resetStyle(e.target);
+	}
+
+The handy `geojson.resetStyle` method will reset the layer style to its default state (defined by our `style` function). For this to work, make sure our GeoJSON layer is accessible through the `geojson` variable by defining it before our listeners and assigning the layer to it later:
+
+	var geojson;
+	// ... our listeners
+	geojson = L.geoJson(...);
+
+As an additional touch, let's define a `click` listener that zooms to the state:
+
+	function zoomToFeature(e) {
+		map.fitBounds(e.target.getBounds());
+	}
+
+Now we'll use the `onEachFeature` option to add the listeners on our state layers:
+
+	function onEachFeature(feature, layer) {
+		layer.on({
+			mouseover: highlightFeature,
+			mouseout: resetHighlight,
+			click: zoomToFeature
+		});
+	}
+
+	geojson = L.geoJson(statesData, {
+		style: style,
+		onEachFeature: onEachFeature
+	}).addTo(map);
+
+This makes the states highlight nicely on hover and gives us the ability to add other interactions inside our listeners.
+
+### Custom Info Control
+
+We could use the usual popups on click to show information about different states, but we'll choose a different route --- showing it on state hover inside a [custom control](../../reference.html#icontrol).
+
+Here's the code for our control:
+
+	var info = L.control();
+
+	info.onAdd = function (map) {
+		this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
+		this.update();
+		return this._div;
+	};
+
+	// method that we will use to update the control based on feature properties passed
+	info.update = function (props) {
+		this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
+			'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
+			: 'Hover over a state');
+	};
+
+	info.addTo(map);
+
+We need to update the control when the user hovers over a state, so we'll also modify our listeners as follows:
+
+	function highlightFeature(e) {
+		...
+		info.update(layer.feature.properties);
+	}
+
+	function resetHighlight(e) {
+		...
+		info.update();
+	}
+
+The control also needs some CSS styles to look nice:
+
+{: .css}
+	.info {
+		padding: 6px 8px;
+		font: 14px/16px Arial, Helvetica, sans-serif;
+		background: white;
+		background: rgba(255,255,255,0.8);
+		box-shadow: 0 0 15px rgba(0,0,0,0.2);
+		border-radius: 5px;
+	}
+	.info h4 {
+		margin: 0 0 5px;
+		color: #777;
+	}
+
+### Custom Legend Control
+
+Creating a control with a legend is easier, since it is static and doesn't change on state hover. JavaScript code:
+
+	var legend = L.control({position: 'bottomright'});
+
+	legend.onAdd = function (map) {
+
+		var div = L.DomUtil.create('div', 'info legend'),
+			grades = [0, 10, 20, 50, 100, 200, 500, 1000],
+			labels = [];
+
+		// loop through our density intervals and generate a label with a colored square for each interval
+		for (var i = 0; i < grades.length; i++) {
+			div.innerHTML +=
+				'<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
+				grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
+		}
+
+		return div;
+	};
+
+	legend.addTo(map);
+
+CSS styles for the control (we also reuse the `info` class defined earlier):
+
+{: .css}
+	.legend {
+		line-height: 18px;
+		color: #555;
+	}
+	.legend i {
+		width: 18px;
+		height: 18px;
+		float: left;
+		margin-right: 8px;
+		opacity: 0.7;
+	}
+
+Enjoy the result on the top of this page, or on a [separate page](example.html).
+
+