Skip to Content

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

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!



Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Best Answer
    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.

    Add comment
    10|10000 characters needed characters exceeded

  • 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?

    Add comment
    10|10000 characters needed characters exceeded

  • Mar 06, 2018 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"/>
    Add comment
    10|10000 characters needed characters exceeded