Dynamic Image Map in Salesforce Lightning

Images are best to showcase products or brands on websites. These images can be divided into multiple sections to show specific products or brand information.

We can use HTML image maps to create clickable areas on an image. Image maps are used hyperlink parts of an image to a different destination.

HTML Elements Used to Create Image Maps

There are three HTML elements used to create image maps:

• img: specifies the product or brand image. usemap attribute is required for map creation.
• map: is used to create a map of clickable image areas.
• area: is used within the map element to define the clickable areas.

Example:

<img src="brand.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Wipro" href="https://www.wipro.com/">
  <area shape="rect" coords="290,172,333,250" alt="iPhone" href="https://www.flipkart.com/apple-iphone-5-white-16-gb/">
</map>

Let us build this as a dynamic Lightning Web Component in Salesforce. We need image and image coordinates to make a clickable image component. We can create a new image and image detail object or can use any existing object to store field information.

Image Object:

This object will store image detail. Enable attachment while creating an object. The image will be stored as an attachment. Fields for this object is

Image Detail Object

This object will store image detail. This will hold all coordinate of the image, the link of page which will be opened when that coordinate area clicked and detail if textual information needs to show in another area. This will be the child object for the above image object.

Sample Record:

Sample Image Object Record

Sample Image Detail Object Record

Getting Area Coordinates in Image:

MS-Paint will show correct co-ordinates of image area/section.

Apex Code to retrieve image and detail:

getAllImages : This method will return all image detail.

getImage : This will get public url for selected image info and its map location from image detail object.

LWC Code for building image map:

Below code will create clickable section on image. Number of clickable area is depend on image detail records for image.

CSS class .area is used to remove pointer events.

<template for:each={maps} for:item="map">
    <area key={map.Id}  data-item={map.Id} shape={map.Shape__c} coords={map.Coordinate__c} href='' target="_blank" class="area" onclick={handleMap}>
</template>               

On component load, all images will be loaded and stored in the combo-box. On selection of combo box, handleImageChange handler is called to get image detail. This will also show an image in the image section with clickable areas.

handleMap handler will handle click event of clickable area. If link url is present then it will open page/link in new tab. If link is for showing detail then it will show detail in new section.

Demo Video:

References:

https://www.w3schools.com/html/html_images_imagemap.asp

https://developer.salesforce.com/docs/component-library/documentation/lwc