columbus3 0.4.0 → 0.5.0

data/bower_components/leaflet/docs/examples/extending/extending-3-controls.md

@@ -0,0 +1,100 @@
+---
+layout: tutorial_v2
+title: Extending Leaflet, New Handlers and Controls
+---
+
+<br>
+
+This tutorial assumes you've read the [theory of Leaflet class inheritance](./extending-1-classes.html).
+
+In Leaflet, a "layer" is anything that moves with the map. In contraposition to that, a "control" is a HTML element that remains static relative to the map container, and a "handler" is a piece of invisible code that changes the map's behaviour.
+
+## Handlers
+
+Map handlers are a new concept in Leaflet 1.0, and their function is to process DOM events from the browser (like `click`, `dblclick` or `mousewheel`) and change the state of the map.
+
+Handlers are relatively simple: they just need a `addHooks()` method (which runs when the handler is enabled in a map) and a `removeHooks()`, which runs when the handler is disabled. A skeleton for handlers is:
+
+	L.CustomHandler = L.Handler.extend({
+		addHooks: function() {
+			L.DomEvent.on(document, 'eventname', this._doSomething, this);
+		},
+
+		removeHooks: function() {
+			L.DomEvent.off(document, 'eventname', this._doSomething, this);
+		},
+
+		_doSomething: function(event) { … }
+	});
+
+This can be illustrated with a simple handler to pan the map when a mobile device is tilted, through [`deviceorientation` events](https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation):
+
+	L.TiltHandler = L.Handler.extend({
+		addHooks: function() {
+			L.DomEvent.on(window, 'deviceorientation', this._tilt, this);
+		},
+
+		removeHooks: function() {
+			L.DomEvent.off(window, 'deviceorientation', this._tilt, this);
+		},
+
+		_tilt: function(ev) {
+			// Treat Gamma angle as horizontal pan (1 degree = 1 pixel) and Beta angle as vertical pan
+			this._map.panBy( L.point( ev.gamma, ev.beta ) );
+		}
+	});
+
+The handler can be attached to the map using `map.addHandler('tilt', L.TiltHandler)` - this will store an instance of `L.TiltHandler` as `map.tilt`. However, it's more usual to attach handlers to all maps with the `addInitHook` syntax:
+
+	L.Map.addInitHook('addHandler', 'tilt', L.TiltHandler);
+
+Our handler can now be enabled by running `map.tilt.enable()` and disabled by `map.tilt.disable()`
+
+Moreover, if the map has a property named the same as the handler, then that handler will be enabled by default if that options is `true`, so this will enable our handler by default:
+
+	var map = L.map('mapDiv', { tilt: true });
+
+To see this example, you'll need a mobile browser which [supports the `deviceorientation` event](http://caniuse.com/#search=deviceorientation) - and even so, this event is particularly flaky and ill-specified, so beware.
+
+{% include frame.html url="tilt.html" %}
+
+Depending on the type of event, a map handler can attach event listeners to the `document`, the `window`, or the container of the `L.Map` it's attached to.
+
+## Controls
+
+You already know controls - the zoom control in the top left corner, the scale at the bottom left, the layer switcher at the top right. At their core, an `L.Control` is an HTML Element that is at a static position in the map container.
+
+To make a control, simply inherit from `L.Control` and implement `onAdd()` and `onRemove()`. These methods work in a similar way to their `L.Layer` counterparts (they run whenever the control is added to or removed from the map), except that `onAdd()` must return an instance of `HTMLElement` representing the control. Adding the element to the map is done automatically, and so is removing it.
+
+The simplest example of a custom control would be a watermark, which is just an image:
+
+	L.Control.Watermark = L.Control.extend({
+		onAdd: function(map) {
+			var img = L.DomUtil.create('img');
+
+			img.src = '../../docs/images/logo.png';
+			img.style.width = '200px';
+
+			return img;
+		},
+
+		onRemove: function(map) {
+			// Nothing to do here
+		}
+	});
+
+	L.control.watermark = function(opts) {
+		return new L.Control.Watermark(opts);
+	}
+
+	L.control.watermark({ position: 'bottomleft' }).addTo(map);
+
+{% include frame.html url="watermark.html" %}
+
+If your custom control has interactive elements such as clickable buttons, remember to use `L.DomEvent.on()` inside `onAdd()` and `L.DomEvent.off()` inside `onRemove()`.
+
+If your custom control consists of more than one HTML element (like `L.Control.Zoom`, which has two buttons), you'll have to create the whole hierarchy of elements and return the topmost container.
+
+## Publishing your plugin
+
+If you have understood everything so far, you're ready to make som Leaflet plugins! But make sure to read the [`PLUGIN-GUIDE.md` file](https://github.com/Leaflet/Leaflet/blob/master/PLUGIN-GUIDE.md), as it contains some tips and good practices about naming and publishing your plugin.

data/bower_components/leaflet/docs/examples/extending/gridcoords.md

@@ -0,0 +1,32 @@
+---
+layout: tutorial_frame
+title: Grid coordinates
+---
+<script type='text/javascript'>
+
+	var map = L.map('map', {
+		center: [0, 0],
+		zoom: 0
+	});
+
+	L.GridLayer.DebugCoords = L.GridLayer.extend({
+		createTile: function (coords, done) {
+			var tile = document.createElement('div');
+			tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
+			tile.style.outline = '1px solid red';
+
+			setTimeout(function () {
+					done(null, tile);	// Syntax is 'done(error, tile)'
+			}, 500 + Math.random() * 1500);
+
+			return tile;
+		}
+	});
+	
+	L.gridLayer.debugCoords = function(opts) {
+		return new L.GridLayer.DebugCoords(opts);
+	};
+
+	map.addLayer( L.gridLayer.debugCoords() );
+	
+</script>

data/bower_components/leaflet/docs/examples/extending/kittenlayer.md

@@ -0,0 +1,29 @@
+---
+layout: tutorial_frame
+title: KittenLayer
+---
+<script type='text/javascript'>
+
+	var map = L.map('map', {
+		crs: L.CRS.Simple,
+		center: [0, 0],
+		zoom: 5
+	});
+
+	L.TileLayer.Kitten = L.TileLayer.extend({
+		getTileUrl: function(coords) {
+			var i = Math.ceil( Math.random() * 4 );
+			return "http://placekitten.com/256/256?image=" + i;
+		},
+        getAttribution: function() {
+            return "<a href='http://placekitten.com/attribution.html'>PlaceKitten</a>"
+        }
+	});
+
+	L.tileLayer.kitten = function() {
+		return new L.TileLayer.Kitten();
+	}
+
+	map.addLayer( L.tileLayer.kitten() );
+	
+</script>

data/bower_components/leaflet/docs/examples/extending/pixelorigin.md

@@ -0,0 +1,90 @@
+---
+layout: tutorial_frame
+title: Grid coordinates
+---
+<style>
+
+#info {
+	position:absolute; 
+	top:0; 
+	right:0; 
+	width: 20em; 
+	height: 7.5em; 
+	background: rgba(255,255,255,.5); 
+	z-index:500; 
+	font: 12px Sans;
+}
+
+.crsMarker {
+	border-top: 2px green solid;
+	border-left: 2px green solid;
+}
+</style>
+
+<div id='info' style=''></div>
+
+
+<script type='text/javascript'>
+
+	var trd = [63.41, 10.41];
+
+
+	var map = L.map('map', {
+		center: [40, 0],
+		zoom: 1
+	});
+
+	var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
+		attribution: "CartoDB"
+	}).addTo(map);
+
+	var marker = L.marker(trd).addTo(map);
+	
+	var pane = map.getPane('markerPane')
+	
+	var paneCorner = document.createElement('div');
+	paneCorner.style.width = '12px';
+	paneCorner.style.height = '12px';
+	paneCorner.style.borderTop = '2px red solid';
+	paneCorner.style.borderLeft = '2px red solid';
+	
+	pane.appendChild(paneCorner);
+	
+	marker._icon.style.border = '1px solid blue';
+	
+	var crsMarker = L.marker( map.unproject([0, 0]), {
+		icon: L.divIcon({ 
+			className: 'crsMarker',
+			iconAnchor: [0, 0]
+		})
+	} ).addTo(map);
+	
+	
+	var markerOffsetLine = L.polyline([[0, 0], [0, 0]], {color: 'skyblue'}).addTo(map);
+	var iconOffsetLine = L.polyline([[0, 0], [0, 0]], {color: 'blue'}).addTo(map);
+	
+	function info() {
+
+		var pixelOrigin = map.getPixelOrigin();
+		var markerPixelCoords = map.project(trd, map.getZoom());
+		var markerAnchor = marker.options.icon.options.iconAnchor;
+		var markerOffset = marker._icon._leaflet_pos;
+		
+		document.getElementById('info').innerHTML = 
+			'<div style="color: green">CRS origin: 0,0</div>' + 
+			'<div style="color: red">px origin: &Delta;' + pixelOrigin.x + ',' + pixelOrigin.y + '</div>' + 
+			'<div style="color: blue">marker px coords:' + markerPixelCoords.x.toFixed(2) + ',' + markerPixelCoords.y.toFixed(2) + '</div>' + 
+			'<div style="color: blue">marker anchor: &Delta;' + markerAnchor[0] + ',' + markerAnchor[1] + '</div>' +
+			'<div style="color: skyblue">marker pane offset: &Delta;' + markerOffset.x + ',' + markerOffset.y + '</div>';
+		
+		markerOffsetLine.setLatLngs([ map.unproject(pixelOrigin), map.unproject(pixelOrigin.add(markerOffset))]);
+		iconOffsetLine.setLatLngs([ map.unproject(pixelOrigin.add(markerOffset)), map.unproject(pixelOrigin.add(markerOffset).subtract(markerAnchor))]);
+	}
+	
+	
+	map.on('load move moveend zoomend viewreset', info)
+	
+	info();
+	
+	
+</script>

data/bower_components/leaflet/docs/examples/extending/tilt.md

@@ -0,0 +1,59 @@
+---
+layout: tutorial_frame
+title: Tilt handler
+---
+<style>
+
+#info {
+	position:absolute; 
+	top:0; 
+	right:0; 
+	width: 20em; 
+	height: 7.5em; 
+	background: rgba(255,255,255,.5); 
+	z-index:500; 
+	font: 12px Sans;
+}
+
+.crsMarker {
+	border-top: 2px green solid;
+	border-left: 2px green solid;
+}
+</style>
+
+<div id='info' style=''></div>
+
+
+<script type='text/javascript'>
+
+	var trd = [63.41, 10.41];
+	
+	L.TiltHandler = L.Handler.extend({
+		addHooks: function() {
+			L.DomEvent.on(window, 'deviceorientation', this._tilt, this);
+		},
+	
+		removeHooks: function() {
+			L.DomEvent.off(window, 'deviceorientation', this._tilt, this);
+		},
+		
+		_tilt: function(ev) {
+			// Treat Gamma angle as horizontal pan (1 degree = 1 pixel) and Beta angle as vertical pan
+			this._map.panBy( L.point( ev.gamma, ev.beta ) );
+			document.getElementById('info').innerHTML = ev.gamma + ',' + ev.beta;
+		}
+	});
+	
+	L.Map.addInitHook('addHandler', 'tilt', L.TiltHandler);
+
+	var map = L.map('map', {
+		center: [0, 0],
+		zoom: 1,
+		tilt: true
+	});
+
+	var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
+		attribution: "CartoDB"
+	}).addTo(map);
+	
+</script>

data/bower_components/leaflet/docs/examples/extending/watermark.md

@@ -0,0 +1,36 @@
+---
+layout: tutorial_frame
+title: Watermark control
+---
+<script type='text/javascript'>
+	var map = L.map('map', {
+		center: [40, 0],
+		zoom: 1
+	});
+
+	var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
+		attribution: "CartoDB"
+	}).addTo(map);
+
+	L.Control.Watermark = L.Control.extend({
+		onAdd: function(map) {
+			var img = L.DomUtil.create('img');
+			
+			img.src = '../../docs/images/logo.png';
+			img.style.width = '200px';
+			
+			return img;
+		},
+		
+		onRemove: function(map) {
+			// Nothing to do here
+		}
+	});
+
+	L.control.watermark = function(opts) {
+		return new L.Control.Watermark(opts);
+	}
+	
+	L.control.watermark({ position: 'bottomleft' }).addTo(map);
+	
+</script>

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

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

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

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

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

@@ -0,0 +1,78 @@
+---
+layout: tutorial_frame
+title: GeoJSON tutorial
+---
+<script src="sample-geojson.js" type="text/javascript"></script>
+
+<script>
+	var map = L.map('map').setView([39.74739, -105], 13);
+
+	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 baseballIcon = L.icon({
+		iconUrl: 'baseball-marker.png',
+		iconSize: [32, 37],
+		iconAnchor: [16, 37],
+		popupAnchor: [0, -28]
+	});
+
+	function onEachFeature(feature, layer) {
+		var popupContent = "<p>I started out as a GeoJSON " +
+				feature.geometry.type + ", but now I'm a Leaflet vector!</p>";
+
+		if (feature.properties && feature.properties.popupContent) {
+			popupContent += feature.properties.popupContent;
+		}
+
+		layer.bindPopup(popupContent);
+	}
+
+	L.geoJSON([bicycleRental, campus], {
+
+		style: function (feature) {
+			return feature.properties && feature.properties.style;
+		},
+
+		onEachFeature: onEachFeature,
+
+		pointToLayer: function (feature, latlng) {
+			return L.circleMarker(latlng, {
+				radius: 8,
+				fillColor: "#ff7800",
+				color: "#000",
+				weight: 1,
+				opacity: 1,
+				fillOpacity: 0.8
+			});
+		}
+	}).addTo(map);
+
+	L.geoJSON(freeBus, {
+
+		filter: function (feature, layer) {
+			if (feature.properties) {
+				// If the property "underConstruction" exists and is true, return false (don't render features under construction)
+				return feature.properties.underConstruction !== undefined ? !feature.properties.underConstruction : true;
+			}
+			return false;
+		},
+
+		onEachFeature: onEachFeature
+	}).addTo(map);
+
+	var coorsLayer = L.geoJSON(coorsField, {
+
+		pointToLayer: function (feature, latlng) {
+			return L.marker(latlng, {icon: baseballIcon});
+		},
+
+		onEachFeature: onEachFeature
+	}).addTo(map);
+
+</script>