| Current File : /home/jeshor13/11bsouth.com/firstMap/index.html |
<!DOCTYPE html>
<head>
<style>
body {
padding:0;
margin:0;
height: 100%;
}
html{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#map {
height: 50%; width: 50%;
}
#map2 {
height: 50%; width: 50%;
}
#map3 {
top: -100%;
left: 50%;
height: 50%; width: 50%;
}
#map4 {
top: -100%;
left: 50%;
height: 50%; width: 50%;
}
</style>
<title> There's no "I" in land </title>
<link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src ="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
</head>
<body>
<div id="map"></div>
<div id="map2"></div>
<div id="map3"></div>
<div id="map4"></div>
<script>
// Hawaii
var layer = new L.StamenTileLayer("watercolor");
var map = L.map('map', {
scrollWheelZoom: false,
center: [20.808, -156.594],
zoom: 6,
zoomControl: false,
attributionControl: false
});
map.addLayer(layer);
// Iceland
var layer = new L.StamenTileLayer("watercolor");
var southWest3 = L.latLng(63.25, -25.33),
northEast3 = L.latLng(66.863, -12.092),
bounds3 = L.latLngBounds(southWest3, northEast3);
var map2 = L.map('map2', {
scrollWheelZoom: false,
center: [64.818570, -18.588871],
zoom: 6,
zoomControl: false,
maxBounds: bounds3,
attributionControl: false
});
map2.addLayer(layer);
// Zeland
var layer = new L.StamenTileLayer("watercolor");
var southWest2 = L.latLng(-49.500, 160.394),
northEast2 = L.latLng(-30.573, 179.999),
bounds2 = L.latLngBounds(southWest2, northEast2);
var map3 = L.map('map3', {
scrollWheelZoom: false,
center: [-41.722, 173.003],
zoom: 5,
maxBounds: bounds2,
zoomControl: false,
attributionControl: false
});
map3.addLayer(layer);
// Madagascar
var layer = new L.StamenTileLayer("watercolor");
var southWest = L.latLng(-26.500, 42.094),
northEast = L.latLng(-10.673, 75.492),
bounds = L.latLngBounds(southWest, northEast);
var map4 = L.map('map4', {
scrollWheelZoom: false,
center: [-20.040, 50.76],
zoom: 5,
maxBounds: bounds,
zoomControl: false
});
map4.addLayer(layer);
</script>
</body>
</html>