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

[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.