milkbread/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    This demo shows you how to center a map container horizontal!

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Centered map</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>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <style>
    @import url(http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css);
  </style>
</head>
<body>
  <script>
  //Heading
  d3.select('body').append('div').style('text-align','center').append('text').text('This map is always horizontal centered!').style('font-size','24pt')

  //position the map-container
  var width = 500, height = 350
  d3.select('body').append('div').attr('id','map').style('width',width+'px').style('height',height+'px').style('margin-left',(window.innerWidth-width)/2 + 'px');
      //vertical centering is as easy: .style('margin-top',(window.innerHeight-height)/2 + 'px')

  //Map-Stuff
  var map = L.map('map').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});
  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}).addTo(map);
  var stamen = 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 baseLayers = {"stamen": stamen, "OpenStreetMap":osm, "World Physical Map":esri};
  L.control.layers(baseLayers).addTo(map);

  //Automatic resizing when the window is resized
  $(window).resize(function() {
    location.reload()
  });

</script>
 </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Centered map</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>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<style>
	@import url(http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css);
	</style>
	</head>
	<body>
	<script>
	//Heading
	d3.select('body').append('div').style('text-align','center').append('text').text('This map is always horizontal centered!').style('font-size','24pt')

	//position the map-container
	var width = 500, height = 350
	d3.select('body').append('div').attr('id','map').style('width',width+'px').style('height',height+'px').style('margin-left',(window.innerWidth-width)/2 + 'px');
	//vertical centering is as easy: .style('margin-top',(window.innerHeight-height)/2 + 'px')

	//Map-Stuff
	var map = L.map('map').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});
	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}).addTo(map);
	var stamen = 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 baseLayers = {"stamen": stamen, "OpenStreetMap":osm, "World Physical Map":esri};
	L.control.layers(baseLayers).addTo(map);

	//Automatic resizing when the window is resized
	$(window).resize(function() {
	location.reload()
	});

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