milkbread/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Ovleray maps</title>
  <meta charset="utf-8" />
  <script src="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.js"></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <style>
    @import url(http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css);
    .mapContainer{
      display:inline-block;
      position:absolute;
      width:100%;
      height: 500px;
    }
    #opacity_area{
    	width:400px;
    	height:25px;
    	background-color:rgba(0,0,0,0.5);
    	margin:5px;
    	font-size:14pt;
    	text-align: center;

    }
  </style>
</head>
<body>
  <script>
  //initialise an array for the automatic visualisation
  var maps_ = [], numMaps = 2;
  for(var i=0;i<numMaps;i++)maps_.push(i)
  //set the heading
  d3.select('body').append('div')
    .style('text-align','center')
    .style('font-size','24pt')
    .append('text')
      .text('Compare '+ maps_.length +' maps in an overlay!');
  //add a hoverable-area to change the opacity of the top layer
  d3.select('body').append('div').attr('id',"opacity_area").on('mousemove',changeOpacity).append('p').text('Opacity: 0.5 (hover me!)').style('color',"#f00").attr('id','opacity')
  //add a map-Container for each element in the initial array
  d3.select('body').selectAll('.maps').data(maps_).enter().append('div')
    .attr('class','mapContainer')
    .attr('id',function(d){return 'map'+d});
  //make a map for each element in the initial array AND return the corresponding map-Elements
  var maps = maps_.map(showMap);

  //set the inital opacity
  d3.select('#map1').style('opacity',0.5)
  //define a scale for the hover-area
  var scale = d3.scale.linear();
  scale.domain([0,400]).range([0,1])
  //function, that changes the opacity of the map
  function changeOpacity(){
  	var value = (d3.mouse(this)[0]);
  	d3.select(this).style('background-color',"rgba(0,0,0,"+scale(value)+")")
  	d3.select('#opacity').text('Opacity: '+scale(value).toFixed(2))
  	d3.select('#map1').style('opacity',scale(value))
  }

  //function, that adds a leaflet-map to each map-Container
  function showMap(d){
    //initial view
    var map = L.map('map'+d).setView([51, 11], 5);
    var data_attrib = " | Data: <a href='http://www.openstreetmap.org/'>&copy; OpenStreetMap </a>contributers | <a href='http://d3js.org/'>D3.js</a>"
    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" + data_attrib}).addTo(map);
    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>" + data_attrib});
    var stamen1 = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {attribution: "Map: <a href='http://maps.stamen.com/#toner/12/37.7706/-122.3782'>Stamen Design</a>" + data_attrib});
    var stamen2 = L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png', {attribution: "Map: <a href='http://maps.stamen.com/#watercolor/12/37.7706/-122.3782'>Stamen Design</a>" + data_attrib});
    var cycle = L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {attribution: "Map: <a href='http://www.opencyclemap.org/'>Andy Allan</a>" + data_attrib});
    var hike = L.tileLayer('http://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png', {attribution: "Map: <a href='http://hikebikemap.de/'>Hike&BikeMap</a>" + data_attrib});

    //add the favored layers to an JSON-object
    var baseLayers = {"Stamen_Toner": stamen1,"Stamen_Watercolor": stamen2, "OpenStreetMap":osm, "World Physical Map":esri, "OpenCycleMap":cycle, "Hike&BikeMap":hike};
    //add the layer-JSON-object to a layer-control AND add it to the map
    L.control.layers(baseLayers).addTo(map);
    //add the automatic map-view-updating to the corresponding events
    map.on("viewreset", reset);
    map.on("drag", reset);
    return map;
  }
  function reset(e){
    var current = this._container.id.replace('map','');
    maps_.forEach(function(d){
      if(d!=current){
        maps[d].setView(maps[current].getCenter(), maps[current].getZoom())
      }
    });
  }

</script>
 </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Ovleray maps</title>
	<meta charset="utf-8" />
	<script src="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style>
	@import url(http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css);
	.mapContainer{
	display:inline-block;
	position:absolute;
	width:100%;
	height: 500px;
	}
	#opacity_area{
	width:400px;
	height:25px;
	background-color:rgba(0,0,0,0.5);
	margin:5px;
	font-size:14pt;
	text-align: center;

	}
	</style>
	</head>
	<body>
	<script>
	//initialise an array for the automatic visualisation
	var maps_ = [], numMaps = 2;
	for(var i=0;i<numMaps;i++)maps_.push(i)
	//set the heading
	d3.select('body').append('div')
	.style('text-align','center')
	.style('font-size','24pt')
	.append('text')
	.text('Compare '+ maps_.length +' maps in an overlay!');
	//add a hoverable-area to change the opacity of the top layer
	d3.select('body').append('div').attr('id',"opacity_area").on('mousemove',changeOpacity).append('p').text('Opacity: 0.5 (hover me!)').style('color',"#f00").attr('id','opacity')
	//add a map-Container for each element in the initial array
	d3.select('body').selectAll('.maps').data(maps_).enter().append('div')
	.attr('class','mapContainer')
	.attr('id',function(d){return 'map'+d});
	//make a map for each element in the initial array AND return the corresponding map-Elements
	var maps = maps_.map(showMap);

	//set the inital opacity
	d3.select('#map1').style('opacity',0.5)
	//define a scale for the hover-area
	var scale = d3.scale.linear();
	scale.domain([0,400]).range([0,1])
	//function, that changes the opacity of the map
	function changeOpacity(){
	var value = (d3.mouse(this)[0]);
	d3.select(this).style('background-color',"rgba(0,0,0,"+scale(value)+")")
	d3.select('#opacity').text('Opacity: '+scale(value).toFixed(2))
	d3.select('#map1').style('opacity',scale(value))
	}

	//function, that adds a leaflet-map to each map-Container
	function showMap(d){
	//initial view
	var map = L.map('map'+d).setView([51, 11], 5);
	var data_attrib = " \| Data: <a href='http://www.openstreetmap.org/'>© OpenStreetMap </a>contributers \| <a href='http://d3js.org/'>D3.js</a>"
	var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: "Map: <a href='http://www.openstreetmap.org/'>© OpenStreetMap </a>contributers" + data_attrib}).addTo(map);
	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>" + data_attrib});
	var stamen1 = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {attribution: "Map: <a href='http://maps.stamen.com/#toner/12/37.7706/-122.3782'>Stamen Design</a>" + data_attrib});
	var stamen2 = L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png', {attribution: "Map: <a href='http://maps.stamen.com/#watercolor/12/37.7706/-122.3782'>Stamen Design</a>" + data_attrib});
	var cycle = L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {attribution: "Map: <a href='http://www.opencyclemap.org/'>Andy Allan</a>" + data_attrib});
	var hike = L.tileLayer('http://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png', {attribution: "Map: <a href='http://hikebikemap.de/'>Hike&BikeMap</a>" + data_attrib});

	//add the favored layers to an JSON-object
	var baseLayers = {"Stamen_Toner": stamen1,"Stamen_Watercolor": stamen2, "OpenStreetMap":osm, "World Physical Map":esri, "OpenCycleMap":cycle, "Hike&BikeMap":hike};
	//add the layer-JSON-object to a layer-control AND add it to the map
	L.control.layers(baseLayers).addTo(map);
	//add the automatic map-view-updating to the corresponding events
	map.on("viewreset", reset);
	map.on("drag", reset);
	return map;
	}
	function reset(e){
	var current = this._container.id.replace('map','');
	maps_.forEach(function(d){
	if(d!=current){
	maps[d].setView(maps[current].getCenter(), maps[current].getZoom())
	}
	});
	}

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