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.
...
Insert the GeoMap
UI element with the ID TheMap into view TestGeoMapView.
...
Create the context node:
1. Context structure: 2. Create value node DataSource 3. Create value attribute geoObject 4. Create value attribute Address
|
5. |
6. Properties of the value node DataSource |
7. |
8. Properties of the value attribute geoObject |
9. |
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.
...
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 |
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 } |
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.