Show TOC Start of Content Area

Procedure documentation Code Example of the Use of a Geographical Map  Locate the document in its SAP Library structure

Use

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.

Prerequisites

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.

Procedure

Creating the Layout of the Geographical Map:

...

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

This graphic is explained in the accompanying text

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.      This graphic is explained in the accompanying text

       6.      Properties of the value node DataSource

       7.      This graphic is explained in the accompanying text

       8.      Properties of the value attribute geoObject

       9.      This graphic is explained in the accompanying text

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:

UI element property

Value

Bottom

49.2000

geoObjectSource

DataSource.geoObject (optional in this example)

Height

250

igsURL

URL of your IGS service

Left

8.5082

moveType

none

Right

8.7922

Top

49.4304

Width

250

zoomType

none

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.

UI element property

Value

LabelFor

TextView1

Text

Address of the company

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.

UI element property

Value

text

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 parameter actionID 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.

Note

To tell the action which geographical point triggers the event, you must map parameter id of the geographical point to parameter actionID of the action.

 

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

  }

Calling the Web Dynpro Application and Result

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.

This graphic is explained in the accompanying text

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

This graphic is explained in the accompanying text

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

 

End of Content Area