columbus3 0.4.0 → 0.5.0

data/bower_components/leaflet/docs/examples/video-overlay/example-bounds.md

@@ -0,0 +1,23 @@
+---
+layout: tutorial_frame
+title: Video Overlay Tutorial
+---
+<script>
+	var map = L.map('map');
+
+	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.satellite'
+	}).addTo(map);
+
+	bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
+
+	L.rectangle(bounds).addTo(map);
+
+	map.fitBounds(bounds);
+
+</script>
+

data/bower_components/leaflet/docs/examples/video-overlay/example-nocontrols.md

@@ -0,0 +1,31 @@
+---
+layout: tutorial_frame
+title: Video Overlay Tutorial
+---
+<script>
+	var map = L.map('map');
+
+	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.satellite'
+	}).addTo(map);
+
+	var videoUrls = [
+		'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
+		'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
+	],
+	bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
+
+	map.fitBounds(bounds);
+
+	var overlay = L.videoOverlay(videoUrls, bounds, {
+		opacity: 0.8,
+		interactive: true
+	});
+	map.addLayer(overlay);
+
+</script>
+

data/bower_components/leaflet/docs/examples/video-overlay/example.md

@@ -0,0 +1,58 @@
+---
+layout: tutorial_frame
+title: Video Overlay Tutorial
+---
+<script>
+	var map = L.map('map');
+
+	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.satellite'
+	}).addTo(map);
+
+	var videoUrls = [
+		'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
+		'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
+	],
+	bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
+
+	map.fitBounds(bounds);
+
+	var overlay = L.videoOverlay(videoUrls, bounds, {
+		opacity: 0.8,
+		interactive: false,
+		autoplay: false
+	});
+	map.addLayer(overlay);
+
+	overlay.on('load', function () {
+		var MyPauseControl = L.Control.extend({
+			onAdd: function() {
+				var button = L.DomUtil.create('button');
+				button.innerHTML = '⏸';
+				L.DomEvent.on(button, 'click', function () {
+					overlay.getElement().pause();
+				});
+				return button;
+			}
+		});
+		var MyPlayControl = L.Control.extend({
+			onAdd: function() {
+				var button = L.DomUtil.create('button');
+				button.innerHTML = '⏵';
+				L.DomEvent.on(button, 'click', function () {
+					overlay.getElement().play();
+				});
+				return button;
+			}
+		});
+
+		var pauseControl = (new MyPauseControl()).addTo(map);
+		var playControl = (new MyPlayControl()).addTo(map);
+	});
+
+</script>
+

data/bower_components/leaflet/docs/examples/video-overlay/index.md

@@ -0,0 +1,122 @@
+---
+layout: tutorial_v2
+title: Leaflet on Mobile
+---
+
+## Video on webpages
+
+Video used to be a hard task when building a webpage, until the [`<video>` HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) was made available.
+
+Nowadays, we can use the following HTML code:
+
+	<video width="500" controls>
+		<source src="https://www.mapbox.com/bites/00188/patricia_nasa.webm" type="video/webm">
+		<source src="https://www.mapbox.com/bites/00188/patricia_nasa.mp4" type="video/mp4">
+	</video>
+
+To display this video:
+
+<video width="500" controls>
+<source src="https://www.mapbox.com/bites/00188/patricia_nasa.webm" type="video/webm">
+<source src="https://www.mapbox.com/bites/00188/patricia_nasa.mp4" type="video/mp4">
+</video>
+
+If a video can be shown in a webpage in this way, then Leaflet can display it inside a map. It is important that the videos are prepared in such a way that they will fit the map: The video should have a "north-up" orientation, and its proportions should fit the map. If not, it will look out of place.
+
+### Bounds of an image overlay
+
+First of all, create a Leaflet map and add a background `L.TileLayer` in the usual way:
+
+	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.satellite',
+		attribution: ...
+	}).addTo(map);
+
+Then, we'll define the geographical bounds that the video will cover. This is an instance of [`L.LatLngBounds`](../../reference.html#latlngbounds), which is a rectangular shape:
+
+	var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
+
+If you want to see the area covered by a `LatLngBounds`, use a [`L.Rectangle`]((../../reference.html#latlngbounds)):
+
+	L.rectangle(bounds).addTo(map);
+
+	map.fitBounds(bounds);
+
+{% include frame.html url="example-bounds.html" %}
+
+
+### Adding the video overlay
+
+Adding a video overlay works very similar to adding a image overlay. For just one image, [`L.ImageOverlay`s](../../reference.html#imageoverlay) is used like this:
+
+	var overlay = L.imageOverlay( imageUrl, bounds, options );
+
+For a video overlay, just:
+
+* Use `L.videoOverlay` instead of `L.imageOverlay`
+* Instead of the image URL, specify one video URL *or* an array of video URLs
+
+```
+	var videoUrls = [
+		'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
+		'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
+	];
+
+	var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
+
+	var videoOverlay = L.videoOverlay( videoUrls, bounds, {
+		opacity: 0.8
+	}).addTo(map);
+```
+
+And just like that, you'll get the video on your map:
+
+{% include frame.html url="example-nocontrols.html" %}
+
+
+Video overlays behave like any other Leaflet layer - you can add and remove them, let the user select from several videos using a [layers control](../layers-control/), etc.
+
+
+### A bit of control over the video
+
+If you read the API documentation, you'll notice that the `L.VideoOverlay` class does not have a `play()` or `pause()` method.
+
+For this, the `getElement()` method of the video overlay is useful. It returns the [`HTMLVideoElement`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement) (which inherits from [`HTMLMediaElement`](https://developer.mozilla.org/docs/Web/API/HTMLMediaElement)) for the overlay - and that has methods like `play()` and `pause()`, e.g.
+
+```
+	videoOverlay.getElement().pause();
+```
+
+This allows us to build custom interfaces. For example, we can build a small subclass of `L.Control` to play/pause this video overlay once it's loaded:
+
+```
+	videoOverlay.on('load', function () {
+		var MyPauseControl = L.Control.extend({
+			onAdd: function() {
+				var button = L.DomUtil.create('button');
+				button.innerHTML = '⏸';
+				L.DomEvent.on(button, 'click', function () {
+					videoOverlay.getElement().pause();
+				});
+				return button;
+			}
+		});
+		var MyPlayControl = L.Control.extend({
+			onAdd: function() {
+				var button = L.DomUtil.create('button');
+				button.innerHTML = '⏵';
+				L.DomEvent.on(button, 'click', function () {
+					videoOverlay.getElement().play();
+				});
+				return button;
+			}
+		});
+
+		var pauseControl = (new MyPauseControl()).addTo(map);
+		var playControl = (new MyPlayControl()).addTo(map);
+	});
+```
+
+{% include frame.html url="example.html" %}

data/bower_components/leaflet/docs/examples/wms/wms-example-crs.md

@@ -0,0 +1,18 @@
+---
+layout: tutorial_frame
+title: WMS example
+---
+<script type='text/javascript'>
+
+	var map = L.map('map', {
+		center: [0, 0],
+		zoom: 1,
+		crs: L.CRS.EPSG4326
+	});
+
+	var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
+		layers: 'nasa:bluemarble'
+	}).addTo(map);
+
+
+</script>

data/bower_components/leaflet/docs/examples/wms/wms-example1.md

@@ -0,0 +1,16 @@
+---
+layout: tutorial_frame
+title: WMS example
+---
+<script type='text/javascript'>
+
+	var map = L.map('map', {
+		center: [-17, -67],
+		zoom: 3
+	});
+
+	var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
+		layers: 'ne:ne'
+	}).addTo(map);
+
+</script>

data/bower_components/leaflet/docs/examples/wms/wms-example2.md

@@ -0,0 +1,16 @@
+---
+layout: tutorial_frame
+title: WMS example
+---
+<script type='text/javascript'>
+
+	var map = L.map('map', {
+		center: [-17, -67],
+		zoom: 3
+	});
+
+	var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
+		layers: 'nasa:bluemarble'
+	}).addTo(map);
+
+</script>

data/bower_components/leaflet/docs/examples/wms/wms-example3.md

@@ -0,0 +1,34 @@
+---
+layout: tutorial_frame
+title: WMS example
+---
+<script type='text/javascript'>
+
+	var map = L.map('map', {
+		center: [-17, -67],
+		zoom: 3
+	});
+
+	var basemaps = {
+		Countries: L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
+			layers: 'ne:ne_10m_admin_0_countries'
+		}),
+
+		Boundaries: L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
+			layers: 'ne:ne_10m_admin_0_boundary_lines_land'
+		}),
+
+		'Countries, then boundaries': L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
+			layers: 'ne:ne_10m_admin_0_countries,ne:ne_10m_admin_0_boundary_lines_land'
+		}),
+
+		'Boundaries, then countries': L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
+			layers: 'ne:ne_10m_admin_0_boundary_lines_land,ne:ne_10m_admin_0_countries'
+		})
+	};
+
+	L.control.layers(basemaps, {}, {collapsed: false}).addTo(map);
+
+	basemaps.Countries.addTo(map);
+
+</script>

data/bower_components/leaflet/docs/examples/wms/wms-example4.md

@@ -0,0 +1,29 @@
+---
+layout: tutorial_frame
+title: WMS example
+---
+<script type='text/javascript'>
+
+var map = L.map('map', {
+		center: [-17, -67],
+		zoom: 3
+	});
+
+	var tms_ne = L.tileLayer('http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0/ne:ne@EPSG:900913@png/{z}/{x}/{y}.png', {
+		tms: true
+	}).addTo(map);
+
+	var tms_bluemarble = L.tileLayer('http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0/nasa:bluemarble@EPSG:900913@jpg/{z}/{x}/{y}.jpg', {
+		tms: true
+	});
+
+	var basemaps = {
+		'Natural Earth': tms_ne,
+		'NASA Blue Marble': tms_bluemarble
+	};
+
+	L.control.layers(basemaps, {}, {collapsed: false}).addTo(map);
+
+	basemaps.Countries.addTo(map);
+
+</script>

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

@@ -0,0 +1,157 @@
+---
+layout: tutorial_v2
+title: Using WMS and TMS services
+---
+
+<style>
+iframe {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+</style>
+
+<br/>
+
+WMS, short for [*web map service*](https://en.wikipedia.org/wiki/Web_Map_Service), is a popular way of publishing maps by professional GIS software (and seldomly used by non-GISers). This format is similar to map tiles, but more generic and not so well optimized for use in web maps. A WMS image is defined by the coordinates of its corners - a calculation that Leaflet does under the hood.
+
+TMS stands for *tiled map service*, and is a map tiling standard more focused on web maps, very similar to the map tiles that Leaflet expects in a `L.TileLayer`.
+
+## WMS in Leaflet
+
+When somebody publishes a WMS service, most likely they link to something called a `GetCapabilities` document. For this tutorial, we'll use the demo map services from GeoServer, at http://demo.opengeo.org/geoserver/web/. As you can see in that page, "WMS" links to the following URL:
+
+	http://demo.opengeo.org/geoserver/ows?service=wms&version=1.3.0&request=GetCapabilities
+
+Leaflet does not understand WMS `GetCapabilities` documents. Instead, you have to create a `L.TileLayer.WMS` layer, provide the base WMS URL, and specify whatever WMS options you need.
+
+The base WMS URL is simply the `GetCapabilities` URL, without any parameters, like so:
+
+	http://demo.opengeo.org/geoserver/ows?
+
+And the way to use that in a Leaflet map is simply:
+
+	var map = L.map(mapDiv, mapOptions);
+
+	var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', wmsOptions).addTo(map);
+
+An instance of `L.TileLayer.WMS` needs at least one option: `layers`. Be careful, as the concept of "layer" in Leaflet is different from the concept of "layer" in WMS!
+
+WMS servers define a set of *layers* in the service. These are defined in the `GetCapabilities` XML document, which most times is tedious and difficult to understand. Usually it's a good idea to use software such as [QGIS to see what layers are available in a WMS server](http://www.qgistutorials.com/en/docs/working_with_wms.html) to see the layer names available:
+
+![Discovering WMS layers with QGIS](qgis-wms-layers.png)
+
+We can see that the OpenGeo demo WMS has a WMS layer named `ne:ne` with a basemap. Let's see how it looks:
+
+	var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
+		layers: 'ne:ne'
+	}).addTo(map);
+
+{% include frame.html url="wms-example1.html" %}
+
+
+Or we can try the `nasa:bluemarble` WMS layer:
+
+	var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
+		layers: 'nasa:bluemarble'
+	}).addTo(map);
+
+{% include frame.html url="wms-example2.html" %}
+
+
+The `layers` option is a comma-separated list of layers. If a WMS service has defined several layers, then a request for a map image can refer to more than one layer.
+
+For the example WMS server we're using, there is a `ne:ne_10m_admin_0_countries` WMS layer showing country landmasses and country names, and a `ne:ne_10m_admin_0_boundary_lines_land` WMS layer showing country boundaries. The WMS server will compose both layers in one image if we request both, separated with a comma:
+
+	var countriesAndBoundaries = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
+		layers: 'ne:ne_10m_admin_0_countries,ne:ne_10m_admin_0_boundary_lines_land'
+	}).addTo(map);
+
+Note this will request *one* image to the WMS server. This is different than creating a `L.TileLayer.WMS` for the countries, another one for the boundaries, and adding them both to the map. In the first case, there is one image request and it's the WMS server who decides how to compose (put on top of each other) the image. In the second case, there would be two image requests and it's the Leaflet code running in the web browser who decides how to compose them.
+
+If we combine this with the [layers control](/examples/layers-control.html), then we can build a simple map to see the difference:
+
+	var basemaps = {
+		Countries: L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
+			layers: 'ne:ne_10m_admin_0_countries'
+		}),
+
+		Boundaries: L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
+			layers: 'ne:ne_10m_admin_0_boundary_lines_land'
+		}),
+
+		'Countries, then boundaries': L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
+			layers: 'ne:ne_10m_admin_0_countries,ne:ne_10m_admin_0_boundary_lines_land'
+		}),
+
+		'Boundaries, then countries': L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
+			layers: 'ne:ne_10m_admin_0_boundary_lines_land,ne:ne_10m_admin_0_countries'
+		})
+	};
+
+	L.control.layers(basemaps).addTo(map);
+
+	basemaps.Countries.addTo(map);
+
+Change to the "Countries, then boundaries" option, so you can see the boundaries "on top" of the landmasses, but the WMS server is clever enough to display building labels on top of that. It's up to the WMS server how to compose layers when asked for many.
+
+{% include frame.html url="wms-example3.html" %}
+
+
+### Notes to GIS users of WMS services
+
+From a GIS point of view, WMS handling in Leaflet is quite basic. There's no `GetCapabilities` support, no legend support, and no `GetFeatureInfo` support.
+
+`L.TileLayer.WMS` has extra options, which can be found in [Leaflet's API documentation](../../reference.html#tilelayer-wms-options). Any option not described there will be passed to the WMS server in the `getImage` URLs.
+
+Also note that Leaflet supports very few [coordinate systems](https://en.wikipedia.org/wiki/Spatial_reference_system): `CRS:3857`, `CRS:3395` and `CRS:4326` (See the documentation for `L.CRS`). If your WMS service doesn't serve images in those coordinate systems, you might need to use [Proj4Leaflet](https://github.com/kartena/Proj4Leaflet) to use a different coordinate system in Leaflet. Other than that, just use the right CRS when initializing your map, and any WMS layers added will use it:
+
+	var map = L.map('map', {
+		crs: L.CRS.EPSG4326
+	});
+
+	var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
+		layers: 'nasa:bluemarble'
+	}).addTo(map);
+
+{% include frame.html url="wms-example-crs.html" %}
+	
+	
+## TMS in Leaflet
+
+Leaflet doesn't have explicit support for TMS services, but the tile naming structure is so similar to the common `L.TileLayer` naming scheme, that displaying a TMS service is almost trivial.
+
+Using the same OpenGeo WMS/TMS server demo, we can see there's a TMS endpoint at:
+
+	http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0
+
+Checking the [MapCache help about TMS](http://mapserver.org/mapcache/services.html) and the [TMS specification](https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification) you can see that the URL for a map tile in TMS looks like:
+
+	http://base_url/tms/1.0.0/ {tileset} / {z} / {x} / {y} .png
+
+To use the OpenGeo TMS services as a `L.TileLayer`, we can check the capabilities document (the same as the base endpoint, in our case [`http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0`](http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0)) to see what `tileset`s are available, and build our base URLs:
+
+	http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0/ne:ne@EPSG:900913@png/{z}/{x}/{y}.png
+
+	http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0/nasa:bluemarble@EPSG:900913@jpg/{z}/{x}/{y}.jpg
+
+
+And use the `tms:true` option when instantiating the layers, like so:
+
+	var tms_ne = L.tileLayer('http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0/ne:ne@EPSG:900913@png/{z}/{x}/{y}.png', {
+		tms: true
+	}).addTo(map);
+
+	var tms_bluemarble = L.tileLayer('http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0/nasa:bluemarble@EPSG:900913@jpg/{z}/{x}/{y}.jpg', {
+		tms: true
+	});
+
+{% include frame.html url="wms-example4.html" %}
+
+
+A new feature in **Leaflet 1.0** is the ability to use `{-y}` in the URL instead of a `tms: true` option, e.g.:
+
+	var layer = L.tileLayer('http://base_url/tms/1.0.0/tileset/{z}/{x}/{-y}.png');
+
+The `tms: true` option (in Leaflet 0.7) or `{-y}` (in Leaflet 1.0) are needed because the origin of coordinates of vanilla `L.TileLayer`s is the top left corner, so the Y coordinate goes *down*. In TMS, the origin of coordinates is the *bottom* left corner so the Y coordinate goes *up*.
+
+Besides the difference in the `y` coordinate and the discovery of tilesets, TMS services serve tiles exactly in the way that `L.TileLayer` expects.