Map Cache Server/Map Client

Oracle Maps example - collapsible overview map

Instructions

This example shows how to add an overview map as a collapsible element inside the main map. You can drag the small red rectangle within the overview map to recenter the main map.

Note that when you collapse the overview map, its minimized icon will automatically disspear into the bottom edge of the map after a few seconds. If you mouse over the bottom area of the map where the minimized icon disappeared, it will reemerge so that you can un-collapse the overview map.

Source code

The JavaScript code for this demo is listed below.

  var ovcontainer;
  function showMap()
  {	
    var baseURL  = "http://"+document.location.host+"/mapviewer";
    var mapCenterLon = -122.45;
    var mapCenterLat =  37.6706;
    var mapZoom      =  4;  
    var mpoint = MVSdoGeometry.createPoint(mapCenterLon,mapCenterLat,8307);
    var mapview = new MVMapView(document.getElementById("map"), baseURL);
    mapview.addMapTileLayer(new MVMapTileLayer("mvdemo.demo_map")); 
    mapview.setCenter(mpoint); 
    mapview.setZoomLevel(mapZoom);
    
    ovcontainer = new MVMapDecoration(null,null,null,200,150) ;
    ovcontainer.setCollapsible(true, true);
    ovcontainer.setTitleBar("Overview Map", "/mapviewer/fsmc/images/overviewicon.png", "Overview map");
    mapview.addMapDecoration(ovcontainer);
    var over=new MVOverviewMap(ovcontainer.getContainerDiv(),3);
    mapview.addOverviewMap(over)
    
    mapview.display();  			
  }