Oracle Maps example - alternative info window style

Instructions

This demo shows how to use a different skin style for the info-tip windows.

Source code

  var mapview;
  
  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);
    
    var theme1=new MVThemeBasedFOI('themebasedfoi1','mvdemo.customers');
    /* Use a custom info window style for theme info windows */
    
    var themeStyleParameters = 
      {bodyStyle:"border:2px;border-color:#FFFF00;background-color:#FFFFFF"};
    theme1.setInfoWindowStyle("MVInfoWindowStyle1", themeStyleParameters);
    
    mapview.addThemeBasedFOI(theme1);
    /* Change the default info window style */
    
    var defaultStyleParameters = 
      {closeButtonImageURL:"/mapviewer/fsmc/images/infoicons/close.gif",
       bodyStyle:"border:2px;border-color:#666666;background-color:#f5fffa",
       titleBarStyle:"color:#ffffff;background-color:#483D8B;font-weight:bold;font-family:Aria;font-size:14",
       coneStyle:"background-color:#838b83;opacity:30",
       offset:20};
    mapview.setDefaultInfoWindowStyle("MVInfoWindowStyle1", defaultStyleParameters) ;
    
    mapview.display();  		
    
    displayInfoWindow();
  }
  
  function displayInfoWindow() 
  {	
    var mpoint = MVSdoGeometry.createPoint (-122.4, 37.68,8301);
    var mpoint1 = mapview.transformGeom(mpoint, mapview.getSrid());
    mapview.displayInfoWindow(mpoint1, "<img src=\"http://www.oracle.com/admin/images/ocom/oralogo_small.gif\">",220,100,null,"Info Window"); 
  }