Oracle Maps example - marquee zoom

Click here to enter one of the following marquee zoom modes:

Prompt
The map is zoomed after you finish drawing the rectangle and click on the rectangle. The rectangle disappears and the map is not zoomed if you click on any other part of the map. The marquee zoom tool remains active until you stop it.
Continuous
The map is zoomed as soon as you finish drawing the rectangle. The marquee zoom tool remains active until you stop it.
One time
The map is zoomed as soon as you finish drawing the rectangle. Marquee zoom tool becomes inactive aftwards.

Click here to enter marquee zoom mode with custom rectangle style

Click here to exit marquee zoom mode

Instructions

This demo shows how to use the built-in rectangle tool to perform marquee zoom. Once you enter the marquee zoom mode, you can start dragging a rectangle on the map. As soon as you release the mouse the map will be zoomed to the rectangle area.

To resume normal map dragging, you must exit the marquee zoom mode.

Source code

  var mapview = null;
  var mode = "prompt" ;
  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);
    mapview = new MVMapView(document.getElementById("map"), baseURL);
    mapview.addMapTileLayer(new MVMapTileLayer("mvdemo.demo_map")); 
    mapview.setCenter(mpoint); 
    mapview.setZoomLevel(mapZoom);   
    mapview.addNavigationPanel("WEST");  
    mapview.display();
    document.getElementById("promptbutton").checked = true ;
  }

  
  function marqueeZoom()
  {
    mapview.stopMarqueeZoom();
    mapview.startMarqueeZoom(mode, new Object());
  }
  
  function noMarqueeZoom()
  {
    mapview.stopMarqueeZoom();
  }

  function setMode(button)
  {
    mode = button.value ;
    mapview.startMarqueeZoom(mode);
  }

  function marqueeZoomCustomStyle()
  {
    var rectStyle = new Object() ;
    rectStyle.borderColor = "#0000FF" ;
    rectStyle.borderWidth = 2 ;
    rectStyle.borderDashed = false ;
    rectStyle.fillColor = "#FF0000" ;
    rectStyle.fillOpacity = 0.5 ;
    mapview.stopMarqueeZoom();
    mapview.startMarqueeZoom(mode, rectStyle);
  }
And here is how the marqueeZoom mode is controlled. 
  <a href="javascript:marqueeZoom()">Click here to enter one of the following marquee zoom modes:</a>
  <a href="javascript:noMarqueeZoom()">Click here to exit marquee zoom mode</a>