Map Cache Server/Map Client

Oracle Maps example - Customizing theme based FOI display

Instructions

This demo shows how to customize the way how FOIs are displayed on the map using a layout customizer, a javascript function that displays a label to the right of each FOI on the map.

Source code

Here is the JavaScript code for the above map.

  var mapview;
  
  function on_load_mapview() 
  {	
    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);
    mapview = new MVMapView(document.getElementById("map"), baseURL);
    mapview.addMapTileLayer(new MVMapTileLayer("mvdemo.demo_map"));   
    mapview.setCenter(mpoint);   
    mapview.setZoomLevel(mapZoom);    
    
    var themebasedfoi = new MVThemeBasedFOI('themebasedfoi1','mvdemo.customers');
    
    themebasedfoi.setLayoutCustomizer(customizer);
    
    themebasedfoi.setBringToTopOnMouseOver(true);
    mapview.addThemeBasedFOI(themebasedfoi);

    mapview.addNavigationPanel();          
    mapview.display();
  }
  
  
  function customizer (foi)
  {
    foi.html = "<div>"+
               "<img style='position:absolute' src='"+foi.imgurl+"'>" +
               "<table style='position:absolute;left:10px;top:0px;background-color:white;color:red;'><tr><td nowrap>"+foi.attrs[0]+"</td></tr></table>" +
               "</div>";
    foi.xoffset = 0;
    foi.yoffset = 0;
  }