Oracle Maps example - map decorations



Instructions

In this demo we added two pieces of map decorations. A map decoration is an arbitrary HTML string that is displayed at a dixed location inside the map DIV. One is a simple string of "Hello World", the other the Oracle logo. When you add a Map Decoration to the map, the JavaScript API automatically assigns a unique Id to it, starting at 1. You can manipulate each map decoration by its Id, as show below.

Select a map decoration (by its Id):
and click here to change visibility
or click here to remove it

Source code

Here are the source code for this demo. 
  var mapview;
  var md1,md2;
  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);    
    addFixedHTML()
                                           
  }

  function openNewWindow(){
    window.open('http://www.oracle.com','oracle');
  }
  
  function addFixedHTML()
  {
    
    md1=new MVMapDecoration( "Hello World",0.1, 0.1,200,20);
    mapview.addMapDecoration(md1);
    md2=new MVMapDecoration("<img src=\"http://www.oracle.com/admin/images/ocom/oralogo_small.gif\">",0.1, 0.1,20,5);
    md2.setOffset(0,50)
    md2.attachEventListener(MVEvent.MOUSE_CLICK,openNewWindow);
    
    mapview.display();
    
    mapview.addMapDecoration(md2);
    
  }
  
  function removeFixedHTML()
  {
    var id = document.getElementById('mapdecoid').value;
    eval("mapview.removeMapDecoration(md"+id+")");
  }
  function changeVisibility()
  {
  	var id = document.getElementById('mapdecoid').value;
    eval("md"+id+".setVisible(!md"+id+".isVisible())");
  }