Oracle Maps example - highlight theme features using a circular buffer
Follow the steps below.
  1. Click here to enter circle creation mode, then mouse down and drag on the map
  2. Click here to remove the highlighted features and the circle
  3. Please go back to step 1 if you would like to start over.

Instructions

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

Source code

The JavaScript code for this demo is listed below. 
 var mapview;
  var circleTool;
  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 circleInit()
  {
    circleTool = new MVCircleTool("black_line");
    circleTool.attachEventListener(MVEvent.FINISH, circleDone);
    mapview.addCircleTool(circleTool);
    circleTool.init();
  }

  function circleDone()
  {
    var geom = circleTool.getCircle();  //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);
    circleTool.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.