Dynamic Image Map in Salesforce Lightning

Images are best to showcase products or brands on websites. These images can be divided into multiple sections using an image map 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 Name

Name

Text(80)

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.

Name	API	Type
Coordinate	Coordinate__c	Text(50)
Detail	Detail__c	Text(255)
Image	Image__c	Master-Detail(Image)
Image Detail Numbe	Name	Auto Number
LinkUrl	LinkUrl__c	URL(255)
Shape	Shape__c	Picklist Values: default, rect, poly, circle

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:

HTML Image Map

Related Posts

• How to Use Image Cropper in Salesforce Lightning Web Component
• Configurable Record Picker in Lightning Web Component
• Displaying Tabular Data with GraphQL in Lightning Web Component
• Export Data from Lightning Web Component to Excel Sheet
• Generate PDF using jsPDF in Lightning Web Component
• Custom Image Slider in Lightning Web Component
• File Related List in Lightning Web Component
• Stop deselecting lightning-dual-listbox list
• Adding table row dynamically in Lightning Web Component