Map Cache Server/Free Scroll Map Client

Oracle Maps example - Creating individual FOIs for various geometry types

Instructions

This demo shows how to create and display individual Features of Interest at the client side using the JavaScript API. You will learn how to construct dynamic FOIs using one of the many constructors of the MVSdoGeometry object, and assign a MapViewer style to each FOI. You will also learn how to toggle the visiblity of an FOI as well as remove it from the map.

Creating a new FOI

Step 1. Specify a unique FOI ID:
Step 2. Construct an FOI:
Select a javascript template to create an FOI geometry. You can change the coordinates afterwards.
MVSdoGeometry.createPoint(-122.30, 37.73, 8307)
FOI Width (point-type only):
FOI Height (point-type only):
Step 3. Specify a MapViewer style for the new FOI:

eg. mvdemo.C.RED, mvdemo.m.shield1, ...
Step 4. click

Toggling and Removing an FOI

Select the id of an FOI, then click the desired action button below.

Source code

The JavaScript source code for this demo is listed below.

  var baseURL = "http://"+document.location.host+"/mapviewer";
  var mapview;
  
  function showMap()
  {	
    var mapCenterLon = -122.45;
    var mapCenterLat =  37.82;
    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);
    
    mapview.display();  			
  }
    
  
  function addIndFOI()
  {
    var foiId = document.getElementById('foiid').value;
    var foiCreateString = document.getElementById('geometryStr').value;
    var foiWidth = document.getElementById('FOIWidth').value;
    var foiHeight = document.getElementById('FOIHeight').value;
    var theme = document.getElementById('theme').value;
    
    var shape=eval(foiCreateString);
    var foi = new MVFOI(foiId, shape, theme, "", foiWidth, foiHeight);        
    if(!(mapview.addFOI(foi)))
      return;
    
    var IndFOIList=document.getElementById("IndFOIList");
    var option=document.createElement("option");
    option.text=foiId;
    option.value=foiId;
    option.id=foiId;
    IndFOIList.options[IndFOIList.options.length]=option;
    foiCount++
    document.getElementById('foiid').value = "foi" + (1+foiCount);
  }
  
  function removeIndFOI()
  {
    var IndFOIList=document.getElementById("IndFOIList");
    
    if((IndFOIList.selectedIndex)<0)
    {
      alert("Please choose FOI from above list to remove");
      return;
    }
    
    mapview.removeFOI(IndFOIList.value);
    listAllIndFOIs();  	
  }
  
  function showHideIndFOI()
  {
    var IndFOIList=document.getElementById("IndFOIList");
    
    if((IndFOIList.selectedIndex)<0)
    {
      alert("Please choose FOI from above list to show/hide");
      return;
    }
    
    var foi=mapview.getFOI(IndFOIList.value);	
    if(foi.isVisible())
    {
      foi.setVisible(false);
    }
    else
    {
      foi.setVisible(true);
    }  	
  }
  
  function removeAllIndFOIs()
  {
    mapview.removeAllFOIs();
    
    var IndFOIList=document.getElementById("IndFOIList");
    IndFOIList.options.length=0;
  }
  
  function listAllIndFOIs()
  {
    var IndFOIList=document.getElementById("IndFOIList");
    
    IndFOIList.options.length=0;
    
    var IndFOIArray=mapview.getAllFOIs();
    for(var i=0; i<IndFOIArray.length; ++i)
    {
      var option=document.createElement("option");
      option.text=IndFOIArray[i].id;
      option.value=IndFOIArray[i].id;
      option.id=IndFOIArray[i].id;
      IndFOIList.options[IndFOIList.options.length]=option;
    }	  	
  }
  
  function changeTemplate(sel)
  {
    document.getElementById('geometryStr').value = sel.options[sel.selectedIndex].value ;
  }