How to Integrate Microsoft Bing Maps into SAP EHS Management · SAP Environment, Health, and Safety Management (SAP EHS Management) uses locations for identifying real places, virtual

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

© 2011 SAP AG 1

How to Integrate Microsoft Bing

Maps into SAP EHS Management

Applies to:

Component Extension 1.0 for SAP Environment, Health, and Safety Management. For more information, visit the Sustainability homepage.

Summary

This tutorial explains how to embed a map into SAP EHS Management to visualize the address of a location on the map. The map is realized as a Web Dynpro CHIP (Collaborative Human Interface Part) and integrated into the Web Dynpro side panel of the maintenance screen for location master data.

Author: Bruno Haller

Company: SAP AG

Created on: 10 January 2011

Author Bio

Bruno Haller is a senior software developer at SAP AG. He has over 10 years of experience in developing applications in the environment, health and safety (EHS) area.

https://www.sdn.sap.com/irj/sdn/bpx-csr

How to Integrate Microsoft Bing Maps into SAP EHS Management


© 2011 SAP AG 2

Table of Contents

Introduction ......................................................................................................................................................... 3

Prerequisites ....................................................................................................................................................... 3

Create a CHIP for Bing Map Integration ............................................................................................................. 4

Build a HTML Wrapper for Bing Map Control ................................................................................................. 4

Create a URL CHIP ......................................................................................................................................... 6

Embed the Map CHIP into the Location Side Panel ........................................................................................... 8

Create an enhancement configuration ............................................................................................................ 8

Edit the Side Panel .......................................................................................................................................... 8

Test the Result .................................................................................................................................................. 10

Related Content ................................................................................................................................................ 11

Licensing ........................................................................................................................................................... 11

Copyright........................................................................................................................................................... 12



© 2011 SAP AG 3

Introduction

SAP Environment, Health, and Safety Management (SAP EHS Management) uses locations for identifying real places, virtual spaces or objects. The location is a central master data object that can be organized in a structure to represent where a location exists spatially or functionally in a company. Examples of a location are a plant, a piece of equipment, or a work area.

The master data maintenance screen for locations is a Web Dynpro ABAP application based on FPM (Floorplan Manager). It uses the Web Dynpro side panel to display additional context information, such as the position of a location within the company’s location structure.

The goal of this tutorial is to use the address information that is contained within each location and to visualize it on a map.

Prerequisites

This tutorial uses advanced concepts of Web Dynpro for ABAP and therefore, advanced knowledge of Web Dynpro for ABAP is required. For more information about Web Dynpro for ABAP, see help.sap.com.

http://help.sap.com/



© 2011 SAP AG 4

Create a CHIP for Bing Map Integration

Build a HTML Wrapper for Bing Map Control

Bing Maps™, designed by Microsoft®, offers several techniques to embed a map into a Web page or Web

application. Direct URL embedding requires geographical coordinates. The address information contained within a location though can also consist of individual fields like street, city, zip, or country. If no geographical coordinates are available, the address information has to be converted first (this process is called “Geocoding”).

The Bing Maps AJAX Control supports geocoding of address information and displaying it on an embedded map. It was chosen, since it is rather simple to embed it into an HTML page and to pass the location address into it.

Note: Other technologies (such as Web Services) exist to perform Geocoding. This tutorial shall be kept simple and

avoid development effort as much as possible.

The following steps describe how to use a simple BSP application to embed the Bing Maps AJAX control.

Note: Any other technology like PHP, JSP, or even plain HTML in combination with JavaScript will work also. BSP is

chosen to keep the example simple and consistent on one application server.

Open transaction SE80 and create a new BSP Application.

Create a new BSP page.

Define a page attribute address that will be used for receiving the URL parameter with the location’s address.



© 2011 SAP AG 5

Use HTML and Javascript in the Page Layout to embed the Bing Maps AJAX Control.

<%@page language="abap"%>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript"

src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>

<script type="text/javascript">

var map;

function OnPageLoad()

{

map = new VEMap('myMap');

map.LoadMap();

map.SetMapStyle(VEMapStyle.Hybrid);

map.Find(null, '<%= address %>');

map.HideDashboard();

map.HideScalebar();

}

</script>

</head>

<body onload="OnPageLoad();" style="margin-top: 0px;margin-bottom: 0px;margin-left:

0px;margin-right: 0px;">

<div id="myMap" style="position:relative;width:100%;height:100%;"></div>

</body>

</html>

Test the page (right click: “Test”) by appending a URL parameter with a valid address, for example,

?address=Walldorf.



© 2011 SAP AG 6

Create a URL CHIP

To integrate the previously created HTML page with Web Dynpro, it is necessary to create a Web Dynpro CHIP for it. In our case, it is sufficient to create a CHIP that contains the URL for the Bing Map Ajax Control Wrapper.

1. Start the Web Dynpro application WDR_CHIP_CATALOG.

2. Add the URL parameter sap-config-mode=config to enter configuration mode.

3. Right click on the folder “Left” and choose “Create…”.

4. Enter a configuration ID and choose the “Create” pushbutton.

5. Enter the HTTP URL to the previously created HTML page in the field "chipAddress". Make sure to

enter exactly <EHFND_LOC_ADDRESS> as a place holder in the URL. It will be replaced with the

location’s address at runtime.



© 2011 SAP AG 7

6. Add a custom parameter to increase the displayed height.

7. Save and close the configurator.



© 2011 SAP AG 8

Embed the Map CHIP into the Location Side Panel

Create an enhancement configuration

The location side panel that is delivered with component extension 1.0 for SAP EHS Management is defined

in Web Dynpro configuration EHFND_LOC_OIF_SIDE_PANEL. To embed the map, a modification-free

enhancement shall be made to this configuration.

1. Use SE80 to find the Web Dynpro configuration EHFND_LOC_OIF_SIDE_PANEL and start the

configurator. 2. In the start screen of the configurator, select "Other Functions Create Enhancement".

3. Enter a configuration ID, press OK and save the configuration.

Edit the Side Panel

1. Create a new application configuration of Web Dynpro application WDR_CHIP_PAGE. In it, use the

enhanced component configuration that was created in the previous step.

2. Start the application configuration by pressing the “Test” button and add the following URL

parameters:

page_type=SIDE_PANEL

side_panel_editor_enabled=X

sap-config-mode=config



© 2011 SAP AG 9

3. The Side Panel Editor opens and shows a preview of the currently configured CHIPs (only the “location structure” by default).

4. Click on “Add Panel Entry” and give it the name “Map”. 5. Open the “Chip Catalog” with the link on the upper right of the screen. 6. Find the URL CHIP you have created previously, and use drag and drop to embed it into the new

side panel entry.

7. Save the configuration and close the configurator.



© 2011 SAP AG 10

Test the Result

Start SAP EHS Management and open the master data maintenance screen of any location. Make sure that a valid address is entered.

On the bottom of the side panel you should now see a new entry called “Map”.

Click it to expand the map CHIP and verify the result.

Congratulations! You have successfully configured Bing Maps for use in SAP EHS Management.



© 2011 SAP AG 11

Related Content

Read more about the Microsoft Bing Maps AJAX Control

Another interesting SDN tutorial: How to Integrate Google Maps into a Web Dynpro ABAP Application Using the Page Builder

Learn more about SAP EHS Management and Sustainability.

For more information, visit the Sustainability homepage.

Licensing

Be aware of the general licensing terms and conditions for the usage of Bing Maps and refer to http://www.microsoft.com/maps/product/licensing.aspx for detailed information. You can get further information on the required licenses via [email protected].

http://msdn.microsoft.com/en-us/library/bb429619.aspx

http://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/b0bca5ae-3c5c-2d10-938d-a81787f59ace

http://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/b0bca5ae-3c5c-2d10-938d-a81787f59ace

http://www.sap.com/solutions/business-suite/erp/corporate_services/ehs/index.epx

http://www.sdn.sap.com/irj/bpx/sustainability

https://www.sdn.sap.com/irj/sdn/bpx-csr

http://www.microsoft.com/maps/product/licensing.aspx

mailto:[email protected]



© 2011 SAP AG 12

Copyright

© Copyright 2011 SAP AG. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.

Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.

IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation.

Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology.

Java is a registered trademark of Sun Microsystems, Inc.

JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries.

Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and in other countries. Business Objects is an SAP company.

All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary.

These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

Documents

How to Integrate Microsoft Bing Maps into SAP EHS Management · SAP Environment, Health, and Safety Management (SAP EHS Management) uses locations for identifying real places, virtual