Business Analysis with Oracle Spatial & MapViewer

Instructions

Note that in order for this demo to work, you must enable JDBC theme-based FOI for the data source you are using. By default this is disabled by MapViewer, but you can enable it by adding the following line to your permanent data source definition in mapViewerConfig.xml:

  <map_data_source name="mvdemo"
                   jdbc_host="db.my_corp.com"
                   jdbc_sid="orcl"
                   jdbc_port="1521"
                   jdbc_user="scott"
                   jdbc_password="!tiger"
                   jdbc_mode="thin"
                   number_of_mappers="3"
                   allow_jdbc_theme_based_foi="true"
   />

Source code

  var customertheme;
  var buffertheme;
  var baseQuery;
  var baseURL  = "http://"+document.location.host+"/mapviewer";
  var mapCenterLon = -122.45;
  var mapCenterLat =  37.7706;
  var mapZoom      =  4;  
  var mpoint = MVSdoGeometry.createPoint(mapCenterLon,mapCenterLat,8307);     
  function on_load_mapview() 
  {
    mapview = new MVMapView(document.getElementById("map"), baseURL);
    var basemap = new MVMapTileLayer("mvdemo.demo_map");
    mapview.addMapTileLayer(basemap);   
    mapview.setCenter(mpoint);   
    mapview.setZoomLevel(mapZoom);  
    customertheme = new MVThemeBasedFOI('customertheme','mvdemo.customers');
    customertheme.setBringToTopOnMouseOver(true);
    mapview.addThemeBasedFOI(customertheme);
    mapview.display();
    addBuffertheme('customers',1) ;                                      
  }
  function doZoomIn() 
  {
    mapview.zoomIn();
  }
  function doZoomOut() 
  {
    mapview.zoomOut();
  }

  function toggle(themebasedfoi)
  {
    themebasedfoi.setVisible(!themebasedfoi.isVisible());
  }
  
  var bufferStyle = "mvdemo:c.red" ;
  
  function addBuffertheme(themeTable, radius)
  {
    baseQuery= "select sdo_geom.sdo_buffer(A.location, "+radius+
           ", 0.005, 'unit=mile arc_tolerance=0.005') location "+
           " from "+themeTable+" A" ;
    var theme = "<themes><theme name='JDBC_THEME' >" +
                "<jdbc_query asis='true' spatial_column='location' jdbc_srid='8307' " +
                "render_style='"+bufferStyle+"' datasource='mvdemo'>" + baseQuery +
                "</jdbc_query></theme></themes>" ; 
    buffertheme = new MVThemeBasedFOI('buffertheme',theme);    
    buffertheme.setBringToTopOnMouseOver(true);
    buffertheme.setVisible(false);
    mapview.addThemeBasedFOI(buffertheme);    
    // place the buffer theme beneath the customer theme
    mapview.setThemeIndex(buffertheme, 1) ;
    mapview.setThemeIndex(customertheme, 2);  
      
  }

  var bufferIsVisible = false ;
  
  function updateBuffer()
  {
    var theme = getSelectedOption(document.getElementById('bufferTheme')) ;
    var radius = document.getElementById('bufferDistance').value ;
    bufferStyle = getSelectedOption(document.getElementById('fill')) ;
    mapview.removeThemeBasedFOI(buffertheme);
    baseQuery = "select sdo_geom.sdo_buffer(A.location, "+radius+
                ", 0.005, 'unit=mile arc_tolerance=0.005') location "+
                " from "+theme+" A" ;
    var theme = '<themes><theme name="JDBC_THEME" >' +
                '<jdbc_query asis="true" spatial_column="location" jdbc_srid="8307" ' +
                'render_style="'+bufferStyle+'" datasource="mvdemo">' + baseQuery +
                '</jdbc_query></theme></themes>' ;      
    buffertheme = new MVThemeBasedFOI('buffertheme',theme);    
    buffertheme.setBringToTopOnMouseOver(true);
    mapview.addThemeBasedFOI(buffertheme);
    // place the buffer theme beneath the customer theme
    mapview.setThemeIndex(buffertheme, 1) ;
  }
  
  function toggleBuffer()
  {
    if(!bufferIsVisible)
    {
      bufferIsVisible = true ;
      document.getElementById('showHideBuffer').value='Hide Buffer';
      buffertheme.setVisible(true);
    }
    else
    {
      bufferIsVisible = false ;
      document.getElementById('showHideBuffer').value='Show Buffer';
      buffertheme.setVisible(false);
    }
  }  
  
  function getSelectedOption(sel)
  {
    for(var i=0; i<sel.options.length; i++)
    {
      if(sel.options[i].selected)
        return sel.options[i].value ;
    }
  }

<BODY onload= javascript:on_load_mapview()>