miguelpeixe/.block

## .block
border: "no"
scrolling: "yes"

## index.html
<!doctype html>
<html lang="pt-br">
<head>
  <meta charset="utf8">
  <title>Tile Basemaps</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
  <style>
    html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
    #content { max-width: 900px; margin: 0 auto; }
    .map { width: 100%; height: 400px; }
  </style>
</head>
<body>
  <div id="content">
    <h2>Basemaps disponíveis</h2>
    <h3>Open Street Map</h3>
    <div id="map_1" class="map"></div>
    <h3>Satellite</h3>
    <div id="map_2" class="map"></div>
    <h3>InfoAmazonia (forest height and rivers)</h3>
    <div id="map_3" class="map"></div>
  </div>
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
  <script type="text/javascript" src="main.js"></script>
</body>
</html>

## main.js
var conf = {
  center: [-7.449624260197816,-59.94140624999999],
  zoom: 4,
  scrollWheelZoom: false
};

var map_1 = L.map('map_1', conf);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map_1);

var map_2 = L.map('map_2', conf);
L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png').addTo(map_2);

var map_3 = L.map('map_3', conf);
L.tileLayer('http://{s}.tiles.mapbox.com/v3/infoamazonia.AndesAguaAmazonia_relevo_12AmzRaisg,infoamazonia.AndesAguaAmazonia_relevo_11AmzRaisg,infoamazonia.AndesAguaAmazonia_relevo1-10,infoamazonia.naturalEarth_baltimetria,infoamazonia.rivers,infoamazonia.AAA_pois,infoamazonia.osm-brasil/{z}/{x}/{y}.png').addTo(map_3);
	<!doctype html>
	<html lang="pt-br">
	<head>
	<meta charset="utf8">
	<title>Tile Basemaps</title>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
	<style>
	html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
	#content { max-width: 900px; margin: 0 auto; }
	.map { width: 100%; height: 400px; }
	</style>
	</head>
	<body>
	<div id="content">
	<h2>Basemaps disponíveis</h2>
	<h3>Open Street Map</h3>
	<div id="map_1" class="map"></div>
	<h3>Satellite</h3>
	<div id="map_2" class="map"></div>
	<h3>InfoAmazonia (forest height and rivers)</h3>
	<div id="map_3" class="map"></div>
	</div>
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
	<script type="text/javascript" src="main.js"></script>
	</body>
	</html>
	var conf = {
	center: [-7.449624260197816,-59.94140624999999],
	zoom: 4,
	scrollWheelZoom: false
	};

	var map_1 = L.map('map_1', conf);
	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map_1);

	var map_2 = L.map('map_2', conf);
	L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png').addTo(map_2);

	var map_3 = L.map('map_3', conf);
	L.tileLayer('http://{s}.tiles.mapbox.com/v3/infoamazonia.AndesAguaAmazonia_relevo_12AmzRaisg,infoamazonia.AndesAguaAmazonia_relevo_11AmzRaisg,infoamazonia.AndesAguaAmazonia_relevo1-10,infoamazonia.naturalEarth_baltimetria,infoamazonia.rivers,infoamazonia.AAA_pois,infoamazonia.osm-brasil/{z}/{x}/{y}.png').addTo(map_3);