rbpdqdat/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Leaflet + UTFGrid

This example demonstrates the general implementation for interactive overlays using:

Leaflet,
an UTFGrid and
a corresponding Leaflet UTFGrid-extension.

In result, it is possible to:


display attribute values on hovering & clicking

But in contrast to a GeoJSON file is this NOT possible:


highlight features on hovering
zoom to features on clicking

The necessary information is taken from an mbtiles file that was:


created & exported using TileMill
uploaded to & provided by  MapBox
contains the UTFGrid as tiled JSON

Helpfull ressources:


Leaflet-UTFGrid template
UTFGrid Specifications
UTFGrid Specifications 1.3
UTFGrid from Polygon datasource
UTFGrid - How it works
UTFGrid - Demo


## index.html
<!DOCTYPE html>
<!--Source: http://danzel.github.io/Leaflet.utfgrid/example/map.html//-->
<html>
<head>
	<script src="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.js"></script>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css" />
	<script src="http://danzel.github.io/Leaflet.utfgrid/src/leaflet.utfgrid.js"></script>
	<link rel="stylesheet" href="styles.css" />
</head>
<body>
	<div id="map"></div>
	<script>
		var map = L.map('map');

		var mapbox = L.tileLayer('http://{s}.tiles.mapbox.com/v3/milkator.press_freedom/{z}/{x}/{y}.png', {attribution: 'Map data &copy; 2013 Natural Earth | Data &copy; 2013 <a href="http://www.reporter-ohne-grenzen.de/ranglisten/rangliste-2013/">ROG/RSF</a>', maxZoom: 5}).addTo(map);

		var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: "Map: <a href='http://www.openstreetmap.org/'>&copy | OpenStreetMap </a>contributers"});
  		var esri = L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer/tile/{z}/{y}/{x}.png', {attribution: "Map: <a href='http://www.arcgis.com/home/item.html?id=c4ec722a1cd34cf0a23904aadf8923a0'>ArcGIS - World Physical Map</a>", maxZoom: 8});
  		var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
			attribution: 'Map data &copy; 2011 OpenStreetMap contributors | Imagery &copy; 2011 CloudMade | Data &copy; 2013 <a href="http://www.reporter-ohne-grenzen.de/ranglisten/rangliste-2013/">ROG/RSF</a>',
			key: 'BC9A493B41014CAABB98F0471D759707',
			styleId: 22677
		});

		var utfGrid = new L.UtfGrid('http://{s}.tiles.mapbox.com/v3/milkator.press_freedom/{z}/{x}/{y}.grid.json?callback={cb}', {
			resolution: 4,
			maxZoom: 5
		});

		utfGrid.on('mouseover', function(e){ info.update(e);}).on('mouseout', function(e){ info.update();})

		var info = L.control();
		info.options.position = 'bottomright';
		info.onAdd = function (map) {
		    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
		    this.update();
		    return this._div;
		};

		info.update = function (props) {
			this._div.innerHTML = "<h4>Press Freedom in the world</h4>" +  (props ?
			"<values><b>" + props.data.name + "</b><br />Ranking position: <rank>" + props.data.rank+"</rank></values>"
			: 'Hover over a state');
		};

		var baseLayers = {
					"Press Freedom - Mapbox" : mapbox,
					"OSM - Mapnik" : osm,
					"OSM - Cloudmade": cloudmade,
					"World Physical - ESRI" : esri
				};

		var layerControl = L.control.layers(baseLayers);

		map.setView([30,0], 2)
			.addLayer(utfGrid)
			.addControl(info)
			.addControl(layerControl);

	</script>
	</body>
</html>

## styles.css
#map {
height: 500px;
width:960px;
cursor: pointer;
}
.info {
    color:#555;
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: rgba(255,255,255,0.6);
    box-shadow: 0 0 15px rgba(0,0,0,0.7);
    border-radius: 10px;
}
.info h4 {
    margin: 0 0 5px;
    color: #000;
}
.info rank {
    color: #f00;
    font-style:italic;
}
body {
  background: #555;
  margin: 1em auto 4em auto;
  width: 960px;
}
	<!DOCTYPE html>
	<!--Source: http://danzel.github.io/Leaflet.utfgrid/example/map.html//-->
	<html>
	<head>
	<script src="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.js"></script>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css" />
	<script src="http://danzel.github.io/Leaflet.utfgrid/src/leaflet.utfgrid.js"></script>
	<link rel="stylesheet" href="styles.css" />
	</head>
	<body>
	<div id="map"></div>
	<script>
	var map = L.map('map');

	var mapbox = L.tileLayer('http://{s}.tiles.mapbox.com/v3/milkator.press_freedom/{z}/{x}/{y}.png', {attribution: 'Map data © 2013 Natural Earth \| Data © 2013 <a href="http://www.reporter-ohne-grenzen.de/ranglisten/rangliste-2013/">ROG/RSF</a>', maxZoom: 5}).addTo(map);

	var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: "Map: <a href='http://www.openstreetmap.org/'>&copy \| OpenStreetMap </a>contributers"});
	var esri = L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer/tile/{z}/{y}/{x}.png', {attribution: "Map: <a href='http://www.arcgis.com/home/item.html?id=c4ec722a1cd34cf0a23904aadf8923a0'>ArcGIS - World Physical Map</a>", maxZoom: 8});
	var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
	attribution: 'Map data © 2011 OpenStreetMap contributors \| Imagery © 2011 CloudMade \| Data © 2013 <a href="http://www.reporter-ohne-grenzen.de/ranglisten/rangliste-2013/">ROG/RSF</a>',
	key: 'BC9A493B41014CAABB98F0471D759707',
	styleId: 22677
	});

	var utfGrid = new L.UtfGrid('http://{s}.tiles.mapbox.com/v3/milkator.press_freedom/{z}/{x}/{y}.grid.json?callback={cb}', {
	resolution: 4,
	maxZoom: 5
	});

	utfGrid.on('mouseover', function(e){ info.update(e);}).on('mouseout', function(e){ info.update();})

	var info = L.control();
	info.options.position = 'bottomright';
	info.onAdd = function (map) {
	this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
	this.update();
	return this._div;
	};

	info.update = function (props) {
	this._div.innerHTML = "<h4>Press Freedom in the world</h4>" + (props ?
	"<values><b>" + props.data.name + "</b><br />Ranking position: <rank>" + props.data.rank+"</rank></values>"
	: 'Hover over a state');
	};

	var baseLayers = {
	"Press Freedom - Mapbox" : mapbox,
	"OSM - Mapnik" : osm,
	"OSM - Cloudmade": cloudmade,
	"World Physical - ESRI" : esri
	};

	var layerControl = L.control.layers(baseLayers);

	map.setView([30,0], 2)
	.addLayer(utfGrid)
	.addControl(info)
	.addControl(layerControl);

	</script>
	</body>
	</html>
	#map {
	height: 500px;
	width:960px;
	cursor: pointer;
	}
	.info {
	color:#555;
	padding: 6px 8px;
	font: 14px/16px Arial, Helvetica, sans-serif;
	background: rgba(255,255,255,0.6);
	box-shadow: 0 0 15px rgba(0,0,0,0.7);
	border-radius: 10px;
	}
	.info h4 {
	margin: 0 0 5px;
	color: #000;
	}
	.info rank {
	color: #f00;
	font-style:italic;
	}
	body {
	background: #555;
	margin: 1em auto 4em auto;
	width: 960px;
	}