sevko/README.md

## README.md

      
    Raw
  

              README.md
            
          
    adding a map to any website

Rendering a web-map without resorting to Google Maps is surprisingly trivial.
The following example uses the incredible open-source
Leaflet library and map tiles provided by
OpenStreetMap. Check it out on rawgit.

  
## index.html
<html>
	<head>
		<title>map</title>
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
		<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
		<style>
			#map {
				position: absolute;
				top: 0;
				bottom: 0;
				width: 100%;
			}

			body {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div id="map"></div>
		<script>
			var map = L.map("map").setView([40.7259, -73.9806], 5);
			var tileUrl = "http://{s}.tile.osm.org/{z}/{x}/{y}.png";
			L.tileLayer(tileUrl).addTo(map);
		</script>
	</body>
</html>
	<html>
	<head>
	<title>map</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<style>
	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	}

	body {
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script>
	var map = L.map("map").setView([40.7259, -73.9806], 5);
	var tileUrl = "http://{s}.tile.osm.org/{z}/{x}/{y}.png";
	L.tileLayer(tileUrl).addTo(map);
	</script>
	</body>
	</html>