Code Example of the Use of a Geographical
Map
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, and the layout of the view, see 
Creating Your First
Web Dynpro Application.
Procedure
Creating the Layout of the Geographical Map:
...
1.
Insert the GeoMap
UI element with the ID TheMap into view TestGeoMapView.
Creating the Context Structure
2. Create the context node:
3. Context structure: 4. Create value node DataSource 5. Create value attribute geoObject 6. Create value attribute Address
|
7.
|
8. Properties of the value node DataSource |
9.
|
10. Properties of the value attribute geoObject |
11.
|
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
12. Define the data binding for the UI element properties for the GeoMap UI element:
UI element property |
Value |
13. Bottom |
14. 49.2000 |
15. geoObjectSource |
16. DataSource.geoObject (optional in this example) |
17. Height |
18. 250 |
19. igsURL |
20. URL of your IGS service |
21. Left |
22. 8.5082 |
23. moveType |
24. none |
25. Right |
26. 8.7922 |
27. Top |
28. 49.4304 |
29. Width |
30. 250 |
31. zoomType |
32. none |
33.
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 |
34. LabelFor |
35. TextView1 |
36. Text |
37. Address of the company |
38.
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 |
39. text |
40. 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.
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. For detailed instructions for
building and deploying a project, see Building, Deploying,
and Running the Project.
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 Web Dynpro
GeoMap API (IWDGeoMap).