examples/navwindow/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Modest Maps JS - Nav Window Test</title>
    <script type="text/javascript" src="../../modestmaps.js"></script>
    <script type="text/javascript">

var MM = com.modestmaps; // "import" namespace
var map, nav;

window.onload = function() {
    var provider = new MM.TemplatedLayer('http://tile.openstreetmap.org/{Z}/{X}/{Y}.png');
    map = new MM.Map('map', provider);
    nav = new MM.Map('nav', provider);

    var changingMap = null;
    function sync(m) {
      if (!changingMap) {
        // FIXME: sync needs to be more subtle than this, since it shouldn't mess with zoom unless the user has zoomed
        changingMap = m; 
        if (m == map) {
          nav.setCenterZoom(map.getCenter(), map.getZoom()-3);
        }
        else {
          map.setCenterZoom(nav.getCenter(), nav.getZoom()+3);
        }
        changingMap = null;
      }
    }

    nav.addCallback('drawn', sync);
    map.addCallback('drawn', sync);

    // FIXME: it would be nice if nav was resizeable

    // FIXME: nav should have a little box that shows the current view
    //        and you should drag the box instead of panning the map

    nav.setCenterZoom(map.getCenter(), map.getZoom()-3);
}

    </script>
    <style type="text/css">

html, body, #map, #nav {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

#nav {
  background: #eee;
}
#navbox {
  z-index: 1000;
  width: 100px;
  height: 100px;
  background: #fff;
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 6px 0 0 6px;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
}

    </style>
  </head>
  <body> 
    <div id="map">
      <div id="navbox">
        <div id="nav">
        </div>
      </div>
    </div>
  </body>
</html>