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

[DouglasCezar]

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!

Regards,

Douglas

[DouglasCezar · Accepted solution]

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.

[e_giunta · Accepted solution]

Hello Douglas,

i am facing the same problem, can you please help me providing a basic sample to get the location with click using image and useMap. Thank you!

[former_member24878]

Hi,

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="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true" xmlns="sap.m">
	<App>
		<pages>
			<Page title="{i18n>title}">
				<content>
					<Image src="img/Blume.PNG" densityAware="false" width="" useMap="Map">
						<layoutData>
							<FlexItemData growFactor="1"/>
						</layoutData>
					</Image>
					
					<html:map name="Map" id="Map">
						<html:area alt="" title="" href="www.google.de" shape="poly" coords="384,505,444,507,444,528,390,527"/>
						<html:area alt="" title="" href="www.google.de" shape="poly" coords="426,582,494,583,494,636,426,632"/>
					</html:map>
					
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

[former_member734881]

Thanks, this solution helped me include an SVG element in a view. (When you think about it, the namespace declaration makes it appear quite obvious (-: ).

The problem is that I cannot manipulate my new elements. In the onAfterRendering event, trying to get individual parts by ID (using this.createID) still does not allow me to get the elements to manipulate them.

In the console, I am actually able to get at the elements, but it seems UI5 does not add them to the DOM by the time it reaches onAfterRendering.

[DouglasCezar]

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

I've found this one:

https://www.w3schools.com/tags/att_img_usemap.asp

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

Any ideas?