pdbartsch/README.md

## README.md

      
    Raw
  

              README.md
            
          
    I'm working my way into having a template that is easy for me to understand and is easily adaptable for my future projects.
I'm using:

Leaflet
The Omnivore extension to Leaflet
The Leaflet-Providers extension to Leaflet
HTML5 Bones

Will add:

A second column
Hover shows attributes in second column
Integrate with the Turf.js example I've been working on


## baitstations.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              baitstations.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## html5shiv-printshiv.js
/**
* @preserve HTML5 Shiv 3.7.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
*/
!function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=y.elements;return"string"==typeof a?a.split(" "):a}function e(a,b){var c=y.elements;"string"!=typeof c&&(c=c.join(" ")),"string"!=typeof a&&(a=a.join(" ")),y.elements=c+" "+a,j(b)}function f(a){var b=x[a[v]];return b||(b={},w++,a[v]=w,x[w]=b),b}function g(a,c,d){if(c||(c=b),q)return c.createElement(a);d||(d=f(c));var e;return e=d.cache[a]?d.cache[a].cloneNode():u.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!e.canHaveChildren||t.test(a)||e.tagUrn?e:d.frag.appendChild(e)}function h(a,c){if(a||(a=b),q)return a.createDocumentFragment();c=c||f(a);for(var e=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)e.createElement(h[g]);return e}function i(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return y.shivMethods?g(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-:]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(y,b.frag)}function j(a){a||(a=b);var d=f(a);return!y.shivCSS||p||d.hasCSS||(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),q||i(a,d),a}function k(a){for(var b,c=a.getElementsByTagName("*"),e=c.length,f=RegExp("^(?:"+d().join("|")+")$","i"),g=[];e--;)b=c[e],f.test(b.nodeName)&&g.push(b.applyElement(l(b)));return g}function l(a){for(var b,c=a.attributes,d=c.length,e=a.ownerDocument.createElement(A+":"+a.nodeName);d--;)b=c[d],b.specified&&e.setAttribute(b.nodeName,b.nodeValue);return e.style.cssText=a.style.cssText,e}function m(a){for(var b,c=a.split("{"),e=c.length,f=RegExp("(^|[\\s,>+~])("+d().join("|")+")(?=[[\\s,>+~#.:]|$)","gi"),g="$1"+A+"\\:$2";e--;)b=c[e]=c[e].split("}"),b[b.length-1]=b[b.length-1].replace(f,g),c[e]=b.join("}");return c.join("{")}function n(a){for(var b=a.length;b--;)a[b].removeNode()}function o(a){function b(){clearTimeout(g._removeSheetTimer),d&&d.removeNode(!0),d=null}var d,e,g=f(a),h=a.namespaces,i=a.parentWindow;return!B||a.printShived?a:("undefined"==typeof h[A]&&h.add(A),i.attachEvent("onbeforeprint",function(){b();for(var f,g,h,i=a.styleSheets,j=[],l=i.length,n=Array(l);l--;)n[l]=i[l];for(;h=n.pop();)if(!h.disabled&&z.test(h.media)){try{f=h.imports,g=f.length}catch(o){g=0}for(l=0;g>l;l++)n.push(f[l]);try{j.push(h.cssText)}catch(o){}}j=m(j.reverse().join("")),e=k(a),d=c(a,j)}),i.attachEvent("onafterprint",function(){n(e),clearTimeout(g._removeSheetTimer),g._removeSheetTimer=setTimeout(b,500)}),a.printShived=!0,a)}var p,q,r="3.7.2",s=a.html5||{},t=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,u=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,v="_html5shiv",w=0,x={};!function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",p="hidden"in a,q=1==a.childNodes.length||function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}()}catch(c){p=!0,q=!0}}();var y={elements:s.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:r,shivCSS:s.shivCSS!==!1,supportsUnknownElements:q,shivMethods:s.shivMethods!==!1,type:"default",shivDocument:j,createElement:g,createDocumentFragment:h,addElements:e};a.html5=y,j(b);var z=/^$|\b(?:all|print)\b/,A="html5shiv",B=!q&&function(){var c=b.documentElement;return!("undefined"==typeof b.namespaces||"undefined"==typeof b.parentWindow||"undefined"==typeof c.applyElement||"undefined"==typeof c.removeNode||"undefined"==typeof a.attachEvent)}();y.type+=" print",y.shivPrint=o,o(b)}(this,document);

## index.html
<!DOCTYPE html>
<html lang="en"> <!-- Set this to the main language of your site -->
<head>
    <meta charset="utf-8">

    <title>HTML5 Bones :: PAGE TITLE</title>

    <!-- Enter a brief description of your page -->
    <meta name="description" content="">

    <!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Add normalize.css which enables browsers to render all elements more consistently and in line with modern standards as it only targets particular styles that need normalizing -->
    <link href="normalize.css" rel="stylesheet" media="all">
    <!-- For legacy support (IE 6/7, Firefox < 4, and Safari < 5) use normalize-legacy.css instead -->
    <!--<link href="css/normalize-legacy.css" rel="stylesheet" media="all">-->

    <!-- Include the site stylesheet -->
    <link href="styles.css" rel="stylesheet" media="all">

		<!-- Include the Leaflet stylesheet -->
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

    <!-- Include the HTML5 shiv print polyfill for Internet Explorer browsers 8 and below -->
    <!--[if lt IE 9]><script src="js/html5shiv-printshiv.js" media="all"></script><![endif]-->
</head>
<body>

    <!-- The page header typically contains items such as your site heading, logo and possibly the main site navigation -->
    <!-- ARIA: the landmark role "banner" is set as it is the prime heading or internal title of the page -->
    <header role="banner">

        <!--<h1><abbr title="HyperText Markup Language 5">HTML5</abbr> Bones</h1> -->
				<h1>leaflet + omnivore extension + geojson + styling + html5 bones</h1>
				<p><a href="https://github.com/mapbox/leaflet-omnivore">See omnivore </a></p>

        <!-- ARIA: the landmark role "navigation" is added here as the element contains site navigation
        NOTE: The <nav> element does not have to be contained within a <header> element, even though the two examples on this page are. -->
        <nav role="navigation">
            <!-- This can contain your site navigation either in an unordered list or even a paragraph that contains links that allow users to navigate your site -->
        </nav>

    </header>
		<main role="main">
			<div id="map"></div>
			<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
			<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
			<script src="leaflet-providers.js"></script>
			<script>


				var map = L.map('map').setView([34.41326, -119.855], 15);
				L.tileLayer.provider('Stamen.Watercolor').addTo(map);

				///UID & Type
				function onEachFeature(feature, layer) {
						// does this feature have a property named popupContent?
						if (feature.properties && feature.properties.Type) {
								layer.bindPopup(feature.properties.Type);
						}
				}

				function getValue(x) {
					return x === 'Rat' 							? "#EEA9B3" :
								 x === 'Ground Squirrel' 	? "#A9EEE4" :
																						"#000000";
				}

				function style(feature) {
						return {
							radius: 5,
							fillColor: getValue(feature.properties.Type),
							color: "#000",
							weight: 1,
							opacity: 1,
							fillOpacity: 0.8
					};
				}

				var layer = L.geoJson(null, {onEachFeature: onEachFeature, pointToLayer: function (feature, latlng) {return L.circleMarker(latlng, style(feature));}});

				omnivore.geojson('baitstations.json', null, layer).addTo(map);


			</script>
		</main>

    <!-- If you want to use an element as a wrapper, i.e. for styling only, then <div> is still the element to use -->
    <div class="wrap">

        <!-- The <main> element is used to enclose the main content, i.e. that which contains the central topic of a document -->
        <!-- ARIA: the landmark role "main" is added here as it contains the main content of the document, and it is recommended to add it to the
        <main> element until user agents implement the required role mapping. -->
        <main role="main">

            <!-- The <section> element can be used to enclose content that comes under a related heading.
            NOTE: The <section> element can contain <article> elements and vice versa, if you think the content warrants it. -->
            <section>

                <!-- This is the section's header. It contains the heading and navigation links for within the section -->
                <header>
                    <h2>Getting Started</h2>
                    <!-- ARIA: the landmark role "navigation" is added here as the element contains page navigation -->
                    <nav role="navigation">
                        <ul>
                            <li><a href="#introduction">Introduction</a></li>
                            <li><a href="#instructions">Instructions</a></li>
                        </ul>
                    </nav>
                </header>

                <!-- The <article> element can be used to enclose content that still makes sense on its own and is therefore "reusable" -->
                <article id="introduction">

                    <!-- A <header> element is not required here as the heading only contains a single <h3> element -->
                    <h3>Introduction</h3>

                    <!-- Content -->
                    <p>Welcome to <abbr title="HyperText Markup Language 5">HTML5</abbr> Bones. This is a template that contains comments to aid you with setting up your <abbr title="HyperText Markup Language 5">HTML5</abbr> document.</p>

                </article>

                <!-- The <article> element can be used to enclose content that still makes sense on its own and is therefore "reusable" -->
                <article id="instructions">

                    <!-- A <header> element is not required here as the heading only contains a single <h3> element -->
                    <h3>Instructions</h3>

                    <!-- Content -->
                    <ol>
                        <li>Read the comments in this template</li>
                        <li>Decide how you think your content may fit into the template</li>
                        <li>Start building your document</li>
                    </ol>

                </article>

            </section>

        </main>

        <!-- An <aside> is used to enclose content that is additional to the main content but not essential. If it were removed, the meaning of the main content should not be lost, but the content of the <aside> also retains its meaning.
        NOTE: the aside is placed outside of the <main> element as while its content is related to the content that is within the <main>
        element, it is not part of it -->
        <!-- ARIA: the landmark role "complementary" is added here as it contains supporting information for the main content that remains meaningful even when separated from it -->
        <aside role="complementary">

            <!-- A <header> element is not required here as the heading only contains a single <h3> element -->
            <h3>Did you know?</h3>

            <!-- Content -->
            <p>The article and section elements cause a lot of confusion when people are trying to decide how and when to use them. The article: <a href="http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article">section or article?</a> might help you choose.</p>

        </aside>

    </div>

    <!-- The main page footer can contain items such as copyright and contact information. It can also contain a duplicated navigation of your site which is not usually contained within a <nav> -->
    <!-- ARIA: the landmark role "contentinfo" is added here as it contains metadata that applies to the parent document -->
    <footer role="contentinfo">

        <!-- Copyright information can be contained within the <small> element. The <time> element is used here to indicate that the '2015' is a date -->
        <small>Copyright &copy; <time datetime="2015">2015</time></small>

    </footer>

</body>
</html>

## leaflet-providers.js
(function () {
	'use strict';

	L.TileLayer.Provider = L.TileLayer.extend({
		initialize: function (arg, options) {
			var providers = L.TileLayer.Provider.providers;

			var parts = arg.split('.');

			var providerName = parts[0];
			var variantName = parts[1];

			if (!providers[providerName]) {
				throw 'No such provider (' + providerName + ')';
			}

			var provider = {
				url: providers[providerName].url,
				options: providers[providerName].options
			};

			// overwrite values in provider from variant.
			if (variantName && 'variants' in providers[providerName]) {
				if (!(variantName in providers[providerName].variants)) {
					throw 'No such variant of ' + providerName + ' (' + variantName + ')';
				}
				var variant = providers[providerName].variants[variantName];
				var variantOptions;
				if (typeof variant === 'string') {
					variantOptions = {
						variant: variant
					};
				} else {
					variantOptions = variant.options;
				}
				provider = {
					url: variant.url || provider.url,
					options: L.Util.extend({}, provider.options, variantOptions)
				};
			} else if (typeof provider.url === 'function') {
				provider.url = provider.url(parts.splice(1, parts.length - 1).join('.'));
			}

			var forceHTTP = window.location.protocol === 'file:' || provider.options.forceHTTP;
			if (provider.url.indexOf('//') === 0 && forceHTTP) {
				provider.url = 'http:' + provider.url;
			}

			// replace attribution placeholders with their values from toplevel provider attribution,
			// recursively
			var attributionReplacer = function (attr) {
				if (attr.indexOf('{attribution.') === -1) {
					return attr;
				}
				return attr.replace(/\{attribution.(\w*)\}/,
					function (match, attributionName) {
						return attributionReplacer(providers[attributionName].options.attribution);
					}
				);
			};
			provider.options.attribution = attributionReplacer(provider.options.attribution);

			// Compute final options combining provider options with any user overrides
			var layerOpts = L.Util.extend({}, provider.options, options);
			L.TileLayer.prototype.initialize.call(this, provider.url, layerOpts);
		}
	});

	/**
	 * Definition of providers.
	 * see http://leafletjs.com/reference.html#tilelayer for options in the options map.
	 */

	L.TileLayer.Provider.providers = {
		OpenStreetMap: {
			url: '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
			options: {
				attribution:
					'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
			},
			variants: {
				Mapnik: {},
				BlackAndWhite: {
					url: 'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
				},
				DE: {
					url: 'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png'
				},
				HOT: {
					url: 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
					options: {
						attribution: '{attribution.OpenStreetMap}, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
					}
				}
			}
		},
		OpenSeaMap: {
			url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
			options: {
				attribution: 'Map data: &copy; <a href="http://www.openseamap.org">OpenSeaMap</a> contributors'
			}
		},
		OpenTopoMap: {
			url: '//{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
			options: {
				maxZoom: 16,
				attribution: 'Map data: {attribution.OpenStreetMap}, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
			}
		},
		Thunderforest: {
			url: '//{s}.tile.thunderforest.com/{variant}/{z}/{x}/{y}.png',
			options: {
				attribution:
					'&copy; <a href="http://www.opencyclemap.org">OpenCycleMap</a>, {attribution.OpenStreetMap}',
				variant: 'cycle'
			},
			variants: {
				OpenCycleMap: 'cycle',
				Transport: 'transport',
				TransportDark: 'transport-dark',
				Landscape: 'landscape',
				Outdoors: 'outdoors'
			}
		},
		OpenMapSurfer: {
			url: 'http://openmapsurfer.uni-hd.de/tiles/{variant}/x={x}&y={y}&z={z}',
			options: {
				minZoom: 0,
				maxZoom: 20,
				variant: 'roads',
				attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> &mdash; Map data {attribution.OpenStreetMap}'
			},
			variants: {
				Roads: 'roads',
				AdminBounds: {
					options: {
						variant: 'adminb',
						maxZoom: 19
					}
				},
				Grayscale: {
					options: {
						variant: 'roadsg',
						maxZoom: 19
					}
				}
			}
		},
		Hydda: {
			url: 'http://{s}.tile.openstreetmap.se/hydda/{variant}/{z}/{x}/{y}.png',
			options: {
				minZoom: 0,
				maxZoom: 18,
				variant: 'full',
				attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data {attribution.OpenStreetMap}'
			},
			variants: {
				Full: 'full',
				Base: 'base',
				RoadsAndLabels: 'roads_and_labels'
			}
		},
		MapQuestOpen: {
			/* Mapquest does support https, but with a different subdomain:
			 * https://otile{s}-s.mqcdn.com/tiles/1.0.0/{type}/{z}/{x}/{y}.{ext}
			 * which makes implementing protocol relativity impossible.
			 */
			url: 'http://otile{s}.mqcdn.com/tiles/1.0.0/{type}/{z}/{x}/{y}.{ext}',
			options: {
				type: 'map',
				ext: 'jpg',
				attribution:
					'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; ' +
					'Map data {attribution.OpenStreetMap}',
				subdomains: '1234'
			},
			variants: {
				OSM: {},
				Aerial: {
					options: {
						type: 'sat',
						attribution:
							'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; ' +
							'Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency'
					}
				},
				HybridOverlay: {
					options: {
						type: 'hyb',
						ext: 'png',
						opacity: 0.9
					}
				}
			}
		},
		MapBox: {
			url: function (id) {
				return '//{s}.tiles.mapbox.com/v3/' + id + '/{z}/{x}/{y}.png';
			},
			options: {
				attribution:
					'Imagery from <a href="http://mapbox.com/about/maps/">MapBox</a> &mdash; ' +
					'Map data {attribution.OpenStreetMap}',
				subdomains: 'abcd'
			}
		},
		Stamen: {
			url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.{ext}',
			options: {
				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 {attribution.OpenStreetMap}',
				subdomains: 'abcd',
				minZoom: 0,
				maxZoom: 20,
				variant: 'toner',
				ext: 'png'
			},
			variants: {
				Toner: 'toner',
				TonerBackground: 'toner-background',
				TonerHybrid: 'toner-hybrid',
				TonerLines: 'toner-lines',
				TonerLabels: 'toner-labels',
				TonerLite: 'toner-lite',
				Watercolor: {
					options: {
						variant: 'watercolor',
						minZoom: 1,
						maxZoom: 16
					}
				},
				Terrain: {
					options: {
						variant: 'terrain',
						minZoom: 4,
						maxZoom: 18,
						bounds: [[22, -132], [70, -56]]
					}
				},
				TerrainBackground: {
					options: {
						variant: 'terrain-background',
						minZoom: 4,
						maxZoom: 18,
						bounds: [[22, -132], [70, -56]]
					}
				},
				TopOSMRelief: {
					options: {
						variant: 'toposm-color-relief',
						ext: 'jpg',
						bounds: [[22, -132], [51, -56]]
					}
				},
				TopOSMFeatures: {
					options: {
						variant: 'toposm-features',
						bounds: [[22, -132], [51, -56]],
						opacity: 0.9
					}
				}
			}
		},
		Esri: {
			url: '//server.arcgisonline.com/ArcGIS/rest/services/{variant}/MapServer/tile/{z}/{y}/{x}',
			options: {
				variant: 'World_Street_Map',
				attribution: 'Tiles &copy; Esri'
			},
			variants: {
				WorldStreetMap: {
					options: {
						attribution:
							'{attribution.Esri} &mdash; ' +
							'Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
					}
				},
				DeLorme: {
					options: {
						variant: 'Specialty/DeLorme_World_Base_Map',
						minZoom: 1,
						maxZoom: 11,
						attribution: '{attribution.Esri} &mdash; Copyright: &copy;2012 DeLorme'
					}
				},
				WorldTopoMap: {
					options: {
						variant: 'World_Topo_Map',
						attribution:
							'{attribution.Esri} &mdash; ' +
							'Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
					}
				},
				WorldImagery: {
					options: {
						variant: 'World_Imagery',
						attribution:
							'{attribution.Esri} &mdash; ' +
							'Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
					}
				},
				WorldTerrain: {
					options: {
						variant: 'World_Terrain_Base',
						maxZoom: 13,
						attribution:
							'{attribution.Esri} &mdash; ' +
							'Source: USGS, Esri, TANA, DeLorme, and NPS'
					}
				},
				WorldShadedRelief: {
					options: {
						variant: 'World_Shaded_Relief',
						maxZoom: 13,
						attribution: '{attribution.Esri} &mdash; Source: Esri'
					}
				},
				WorldPhysical: {
					options: {
						variant: 'World_Physical_Map',
						maxZoom: 8,
						attribution: '{attribution.Esri} &mdash; Source: US National Park Service'
					}
				},
				OceanBasemap: {
					options: {
						variant: 'Ocean_Basemap',
						maxZoom: 13,
						attribution: '{attribution.Esri} &mdash; Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri'
					}
				},
				NatGeoWorldMap: {
					options: {
						variant: 'NatGeo_World_Map',
						maxZoom: 16,
						attribution: '{attribution.Esri} &mdash; National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC'
					}
				},
				WorldGrayCanvas: {
					options: {
						variant: 'Canvas/World_Light_Gray_Base',
						maxZoom: 16,
						attribution: '{attribution.Esri} &mdash; Esri, DeLorme, NAVTEQ'
					}
				}
			}
		},
		OpenWeatherMap: {
			url: 'http://{s}.tile.openweathermap.org/map/{variant}/{z}/{x}/{y}.png',
			options: {
				attribution: 'Map data &copy; <a href="http://openweathermap.org">OpenWeatherMap</a>',
				opacity: 0.5
			},
			variants: {
				Clouds: 'clouds',
				CloudsClassic: 'clouds_cls',
				Precipitation: 'precipitation',
				PrecipitationClassic: 'precipitation_cls',
				Rain: 'rain',
				RainClassic: 'rain_cls',
				Pressure: 'pressure',
				PressureContour: 'pressure_cntr',
				Wind: 'wind',
				Temperature: 'temp',
				Snow: 'snow'
			}
		},
		HERE: {
			/*
			 * HERE maps, formerly Nokia maps.
			 * These basemaps are free, but you need an API key. Please sign up at
			 * http://developer.here.com/getting-started
			 *
			 * Note that the base urls contain '.cit' whichs is HERE's
			 * 'Customer Integration Testing' environment. Please remove for production
			 * envirionments.
			 */
			url:
				'//{s}.{base}.maps.cit.api.here.com/maptile/2.1/' +
				'maptile/{mapID}/{variant}/{z}/{x}/{y}/256/png8?' +
				'app_id={app_id}&app_code={app_code}',
			options: {
				attribution:
					'Map &copy; 1987-2014 <a href="http://developer.here.com">HERE</a>',
				subdomains: '1234',
				mapID: 'newest',
				'app_id': '<insert your app_id here>',
				'app_code': '<insert your app_code here>',
				base: 'base',
				variant: 'normal.day',
				minZoom: 0,
				maxZoom: 20
			},
			variants: {
				normalDay: 'normal.day',
				normalDayCustom: 'normal.day.custom',
				normalDayGrey: 'normal.day.grey',
				normalDayMobile: 'normal.day.mobile',
				normalDayGreyMobile: 'normal.day.grey.mobile',
				normalDayTransit: 'normal.day.transit',
				normalDayTransitMobile: 'normal.day.transit.mobile',
				normalNight: 'normal.night',
				normalNightMobile: 'normal.night.mobile',
				normalNightGrey: 'normal.night.grey',
				normalNightGreyMobile: 'normal.night.grey.mobile',

				carnavDayGrey: 'carnav.day.grey',
				hybridDay: {
					options: {
						base: 'aerial',
						variant: 'hybrid.day'
					}
				},
				hybridDayMobile: {
					options: {
						base: 'aerial',
						variant: 'hybrid.day.mobile'
					}
				},
				pedestrianDay: 'pedestrian.day',
				pedestrianNight: 'pedestrian.night',
				satelliteDay: {
					options: {
						base: 'aerial',
						variant: 'satellite.day'
					}
				},
				terrainDay: {
					options: {
						base: 'aerial',
						variant: 'terrain.day'
					}
				},
				terrainDayMobile: {
					options: {
						base: 'aerial',
						variant: 'terrain.day.mobile'
					}
				}
			}
		},
		Acetate: {
			url: 'http://a{s}.acetate.geoiq.com/tiles/{variant}/{z}/{x}/{y}.png',
			options: {
				attribution:
					'&copy;2012 Esri & Stamen, Data from OSM and Natural Earth',
				subdomains: '0123',
				minZoom: 2,
				maxZoom: 18,
				variant: 'acetate-base'
			},
			variants: {
				basemap: 'acetate-base',
				terrain: 'terrain',
				all: 'acetate-hillshading',
				foreground: 'acetate-fg',
				roads: 'acetate-roads',
				labels: 'acetate-labels',
				hillshading: 'hillshading'
			}
		},
		FreeMapSK: {
			url: 'http://{s}.freemap.sk/T/{z}/{x}/{y}.jpeg',
			options: {
				minZoom: 8,
				maxZoom: 16,
				subdomains: ['t1', 't2', 't3', 't4'],
				attribution:
					'{attribution.OpenStreetMap}, vizualization CC-By-SA 2.0 <a href="http://freemap.sk">Freemap.sk</a>'
			}
		},
		MtbMap: {
			url: 'http://tile.mtbmap.cz/mtbmap_tiles/{z}/{x}/{y}.png',
			options: {
				attribution:
					'{attribution.OpenStreetMap} &amp; USGS'
			}
		},
		CartoDB: {
			url: 'http://{s}.basemaps.cartocdn.com/{variant}/{z}/{x}/{y}.png',
			options: {
				attribution: '{attribution.OpenStreetMap} &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
				subdomains: 'abcd',
				minZoom: 0,
				maxZoom: 18,
				variant: 'light_all'
			},
			variants: {
				Positron: 'light_all',
				PositronNoLabels: 'light_nolabels',
				DarkMatter: 'dark_all',
				DarkMatterNoLabels: 'dark_nolabels'
			}
		},
		HikeBike: {
			url: 'http://{s}.tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png',
			options: {
				attribution: '{attribution.OpenStreetMap}'
			}
		},
		BasemapAT: {
			url: '//maps{s}.wien.gv.at/basemap/{variant}/normal/google3857/{z}/{y}/{x}.{format}',
			options: {
				attribution: 'Datenquelle: <a href="www.basemap.at">basemap.at</a>',
				subdomains: ['', '1', '2', '3', '4'],
				bounds: [[46.358770, 8.782379], [49.037872, 17.189532]]
			},
			variants: {
				basemap: {
					options: {
						variant: 'geolandbasemap',
						format: 'jpeg'
					}
				},
				highdpi: {
					options: {
						variant: 'bmaphidpi',
						format: 'jpeg'
					}
				},
				grau: {
					options: {
						variant: 'bmapgrau',
						format: 'png'
					}
				},
				overlay: {
					options: {
						variant: 'bmapoverlay',
						format: 'png'
					}
				},
				orthofoto: {
					options: {
						variant: 'bmaporthofoto30cm',
						format: 'jpeg'
					}
				}
			}
		},
		NASAGIBS: {
			url: '//map1.vis.earthdata.nasa.gov/wmts-webmerc/{variant}/default/{time}/{tilematrixset}{maxZoom}/{z}/{y}/{x}.{format}',
			options: {
				attribution:
					'Imagery provided by services from the Global Imagery Browse Services (GIBS), operated by the NASA/GSFC/Earth Science Data and Information System ' +
					'(<a href="https://earthdata.nasa.gov">ESDIS</a>) with funding provided by NASA/HQ.',
				bounds: [[-85.0511287776, -179.999999975], [85.0511287776, 179.999999975]],
				minZoom: 1,
				maxZoom: 9,
				format: 'jpg',
				time: '',
				tilematrixset: 'GoogleMapsCompatible_Level'
			},
			variants: {
				ModisTerraTrueColorCR: 'MODIS_Terra_CorrectedReflectance_TrueColor',
				ModisTerraBands367CR: 'MODIS_Terra_CorrectedReflectance_Bands367',
				ViirsEarthAtNight2012: {
					options: {
						variant: 'VIIRS_CityLights_2012',
						maxZoom: 8
					}
				},
				ModisTerraLSTDay: {
					options: {
						variant: 'MODIS_Terra_Land_Surface_Temp_Day',
						format: 'png',
						maxZoom: 7,
						opacity: 0.75
					}
				},
				ModisTerraSnowCover: {
					options: {
						variant: 'MODIS_Terra_Snow_Cover',
						format: 'png',
						maxZoom: 8,
						opacity: 0.75
					}
				},
				ModisTerraAOD: {
					options: {
						variant: 'MODIS_Terra_Aerosol',
						format: 'png',
						maxZoom: 6,
						opacity: 0.75
					}
				},
				ModisTerraChlorophyll: {
					options: {
						variant: 'MODIS_Terra_Chlorophyll_A',
						format: 'png',
						maxZoom: 7,
						opacity: 0.75
					}
				}
			}
		}
	};

	L.tileLayer.provider = function (provider, options) {
		return new L.TileLayer.Provider(provider, options);
	};
}());

## normalize.css
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

## styles.css
/* ---------------------------------------------------------
   HTML5 Bones
   This stylesheet contains print styling and a section for
   you to simply add your own. This is a basic template
   after all.
   ---------------------------------------------------------*/
    body {

    }
    /* Default link styling */
    a:link { color:#0271fb; }
    a:visited { color:#bd02fb; }
    a:hover, a:focus { color:#000; }
    a:active { color:#fb0e02; }


/* ---------------------------------------------------------
   Author's styles
   ---------------------------------------------------------*/
/*
	 html { height: 100% }
		body { height: 100%; margin: 0; padding: 0;}
		#map { height: 100% }
	*/
			#map {
			width: 900px;
			height: 500px;
		}

	.legend label,
	.legend span {
		display:block;
		float:left;
		height:15px;
		width:20%;
		text-align:center;
		font-size:9px;
		color:#808080;
		}


/* ---------------------------------------------------------
   Print styles
   ---------------------------------------------------------*/
@media print {
    * {
        color:#000 !important;
        box-shadow:none !important;
        text-shadow:none !important;
        background:transparent !important;
    }
    html { background-color:#fff; }
    /* Hide navigation */
    nav { display:none; }

    /* Show link destinations in brackets after the link text */
    a[href]:after { content: " (" attr(href) ") "; }
    a[href] {
        font-weight:bold;
        text-decoration:underline;
        color:#06c;
        border:none;
    }
    /* Don't show link destinations for JavaScript or internal links */
    a[href^="javascript:"]:after, a[href^="#"]:after { content:""; }

    /* Show abbr title value in brackets after the text */
    abbr[title]:after { content: " (" attr(title) ")"; }

    figure {
        margin-bottom:1em;
        overflow:hidden;
    }

    figure img { border:1px solid #000; }
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	/**
	* @preserve HTML5 Shiv 3.7.2 \| @afarkas @jdalton @jon_neal @rem \| MIT/GPL2 Licensed
	*/
	!function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]\|\|a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=y.elements;return"string"==typeof a?a.split(" "):a}function e(a,b){var c=y.elements;"string"!=typeof c&&(c=c.join(" ")),"string"!=typeof a&&(a=a.join(" ")),y.elements=c+" "+a,j(b)}function f(a){var b=x[a[v]];return b\|\|(b={},w++,a[v]=w,x[w]=b),b}function g(a,c,d){if(c\|\|(c=b),q)return c.createElement(a);d\|\|(d=f(c));var e;return e=d.cache[a]?d.cache[a].cloneNode():u.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!e.canHaveChildren\|\|t.test(a)\|\|e.tagUrn?e:d.frag.appendChild(e)}function h(a,c){if(a\|\|(a=b),q)return a.createDocumentFragment();c=c\|\|f(a);for(var e=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)e.createElement(h[g]);return e}function i(a,b){b.cache\|\|(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return y.shivMethods?g(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-:]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(y,b.frag)}function j(a){a\|\|(a=b);var d=f(a);return!y.shivCSS\|\|p\|\|d.hasCSS\|\|(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),q\|\|i(a,d),a}function k(a){for(var b,c=a.getElementsByTagName("*"),e=c.length,f=RegExp("^(?:"+d().join("\|")+")$","i"),g=[];e--;)b=c[e],f.test(b.nodeName)&&g.push(b.applyElement(l(b)));return g}function l(a){for(var b,c=a.attributes,d=c.length,e=a.ownerDocument.createElement(A+":"+a.nodeName);d--;)b=c[d],b.specified&&e.setAttribute(b.nodeName,b.nodeValue);return e.style.cssText=a.style.cssText,e}function m(a){for(var b,c=a.split("{"),e=c.length,f=RegExp("(^\|[\\s,>+~])("+d().join("\|")+")(?=[[\\s,>+~#.:]\|$)","gi"),g="$1"+A+"\\:$2";e--;)b=c[e]=c[e].split("}"),b[b.length-1]=b[b.length-1].replace(f,g),c[e]=b.join("}");return c.join("{")}function n(a){for(var b=a.length;b--;)a[b].removeNode()}function o(a){function b(){clearTimeout(g._removeSheetTimer),d&&d.removeNode(!0),d=null}var d,e,g=f(a),h=a.namespaces,i=a.parentWindow;return!B\|\|a.printShived?a:("undefined"==typeof h[A]&&h.add(A),i.attachEvent("onbeforeprint",function(){b();for(var f,g,h,i=a.styleSheets,j=[],l=i.length,n=Array(l);l--;)n[l]=i[l];for(;h=n.pop();)if(!h.disabled&&z.test(h.media)){try{f=h.imports,g=f.length}catch(o){g=0}for(l=0;g>l;l++)n.push(f[l]);try{j.push(h.cssText)}catch(o){}}j=m(j.reverse().join("")),e=k(a),d=c(a,j)}),i.attachEvent("onafterprint",function(){n(e),clearTimeout(g._removeSheetTimer),g._removeSheetTimer=setTimeout(b,500)}),a.printShived=!0,a)}var p,q,r="3.7.2",s=a.html5\|\|{},t=/^<\|^(?:button\|map\|select\|textarea\|object\|iframe\|option\|optgroup)$/i,u=/^(?:a\|b\|code\|div\|fieldset\|h1\|h2\|h3\|h4\|h5\|h6\|i\|label\|li\|ol\|p\|q\|span\|strong\|style\|table\|tbody\|td\|th\|tr\|ul)$/i,v="_html5shiv",w=0,x={};!function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",p="hidden"in a,q=1==a.childNodes.length\|\|function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode\|\|"undefined"==typeof a.createDocumentFragment\|\|"undefined"==typeof a.createElement}()}catch(c){p=!0,q=!0}}();var y={elements:s.elements\|\|"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:r,shivCSS:s.shivCSS!==!1,supportsUnknownElements:q,shivMethods:s.shivMethods!==!1,type:"default",shivDocument:j,createElement:g,createDocumentFragment:h,addElements:e};a.html5=y,j(b);var z=/^$\|\b(?:all\|print)\b/,A="html5shiv",B=!q&&function(){var c=b.documentElement;return!("undefined"==typeof b.namespaces\|\|"undefined"==typeof b.parentWindow\|\|"undefined"==typeof c.applyElement\|\|"undefined"==typeof c.removeNode\|\|"undefined"==typeof a.attachEvent)}();y.type+=" print",y.shivPrint=o,o(b)}(this,document);
	<!DOCTYPE html>
	<html lang="en"> <!-- Set this to the main language of your site -->
	<head>
	<meta charset="utf-8">

	<title>HTML5 Bones :: PAGE TITLE</title>

	<!-- Enter a brief description of your page -->
	<meta name="description" content="">

	<!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- Add normalize.css which enables browsers to render all elements more consistently and in line with modern standards as it only targets particular styles that need normalizing -->
	<link href="normalize.css" rel="stylesheet" media="all">
	<!-- For legacy support (IE 6/7, Firefox < 4, and Safari < 5) use normalize-legacy.css instead -->
	<!--<link href="css/normalize-legacy.css" rel="stylesheet" media="all">-->

	<!-- Include the site stylesheet -->
	<link href="styles.css" rel="stylesheet" media="all">

	<!-- Include the Leaflet stylesheet -->
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

	<!-- Include the HTML5 shiv print polyfill for Internet Explorer browsers 8 and below -->
	<!--[if lt IE 9]><script src="js/html5shiv-printshiv.js" media="all"></script><![endif]-->
	</head>
	<body>

	<!-- The page header typically contains items such as your site heading, logo and possibly the main site navigation -->
	<!-- ARIA: the landmark role "banner" is set as it is the prime heading or internal title of the page -->
	<header role="banner">

	<!--<h1><abbr title="HyperText Markup Language 5">HTML5</abbr> Bones</h1> -->
	<h1>leaflet + omnivore extension + geojson + styling + html5 bones</h1>
	<p><a href="https://github.com/mapbox/leaflet-omnivore">See omnivore </a></p>

	<!-- ARIA: the landmark role "navigation" is added here as the element contains site navigation
	NOTE: The <nav> element does not have to be contained within a <header> element, even though the two examples on this page are. -->
	<nav role="navigation">
	<!-- This can contain your site navigation either in an unordered list or even a paragraph that contains links that allow users to navigate your site -->
	</nav>

	</header>
	<main role="main">
	<div id="map"></div>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
	<script src="leaflet-providers.js"></script>
	<script>



	var map = L.map('map').setView([34.41326, -119.855], 15);
	L.tileLayer.provider('Stamen.Watercolor').addTo(map);

	///UID & Type
	function onEachFeature(feature, layer) {
	// does this feature have a property named popupContent?
	if (feature.properties && feature.properties.Type) {
	layer.bindPopup(feature.properties.Type);
	}
	}

	function getValue(x) {
	return x === 'Rat' ? "#EEA9B3" :
	x === 'Ground Squirrel' ? "#A9EEE4" :
	"#000000";
	}

	function style(feature) {
	return {
	radius: 5,
	fillColor: getValue(feature.properties.Type),
	color: "#000",
	weight: 1,
	opacity: 1,
	fillOpacity: 0.8
	};
	}

	var layer = L.geoJson(null, {onEachFeature: onEachFeature, pointToLayer: function (feature, latlng) {return L.circleMarker(latlng, style(feature));}});

	omnivore.geojson('baitstations.json', null, layer).addTo(map);


	</script>
	</main>

	<!-- If you want to use an element as a wrapper, i.e. for styling only, then <div> is still the element to use -->
	<div class="wrap">

	<!-- The <main> element is used to enclose the main content, i.e. that which contains the central topic of a document -->
	<!-- ARIA: the landmark role "main" is added here as it contains the main content of the document, and it is recommended to add it to the
	<main> element until user agents implement the required role mapping. -->
	<main role="main">

	<!-- The <section> element can be used to enclose content that comes under a related heading.
	NOTE: The <section> element can contain <article> elements and vice versa, if you think the content warrants it. -->
	<section>

	<!-- This is the section's header. It contains the heading and navigation links for within the section -->
	<header>
	<h2>Getting Started</h2>
	<!-- ARIA: the landmark role "navigation" is added here as the element contains page navigation -->
	<nav role="navigation">
	<ul>
	<li><a href="#introduction">Introduction</a></li>
	<li><a href="#instructions">Instructions</a></li>
	</ul>
	</nav>
	</header>

	<!-- The <article> element can be used to enclose content that still makes sense on its own and is therefore "reusable" -->
	<article id="introduction">

	<!-- A <header> element is not required here as the heading only contains a single <h3> element -->
	<h3>Introduction</h3>

	<!-- Content -->
	<p>Welcome to <abbr title="HyperText Markup Language 5">HTML5</abbr> Bones. This is a template that contains comments to aid you with setting up your <abbr title="HyperText Markup Language 5">HTML5</abbr> document.</p>

	</article>

	<!-- The <article> element can be used to enclose content that still makes sense on its own and is therefore "reusable" -->
	<article id="instructions">

	<!-- A <header> element is not required here as the heading only contains a single <h3> element -->
	<h3>Instructions</h3>

	<!-- Content -->
	<ol>
	<li>Read the comments in this template</li>
	<li>Decide how you think your content may fit into the template</li>
	<li>Start building your document</li>
	</ol>

	</article>

	</section>

	</main>

	<!-- An <aside> is used to enclose content that is additional to the main content but not essential. If it were removed, the meaning of the main content should not be lost, but the content of the <aside> also retains its meaning.
	NOTE: the aside is placed outside of the <main> element as while its content is related to the content that is within the <main>
	element, it is not part of it -->
	<!-- ARIA: the landmark role "complementary" is added here as it contains supporting information for the main content that remains meaningful even when separated from it -->
	<aside role="complementary">

	<!-- A <header> element is not required here as the heading only contains a single <h3> element -->
	<h3>Did you know?</h3>

	<!-- Content -->
	<p>The article and section elements cause a lot of confusion when people are trying to decide how and when to use them. The article: <a href="http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article">section or article?</a> might help you choose.</p>

	</aside>

	</div>

	<!-- The main page footer can contain items such as copyright and contact information. It can also contain a duplicated navigation of your site which is not usually contained within a <nav> -->
	<!-- ARIA: the landmark role "contentinfo" is added here as it contains metadata that applies to the parent document -->
	<footer role="contentinfo">

	<!-- Copyright information can be contained within the <small> element. The <time> element is used here to indicate that the '2015' is a date -->
	<small>Copyright © <time datetime="2015">2015</time></small>

	</footer>

	</body>
	</html>
	(function () {
	'use strict';

	L.TileLayer.Provider = L.TileLayer.extend({
	initialize: function (arg, options) {
	var providers = L.TileLayer.Provider.providers;

	var parts = arg.split('.');

	var providerName = parts[0];
	var variantName = parts[1];

	if (!providers[providerName]) {
	throw 'No such provider (' + providerName + ')';
	}

	var provider = {
	url: providers[providerName].url,
	options: providers[providerName].options
	};

	// overwrite values in provider from variant.
	if (variantName && 'variants' in providers[providerName]) {
	if (!(variantName in providers[providerName].variants)) {
	throw 'No such variant of ' + providerName + ' (' + variantName + ')';
	}
	var variant = providers[providerName].variants[variantName];
	var variantOptions;
	if (typeof variant === 'string') {
	variantOptions = {
	variant: variant
	};
	} else {
	variantOptions = variant.options;
	}
	provider = {
	url: variant.url \|\| provider.url,
	options: L.Util.extend({}, provider.options, variantOptions)
	};
	} else if (typeof provider.url === 'function') {
	provider.url = provider.url(parts.splice(1, parts.length - 1).join('.'));
	}

	var forceHTTP = window.location.protocol === 'file:' \|\| provider.options.forceHTTP;
	if (provider.url.indexOf('//') === 0 && forceHTTP) {
	provider.url = 'http:' + provider.url;
	}

	// replace attribution placeholders with their values from toplevel provider attribution,
	// recursively
	var attributionReplacer = function (attr) {
	if (attr.indexOf('{attribution.') === -1) {
	return attr;
	}
	return attr.replace(/\{attribution.(\w*)\}/,
	function (match, attributionName) {
	return attributionReplacer(providers[attributionName].options.attribution);
	}
	);
	};
	provider.options.attribution = attributionReplacer(provider.options.attribution);

	// Compute final options combining provider options with any user overrides
	var layerOpts = L.Util.extend({}, provider.options, options);
	L.TileLayer.prototype.initialize.call(this, provider.url, layerOpts);
	}
	});

	/**
	* Definition of providers.
	* see http://leafletjs.com/reference.html#tilelayer for options in the options map.
	*/

	L.TileLayer.Provider.providers = {
	OpenStreetMap: {
	url: '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
	options: {
	attribution:
	'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	},
	variants: {
	Mapnik: {},
	BlackAndWhite: {
	url: 'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
	},
	DE: {
	url: 'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png'
	},
	HOT: {
	url: 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
	options: {
	attribution: '{attribution.OpenStreetMap}, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
	}
	}
	}
	},
	OpenSeaMap: {
	url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
	options: {
	attribution: 'Map data: © <a href="http://www.openseamap.org">OpenSeaMap</a> contributors'
	}
	},
	OpenTopoMap: {
	url: '//{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
	options: {
	maxZoom: 16,
	attribution: 'Map data: {attribution.OpenStreetMap}, <a href="http://viewfinderpanoramas.org">SRTM</a> \| Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
	}
	},
	Thunderforest: {
	url: '//{s}.tile.thunderforest.com/{variant}/{z}/{x}/{y}.png',
	options: {
	attribution:
	'© <a href="http://www.opencyclemap.org">OpenCycleMap</a>, {attribution.OpenStreetMap}',
	variant: 'cycle'
	},
	variants: {
	OpenCycleMap: 'cycle',
	Transport: 'transport',
	TransportDark: 'transport-dark',
	Landscape: 'landscape',
	Outdoors: 'outdoors'
	}
	},
	OpenMapSurfer: {
	url: 'http://openmapsurfer.uni-hd.de/tiles/{variant}/x={x}&y={y}&z={z}',
	options: {
	minZoom: 0,
	maxZoom: 20,
	variant: 'roads',
	attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> — Map data {attribution.OpenStreetMap}'
	},
	variants: {
	Roads: 'roads',
	AdminBounds: {
	options: {
	variant: 'adminb',
	maxZoom: 19
	}
	},
	Grayscale: {
	options: {
	variant: 'roadsg',
	maxZoom: 19
	}
	}
	}
	},
	Hydda: {
	url: 'http://{s}.tile.openstreetmap.se/hydda/{variant}/{z}/{x}/{y}.png',
	options: {
	minZoom: 0,
	maxZoom: 18,
	variant: 'full',
	attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> — Map data {attribution.OpenStreetMap}'
	},
	variants: {
	Full: 'full',
	Base: 'base',
	RoadsAndLabels: 'roads_and_labels'
	}
	},
	MapQuestOpen: {
	/* Mapquest does support https, but with a different subdomain:
	* https://otile{s}-s.mqcdn.com/tiles/1.0.0/{type}/{z}/{x}/{y}.{ext}
	* which makes implementing protocol relativity impossible.
	*/
	url: 'http://otile{s}.mqcdn.com/tiles/1.0.0/{type}/{z}/{x}/{y}.{ext}',
	options: {
	type: 'map',
	ext: 'jpg',
	attribution:
	'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> — ' +
	'Map data {attribution.OpenStreetMap}',
	subdomains: '1234'
	},
	variants: {
	OSM: {},
	Aerial: {
	options: {
	type: 'sat',
	attribution:
	'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> — ' +
	'Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency'
	}
	},
	HybridOverlay: {
	options: {
	type: 'hyb',
	ext: 'png',
	opacity: 0.9
	}
	}
	}
	},
	MapBox: {
	url: function (id) {
	return '//{s}.tiles.mapbox.com/v3/' + id + '/{z}/{x}/{y}.png';
	},
	options: {
	attribution:
	'Imagery from <a href="http://mapbox.com/about/maps/">MapBox</a> — ' +
	'Map data {attribution.OpenStreetMap}',
	subdomains: 'abcd'
	}
	},
	Stamen: {
	url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.{ext}',
	options: {
	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> — ' +
	'Map data {attribution.OpenStreetMap}',
	subdomains: 'abcd',
	minZoom: 0,
	maxZoom: 20,
	variant: 'toner',
	ext: 'png'
	},
	variants: {
	Toner: 'toner',
	TonerBackground: 'toner-background',
	TonerHybrid: 'toner-hybrid',
	TonerLines: 'toner-lines',
	TonerLabels: 'toner-labels',
	TonerLite: 'toner-lite',
	Watercolor: {
	options: {
	variant: 'watercolor',
	minZoom: 1,
	maxZoom: 16
	}
	},
	Terrain: {
	options: {
	variant: 'terrain',
	minZoom: 4,
	maxZoom: 18,
	bounds: [[22, -132], [70, -56]]
	}
	},
	TerrainBackground: {
	options: {
	variant: 'terrain-background',
	minZoom: 4,
	maxZoom: 18,
	bounds: [[22, -132], [70, -56]]
	}
	},
	TopOSMRelief: {
	options: {
	variant: 'toposm-color-relief',
	ext: 'jpg',
	bounds: [[22, -132], [51, -56]]
	}
	},
	TopOSMFeatures: {
	options: {
	variant: 'toposm-features',
	bounds: [[22, -132], [51, -56]],
	opacity: 0.9
	}
	}
	}
	},
	Esri: {
	url: '//server.arcgisonline.com/ArcGIS/rest/services/{variant}/MapServer/tile/{z}/{y}/{x}',
	options: {
	variant: 'World_Street_Map',
	attribution: 'Tiles © Esri'
	},
	variants: {
	WorldStreetMap: {
	options: {
	attribution:
	'{attribution.Esri} — ' +
	'Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
	}
	},
	DeLorme: {
	options: {
	variant: 'Specialty/DeLorme_World_Base_Map',
	minZoom: 1,
	maxZoom: 11,
	attribution: '{attribution.Esri} — Copyright: ©2012 DeLorme'
	}
	},
	WorldTopoMap: {
	options: {
	variant: 'World_Topo_Map',
	attribution:
	'{attribution.Esri} — ' +
	'Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
	}
	},
	WorldImagery: {
	options: {
	variant: 'World_Imagery',
	attribution:
	'{attribution.Esri} — ' +
	'Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
	}
	},
	WorldTerrain: {
	options: {
	variant: 'World_Terrain_Base',
	maxZoom: 13,
	attribution:
	'{attribution.Esri} — ' +
	'Source: USGS, Esri, TANA, DeLorme, and NPS'
	}
	},
	WorldShadedRelief: {
	options: {
	variant: 'World_Shaded_Relief',
	maxZoom: 13,
	attribution: '{attribution.Esri} — Source: Esri'
	}
	},
	WorldPhysical: {
	options: {
	variant: 'World_Physical_Map',
	maxZoom: 8,
	attribution: '{attribution.Esri} — Source: US National Park Service'
	}
	},
	OceanBasemap: {
	options: {
	variant: 'Ocean_Basemap',
	maxZoom: 13,
	attribution: '{attribution.Esri} — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri'
	}
	},
	NatGeoWorldMap: {
	options: {
	variant: 'NatGeo_World_Map',
	maxZoom: 16,
	attribution: '{attribution.Esri} — National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC'
	}
	},
	WorldGrayCanvas: {
	options: {
	variant: 'Canvas/World_Light_Gray_Base',
	maxZoom: 16,
	attribution: '{attribution.Esri} — Esri, DeLorme, NAVTEQ'
	}
	}
	}
	},
	OpenWeatherMap: {
	url: 'http://{s}.tile.openweathermap.org/map/{variant}/{z}/{x}/{y}.png',
	options: {
	attribution: 'Map data © <a href="http://openweathermap.org">OpenWeatherMap</a>',
	opacity: 0.5
	},
	variants: {
	Clouds: 'clouds',
	CloudsClassic: 'clouds_cls',
	Precipitation: 'precipitation',
	PrecipitationClassic: 'precipitation_cls',
	Rain: 'rain',
	RainClassic: 'rain_cls',
	Pressure: 'pressure',
	PressureContour: 'pressure_cntr',
	Wind: 'wind',
	Temperature: 'temp',
	Snow: 'snow'
	}
	},
	HERE: {
	/*
	* HERE maps, formerly Nokia maps.
	* These basemaps are free, but you need an API key. Please sign up at
	* http://developer.here.com/getting-started
	*
	* Note that the base urls contain '.cit' whichs is HERE's
	* 'Customer Integration Testing' environment. Please remove for production
	* envirionments.
	*/
	url:
	'//{s}.{base}.maps.cit.api.here.com/maptile/2.1/' +
	'maptile/{mapID}/{variant}/{z}/{x}/{y}/256/png8?' +
	'app_id={app_id}&app_code={app_code}',
	options: {
	attribution:
	'Map © 1987-2014 <a href="http://developer.here.com">HERE</a>',
	subdomains: '1234',
	mapID: 'newest',
	'app_id': '<insert your app_id here>',
	'app_code': '<insert your app_code here>',
	base: 'base',
	variant: 'normal.day',
	minZoom: 0,
	maxZoom: 20
	},
	variants: {
	normalDay: 'normal.day',
	normalDayCustom: 'normal.day.custom',
	normalDayGrey: 'normal.day.grey',
	normalDayMobile: 'normal.day.mobile',
	normalDayGreyMobile: 'normal.day.grey.mobile',
	normalDayTransit: 'normal.day.transit',
	normalDayTransitMobile: 'normal.day.transit.mobile',
	normalNight: 'normal.night',
	normalNightMobile: 'normal.night.mobile',
	normalNightGrey: 'normal.night.grey',
	normalNightGreyMobile: 'normal.night.grey.mobile',

	carnavDayGrey: 'carnav.day.grey',
	hybridDay: {
	options: {
	base: 'aerial',
	variant: 'hybrid.day'
	}
	},
	hybridDayMobile: {
	options: {
	base: 'aerial',
	variant: 'hybrid.day.mobile'
	}
	},
	pedestrianDay: 'pedestrian.day',
	pedestrianNight: 'pedestrian.night',
	satelliteDay: {
	options: {
	base: 'aerial',
	variant: 'satellite.day'
	}
	},
	terrainDay: {
	options: {
	base: 'aerial',
	variant: 'terrain.day'
	}
	},
	terrainDayMobile: {
	options: {
	base: 'aerial',
	variant: 'terrain.day.mobile'
	}
	}
	}
	},
	Acetate: {
	url: 'http://a{s}.acetate.geoiq.com/tiles/{variant}/{z}/{x}/{y}.png',
	options: {
	attribution:
	'©2012 Esri & Stamen, Data from OSM and Natural Earth',
	subdomains: '0123',
	minZoom: 2,
	maxZoom: 18,
	variant: 'acetate-base'
	},
	variants: {
	basemap: 'acetate-base',
	terrain: 'terrain',
	all: 'acetate-hillshading',
	foreground: 'acetate-fg',
	roads: 'acetate-roads',
	labels: 'acetate-labels',
	hillshading: 'hillshading'
	}
	},
	FreeMapSK: {
	url: 'http://{s}.freemap.sk/T/{z}/{x}/{y}.jpeg',
	options: {
	minZoom: 8,
	maxZoom: 16,
	subdomains: ['t1', 't2', 't3', 't4'],
	attribution:
	'{attribution.OpenStreetMap}, vizualization CC-By-SA 2.0 <a href="http://freemap.sk">Freemap.sk</a>'
	}
	},
	MtbMap: {
	url: 'http://tile.mtbmap.cz/mtbmap_tiles/{z}/{x}/{y}.png',
	options: {
	attribution:
	'{attribution.OpenStreetMap} & USGS'
	}
	},
	CartoDB: {
	url: 'http://{s}.basemaps.cartocdn.com/{variant}/{z}/{x}/{y}.png',
	options: {
	attribution: '{attribution.OpenStreetMap} © <a href="http://cartodb.com/attributions">CartoDB</a>',
	subdomains: 'abcd',
	minZoom: 0,
	maxZoom: 18,
	variant: 'light_all'
	},
	variants: {
	Positron: 'light_all',
	PositronNoLabels: 'light_nolabels',
	DarkMatter: 'dark_all',
	DarkMatterNoLabels: 'dark_nolabels'
	}
	},
	HikeBike: {
	url: 'http://{s}.tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png',
	options: {
	attribution: '{attribution.OpenStreetMap}'
	}
	},
	BasemapAT: {
	url: '//maps{s}.wien.gv.at/basemap/{variant}/normal/google3857/{z}/{y}/{x}.{format}',
	options: {
	attribution: 'Datenquelle: <a href="www.basemap.at">basemap.at</a>',
	subdomains: ['', '1', '2', '3', '4'],
	bounds: [[46.358770, 8.782379], [49.037872, 17.189532]]
	},
	variants: {
	basemap: {
	options: {
	variant: 'geolandbasemap',
	format: 'jpeg'
	}
	},
	highdpi: {
	options: {
	variant: 'bmaphidpi',
	format: 'jpeg'
	}
	},
	grau: {
	options: {
	variant: 'bmapgrau',
	format: 'png'
	}
	},
	overlay: {
	options: {
	variant: 'bmapoverlay',
	format: 'png'
	}
	},
	orthofoto: {
	options: {
	variant: 'bmaporthofoto30cm',
	format: 'jpeg'
	}
	}
	}
	},
	NASAGIBS: {
	url: '//map1.vis.earthdata.nasa.gov/wmts-webmerc/{variant}/default/{time}/{tilematrixset}{maxZoom}/{z}/{y}/{x}.{format}',
	options: {
	attribution:
	'Imagery provided by services from the Global Imagery Browse Services (GIBS), operated by the NASA/GSFC/Earth Science Data and Information System ' +
	'(<a href="https://earthdata.nasa.gov">ESDIS</a>) with funding provided by NASA/HQ.',
	bounds: [[-85.0511287776, -179.999999975], [85.0511287776, 179.999999975]],
	minZoom: 1,
	maxZoom: 9,
	format: 'jpg',
	time: '',
	tilematrixset: 'GoogleMapsCompatible_Level'
	},
	variants: {
	ModisTerraTrueColorCR: 'MODIS_Terra_CorrectedReflectance_TrueColor',
	ModisTerraBands367CR: 'MODIS_Terra_CorrectedReflectance_Bands367',
	ViirsEarthAtNight2012: {
	options: {
	variant: 'VIIRS_CityLights_2012',
	maxZoom: 8
	}
	},
	ModisTerraLSTDay: {
	options: {
	variant: 'MODIS_Terra_Land_Surface_Temp_Day',
	format: 'png',
	maxZoom: 7,
	opacity: 0.75
	}
	},
	ModisTerraSnowCover: {
	options: {
	variant: 'MODIS_Terra_Snow_Cover',
	format: 'png',
	maxZoom: 8,
	opacity: 0.75
	}
	},
	ModisTerraAOD: {
	options: {
	variant: 'MODIS_Terra_Aerosol',
	format: 'png',
	maxZoom: 6,
	opacity: 0.75
	}
	},
	ModisTerraChlorophyll: {
	options: {
	variant: 'MODIS_Terra_Chlorophyll_A',
	format: 'png',
	maxZoom: 7,
	opacity: 0.75
	}
	}
	}
	}
	};

	L.tileLayer.provider = function (provider, options) {
	return new L.TileLayer.Provider(provider, options);
	};
	}());
	/! normalize.css v3.0.2 \| MIT License \| git.io/normalize /

	/**
	* 1. Set default font family to sans-serif.
	* 2. Prevent iOS text size adjust after orientation change, without disabling
	* user zoom.
	*/

	html {
	font-family: sans-serif; /* 1 */
	-ms-text-size-adjust: 100%; /* 2 */
	-webkit-text-size-adjust: 100%; /* 2 */
	}

	/**
	* Remove default margin.
	*/

	body {
	margin: 0;
	}

	/* HTML5 display definitions
	========================================================================== */

	/**
	* Correct `block` display not defined for any HTML5 element in IE 8/9.
	* Correct `block` display not defined for `details` or `summary` in IE 10/11
	* and Firefox.
	* Correct `block` display not defined for `main` in IE 11.
	*/

	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	main,
	menu,
	nav,
	section,
	summary {
	display: block;
	}

	/**
	* 1. Correct `inline-block` display not defined in IE 8/9.
	* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
	*/

	audio,
	canvas,
	progress,
	video {
	display: inline-block; /* 1 */
	vertical-align: baseline; /* 2 */
	}

	/**
	* Prevent modern browsers from displaying `audio` without controls.
	* Remove excess height in iOS 5 devices.
	*/

	audio:not([controls]) {
	display: none;
	height: 0;
	}

	/**
	* Address `[hidden]` styling not present in IE 8/9/10.
	* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
	*/

	[hidden],
	template {
	display: none;
	}

	/* Links
	========================================================================== */

	/**
	* Remove the gray background color from active links in IE 10.
	*/

	a {
	background-color: transparent;
	}

	/**
	* Improve readability when focused and also mouse hovered in all browsers.
	*/

	a:active,
	a:hover {
	outline: 0;
	}

	/* Text-level semantics
	========================================================================== */

	/**
	* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
	*/

	abbr[title] {
	border-bottom: 1px dotted;
	}

	/**
	* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
	*/

	b,
	strong {
	font-weight: bold;
	}

	/**
	* Address styling not present in Safari and Chrome.
	*/

	dfn {
	font-style: italic;
	}

	/**
	* Address variable `h1` font-size and margin within `section` and `article`
	* contexts in Firefox 4+, Safari, and Chrome.
	*/

	h1 {
	font-size: 2em;
	margin: 0.67em 0;
	}

	/**
	* Address styling not present in IE 8/9.
	*/

	mark {
	background: #ff0;
	color: #000;
	}

	/**
	* Address inconsistent and variable font size in all browsers.
	*/

	small {
	font-size: 80%;
	}

	/**
	* Prevent `sub` and `sup` affecting `line-height` in all browsers.
	*/

	sub,
	sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	}

	sup {
	top: -0.5em;
	}

	sub {
	bottom: -0.25em;
	}

	/* Embedded content
	========================================================================== */

	/**
	* Remove border when inside `a` element in IE 8/9/10.
	*/

	img {
	border: 0;
	}

	/**
	* Correct overflow not hidden in IE 9/10/11.
	*/

	svg:not(:root) {
	overflow: hidden;
	}

	/* Grouping content
	========================================================================== */

	/**
	* Address margin not present in IE 8/9 and Safari.
	*/

	figure {
	margin: 1em 40px;
	}

	/**
	* Address differences between Firefox and other browsers.
	*/

	hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
	}

	/**
	* Contain overflow in all browsers.
	*/

	pre {
	overflow: auto;
	}

	/**
	* Address odd `em`-unit font size rendering in all browsers.
	*/

	code,
	kbd,
	pre,
	samp {
	font-family: monospace, monospace;
	font-size: 1em;
	}

	/* Forms
	========================================================================== */

	/**
	* Known limitation: by default, Chrome and Safari on OS X allow very limited
	* styling of `select`, unless a `border` property is set.
	*/

	/**
	* 1. Correct color not being inherited.
	* Known issue: affects color of disabled elements.
	* 2. Correct font properties not being inherited.
	* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
	*/

	button,
	input,
	optgroup,
	select,
	textarea {
	color: inherit; /* 1 */
	font: inherit; /* 2 */
	margin: 0; /* 3 */
	}

	/**
	* Address `overflow` set to `hidden` in IE 8/9/10/11.
	*/

	button {
	overflow: visible;
	}

	/**
	* Address inconsistent `text-transform` inheritance for `button` and `select`.
	* All other form control elements do not inherit `text-transform` values.
	* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
	* Correct `select` style inheritance in Firefox.
	*/

	button,
	select {
	text-transform: none;
	}

	/**
	* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
	* and `video` controls.
	* 2. Correct inability to style clickable `input` types in iOS.
	* 3. Improve usability and consistency of cursor style between image-type
	* `input` and others.
	*/

	button,
	html input[type="button"], /* 1 */
	input[type="reset"],
	input[type="submit"] {
	-webkit-appearance: button; /* 2 */
	cursor: pointer; /* 3 */
	}

	/**
	* Re-set default cursor for disabled elements.
	*/

	button[disabled],
	html input[disabled] {
	cursor: default;
	}

	/**
	* Remove inner padding and border in Firefox 4+.
	*/

	button::-moz-focus-inner,
	input::-moz-focus-inner {
	border: 0;
	padding: 0;
	}

	/**
	* Address Firefox 4+ setting `line-height` on `input` using `!important` in
	* the UA stylesheet.
	*/

	input {
	line-height: normal;
	}

	/**
	* It's recommended that you don't attempt to style these elements.
	* Firefox's implementation doesn't respect box-sizing, padding, or width.
	*
	* 1. Address box sizing set to `content-box` in IE 8/9/10.
	* 2. Remove excess padding in IE 8/9/10.
	*/

	input[type="checkbox"],
	input[type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
	}

	/**
	* Fix the cursor style for Chrome's increment/decrement buttons. For certain
	* `font-size` values of the `input`, it causes the cursor style of the
	* decrement button to change from `default` to `text`.
	*/

	input[type="number"]::-webkit-inner-spin-button,
	input[type="number"]::-webkit-outer-spin-button {
	height: auto;
	}

	/**
	* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
	* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
	* (include `-moz` to future-proof).
	*/

	input[type="search"] {
	-webkit-appearance: textfield; /* 1 */
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box; /* 2 */
	box-sizing: content-box;
	}

	/**
	* Remove inner padding and search cancel button in Safari and Chrome on OS X.
	* Safari (but not Chrome) clips the cancel button when the search input has
	* padding (and `textfield` appearance).
	*/

	input[type="search"]::-webkit-search-cancel-button,
	input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
	}

	/**
	* Define consistent border, margin, and padding.
	*/

	fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
	}

	/**
	* 1. Correct `color` not being inherited in IE 8/9/10/11.
	* 2. Remove padding so people aren't caught out if they zero out fieldsets.
	*/

	legend {
	border: 0; /* 1 */
	padding: 0; /* 2 */
	}

	/**
	* Remove default vertical scrollbar in IE 8/9/10/11.
	*/

	textarea {
	overflow: auto;
	}

	/**
	* Don't inherit the `font-weight` (applied by a rule above).
	* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
	*/

	optgroup {
	font-weight: bold;
	}

	/* Tables
	========================================================================== */

	/**
	* Remove most spacing between table cells.
	*/

	table {
	border-collapse: collapse;
	border-spacing: 0;
	}

	td,
	th {
	padding: 0;
	}
	/* ---------------------------------------------------------
	HTML5 Bones
	This stylesheet contains print styling and a section for
	you to simply add your own. This is a basic template
	after all.
	---------------------------------------------------------*/
	body {

	}
	/* Default link styling */
	a:link { color:#0271fb; }
	a:visited { color:#bd02fb; }
	a:hover, a:focus { color:#000; }
	a:active { color:#fb0e02; }



	/* ---------------------------------------------------------
	Author's styles
	---------------------------------------------------------*/
	/*
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0;}
	#map { height: 100% }
	*/
	#map {
	width: 900px;
	height: 500px;
	}

	.legend label,
	.legend span {
	display:block;
	float:left;
	height:15px;
	width:20%;
	text-align:center;
	font-size:9px;
	color:#808080;
	}





	/* ---------------------------------------------------------
	Print styles
	---------------------------------------------------------*/
	@media print {
	* {
	color:#000 !important;
	box-shadow:none !important;
	text-shadow:none !important;
	background:transparent !important;
	}
	html { background-color:#fff; }
	/* Hide navigation */
	nav { display:none; }

	/* Show link destinations in brackets after the link text */
	a[href]:after { content: " (" attr(href) ") "; }
	a[href] {
	font-weight:bold;
	text-decoration:underline;
	color:#06c;
	border:none;
	}
	/* Don't show link destinations for JavaScript or internal links */
	a[href^="javascript:"]:after, a[href^="#"]:after { content:""; }

	/* Show abbr title value in brackets after the text */
	abbr[title]:after { content: " (" attr(title) ")"; }

	figure {
	margin-bottom:1em;
	overflow:hidden;
	}

	figure img { border:1px solid #000; }
	}