Inset test

by Alex Azuero

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css">
<script src="http://leafletjs.com/examples/us-states.js"></script>

    <div id='map'></div>
    <div id='map-overlay-hawaii'></div>
    <div id='map-overlay-alaska'></div>
</iframe>

CSS

iframe, body {
    margin:0;
    padding:0;
}
#mapframe {
    height: 600px;
    width: 800px;
        display: block;
        margin: 0;
    padding: 0;
    border: 0;
}
#map {
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
}
#map-overlay-hawaii {
    position:absolute;
    left:10px;
    bottom:10px;
    width:200px;
    height:150px;
    border:1px solid #fff;
}
#map-overlay-alaska {
    position:absolute;
    left:10px;
    top:10px;
    width:200px;
    height:150px;
    border:1px solid #fff;
}

JavaScript

var map = new L.Map('map', {
    zoom: 4,
    center: new L.latLng([37.8, -96]),
    zoomControl: false
});

map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); //base layer

var mapOverlayHawaii = new L.Map('map-overlay-hawaii', {
    zoomControl: false,
    attributionControl: false
})
    .fitBounds([
    [18.542116654448996, -161.03759765625],
    [22.573438264572406, -154.22607421875]
]);

var mapOverlayAlaska = new L.Map('map-overlay-alaska', {
    zoomControl: false,
    attributionControl: false
})
    .fitBounds([
    [51.72702815704774, -170.15625],
    [71.85622888185527, -127.61718749999999]
]);

mapOverlayHawaii.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));
mapOverlayAlaska.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));

new L.Control.Zoom({
    position: 'topright'
}).addTo(map);
//create empty geoJson layer to be populated later
//styles, popups and other layer options can be specified here
var statesLayer = L.geoJson(statesData, {
    style: function (feature) {
        return {};
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.name + "</br>" + "  " + Math.round(feature.properties.density) + ' people / sq mile');
    }
}).addTo(map).addTo(mapOverlayHawaii);