Oracle Maps example - highlight theme features using a polygon
Follow the steps below.
  1. Click here to enter polygon creation mode, then click on the map to define polygon vertices
  2. When done, click here to close the polygon and highlight customers within it
  3. Click here to remove the highlighted features and the polygon
  4. Please go back to step 1 if you would like to start over.

Instructions

This demo shows you how to draw a polygon on the map and highlight all the customer sites that fall within this polygon.

Source code

The JavaScript code for this demo is listed below. 
  var mapview;
  var redline;
  var hilitedCustomers;

  function showMap()
  {	
    var baseURL  = "http://"+document.location.host+"/mapviewer";
    var mapCenterLon = -122.45;
    var mapCenterLat =  37.6706;
    var mapZoom      =  3;  
    var mpoint = MVSdoGeometry.createPoint(mapCenterLon,mapCenterLat,8307);
    mapview = new MVMapView(document.getElementById("map"), baseURL);     			
    mapview.addMapTileLayer(new MVMapTileLayer("mvdemo.demo_map"));   
    var themebasedfoi = new MVThemeBasedFOI('themebasedfoi1','mvdemo.customers');    
    themebasedfoi.setBringToTopOnMouseOver(true);
    mapview.addThemeBasedFOI(themebasedfoi);
    
    mapview.setCenter(mpoint);   
    mapview.setZoomLevel(mapZoom);

    mapview.display(); 				
  }
  
  function redlineInit()
  {
    redline = new MVRedlineTool("black_line", "black_line");
    mapview.addRedLineTool(redline);
    redline.init();
  }

  function redlineDone()
  {
    redline.generateArea();
    var geom = redline.getPolygon();  //this will be our filtering geom
    
    highlightCustomers(geom);    
  }
  
  //this function hilights only the customer sites that are within the
  //provided filtering geometry.
  function highlightCustomers(geom)
  {
    hilitedCustomers = new MVThemeBasedFOI('highlightedcst','mvdemo.customers');
    
    hilitedCustomers.setBringToTopOnMouseOver(true);
  
      
    //these 3 lines do the theme high-lighting work
    hilitedCustomers.setHighlightOnly(true);  
    hilitedCustomers.setFilteringGeom(geom);
    hilitedCustomers.setRenderingStyle("M.CYAN PIN"); //set the pin symbol as the highlight style
    
    mapview.addThemeBasedFOI(hilitedCustomers);
  }
  
  function clearHighlights()
  {
    mapview.removeThemeBasedFOI(hilitedCustomers);
    redline.clear();
  }

Theme highlighting explained

To highlight a theme's features, you need to create a regular theme-based FOI layer, then set a few highlighting related attributes on it, as illustrated in the above red-text statements. The theme must be pre-defined (stored in the user_sdo_themes database table) and without binding variables in its definitions. It is currently only applicable on geometry themes.
You must also provide a filtering geometry (a MVSdoGeometry object), in this tutorial it is obtained through a Redline tool. This geometry is then used by the MapViewer server to select the theme's features that are within or interacts with it. Only these selected features will be rendered (high-lighted).
You can set a highlight style on a pre-defined theme using Map Builder, or you can specify the style name at the run time on the theme-based FOI object using its setRenderingStyle() method. In this tutorial, the pin marker symbol "M.CYAN PIN" is used to highlight all the selected customer sites.