Skip to Content

How use sap.m.Image with UseMap and get the clicked location?

Aug 24, 2017 at 04:16 AM


avatar image

Hello all,

I'm writing here after a couple of hours of reading everything available on-line, including SAPUI5 Explored Apps, API, etcs.

I need to use Image with Maps to define and capture different clickable areas in an image.

SAPUI5 explored says there is an UseMap parameter, but don't provide enough info or example. I've tried and can't map and get the clicked location.

The API offers sap.m.ImageHelper, with one parameter to use maps. But it also lacks example or enough documentation.

Finally, I'm aware that there's some examples on-line using sap.ui.commons. But I couldn't find any example using sap.m

Anyone has a real working example of this?

Thank you!



10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Best Answer
Douglas Amaral Cezar Aug 28, 2017 at 01:37 PM

Unfortunately no answers at all here, I think that it's a problem for the SAPUI5 community.

IMHO there is a need for this part of the SAP community to be as helpful as the traditional ABAP community has always been with lots of knowledge exchange if we want people to be able to build nice and innovative solutions using SAPUI5.

In the particular matter of my question, I think that the API documentation should address it in a more helpful way.

Finally, I'd a helpful answer from Stack Overflow. It wasn't a definite answer but pointed on the right direction so I've found the final solution injecting HTML to deal with maps in the XML view using the core lib.

10 |10000 characters needed characters left characters exceeded
Douglas Amaral Cezar Aug 24, 2017 at 02:03 PM

I'm still looking for a way to solve this.

I've found this one:

But I don't know how to apply it so a SAPUI5 with XML view.

Any ideas?

10 |10000 characters needed characters left characters exceeded
Silvia Grabmann Mar 06 at 07:25 PM


hope you found already an answer... if not

you can use the following for example in your view. Just use the html libary for the map and include that one in the image control

<mvc:View controllerName="xy.controller.Master" xmlns:html="" xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true" xmlns="sap.m">
			<Page title="{i18n>title}">
					<Image src="img/Blume.PNG" densityAware="false" width="" useMap="Map">
							<FlexItemData growFactor="1"/>
					<html:map name="Map" id="Map">
						<html:area alt="" title="" href="" shape="poly" coords="384,505,444,507,444,528,390,527"/>
						<html:area alt="" title="" href="" shape="poly" coords="426,582,494,583,494,636,426,632"/>
10 |10000 characters needed characters left characters exceeded