JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
<div id="map">
<div id="insetmap"></div>
</div>
CSS
html {
font:13px/1.231 Calibri, Arial, sans-serif;
*font-size:small;
}
.info {
background: #fff;
border-radius: 8px;
box-shadow: -4px 4px #444;
opacity: .8;
padding: 8px;
width: 95%;
}
#map {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
#insetmap {
border: solid 2px #444;
position: fixed;
right: 8px;
bottom: 8px;
width: 20%;
height: 20%;
}
JavaScript
// create a map
var map = $("#map").geomap({
center: [-71.0595678, 42.3604823],
zoom: 9,
bboxchange: function (e, geo) {
// whenever the bbox changes, update the inset map's shape
insetmap.geomap("empty");
insetmap.geomap("append", bboxToPolygon(geo.bbox));
}
});
// create a smaller map
// stop interaction (static mode) and add the default service but
// without an attr property, it's on the main map
var insetmap = $("#insetmap").geomap({
center: [-82.0595678, 42.3604823],
zoom: 6,
mode: "static",
services: [{
type: "tiled",
src: "http://tile.openstreetmap.org/{{=zoom}}/{{=tile.column}}/{{=tile.row}}.png"
}]
});
// append a shape to the inset map to show the big map's bbox
insetmap.geomap("append", bboxToPolygon(map.geomap("option", "bbox")));
function bboxToPolygon(bbox) {
// a quick function to convert a bbox into a true GeoJSON Polygon
return {
type: "Polygon",
coordinates: [
[
[bbox[0], bbox[1]],
[bbox[0], bbox[3]],
[bbox[2], bbox[3]],
[bbox[2], bbox[1]],
[bbox[0], bbox[1]]
]
]
}
}