Code Example of the Use of a Geographical Map

The following example demonstrates the use of a geographical map. It also explains the view structure, the required context structure, and the data binding of the UI element properties to the context structure defined at design time for the geographical map. A geographical object, with which you can also trigger an event, is placed on this map. You can use geographical objects to highlight a certain geographical position in the section of the map. In this example, the exact location of SAP headquarters in Walldorf is shown. When you select this geographical object, the address of SAP AG appears in a TextView user interface element at the lower edge of the map.

You created a Web Dynpro application and created a view (called TestGeoMapComponent in the example) within this Web Dynpro component, in which you want to insert the GeoMap UI element. For a detailed description of the procedure for creating Web Dynpro projects, Web Dynpro components, the context structure as well as the layout of the view, refer to the tutorial Creating Your First Web Dynpro Application.

Creating the Layout of the Geographical Map:

Insert the GeoMap UI element with the ID TheMap into view TestGeoMapView.

Creating the Context Structure

Create the context node:

1. Context structure:
2. Create value node DataSource
3. Create value attribute geoObject
4. Create value attribute Address
5. Properties of the value node DataSource
6. Properties of the value attribute geoObject
   Note

   If you define first the context structure after creating the view, you can bind the UI element properties to the corresponding context elements directly after inserting of the UI element into the view.

Data Binding

Define the data binding for the UI element properties for the GeoMap UI element:

Define data binding for the UI element properties for the label UI element:

The UI element property text is bound to the root node attribute Address.

Define data binding for the UI element properties for the TextView UI element:

The UI element property text is bound to the root node attribute Address.

Defining the OnObjectAction Event LinkToWebAddress

A geographical object can trigger an onObjectAction event. This event is always bound to a geographical object on the map. You can do this by creating action LinkToWebAddress with parameteractionID in the View Designer. This automatically creates method onActionLinkToWebAddress in the controller implementation.

Within this method, you fill the context with the address by means of the source text wdContext.currentContextElement().setAddress("SAP AG, Neurottstraße 16, 69190 Walldorf");. If you select the geographical object with the mouse button in this example, the address of SAP appears in a TextView UI element at the lower edge of the map.

public static void wdDoModifyView(IPrivateTestGeoMapView wdThis, IPrivateTestGeoMapView.IContextNode wdContext, com.sap.tc.webdynpro.progmodel.api.IWDView view, boolean firstTime)
  {
    //@@begin wdDoModifyView
   IWDGeoMap map = (IWDGeoMap)view.getElement("TheMap");
             map.mappingOfOnObjectAction().addSourceMapping("id", "actionID");
    //@@end
  }
 
 
//@@begin javadoc:onActionLinkToWebAdress(ServerEvent)
  /** Declared validating event handler. */
  //@@end
public void onActionLinkToWebAddress(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent, java.lang.String actionID )
  {
    //@@begin onActionLinkToWebAddress(ServerEvent)
   wdContext.currentContextElement().setAddress("SAP AG, Neurottstraße 16, 69190 Walldorf");
    //@@end
  }

Controller Implementation of View TestGeoMapView

Several Web Dynpro classes are available for placing geographical objects, including WDGeoObject, WDGeoLine, WDGeoPoint, and WDGeoPolygon. The following source text displays a geographic object at position 8.6425, 49.2929 (WGS84 format) in the form of a blue ellipse with the label SAP upon initialization. Also see the screenshot of the result below. If method setTriggersEvent has the value true, the geographical object of type IWDGeoPoint can trigger an event.

 
public void wdDoInit()
  {
    //@@begin wdDoInit()
    IPrivateTestGeoMapView.IdataSourceNode  node = wdContext.nodeDataSource();
   
    IWDGeoPoint point = WDGeoFactory.createGeoPoint("GeoPoint1");
    point.setLabel("SAP");
    point.setStyle(WDGeoPointStyle.ELLIPSE);
    point.setTooltip("SAP");
    WDGeoPosition geoPosition = new WDGeoPosition(8.6425, 49.2929);
    point.setPosition(geoPosition);
    point.setTriggersEvent(true);
    point.setSize(20);
    point.setColor(java.awt.Color.blue);
   
   
     IPrivateTestGeoMapView.IDataSourceElement nodeElement = node.createDataSourceElement();
     nodeElement.setGeoObject(point);
     node.addElement(nodeElement);
    //@@end
  }

Before you can call the Web Dynpro application, you must build the Web Dynpro project and install the Web Dynpro application on the J2EE Engine.

You call the Web Dynpro application using a URL in the browser. The result is the display of a map section of the Heidelberg/Walldorf region, in which the location of SAP headquarters is marked with a blue ellipse.

If you select this geographical object, the address is displayed at the lower edge of the map.

For more information, see the description of the Web Dynpro GeoMap API.