Dynamic Image Map in Salesfore LWC

imageMap.css

.area
{
    pointer-events:none;
}

imageMap.html

<template>
    <lightning-layout vertical-align="top" horizontal-align="spread">
        <lightning-layout-item size="8" flexibility="auto" padding="around-small">
            <lightning-card title="Dynamic Image Map" icon-name="action:record">
                <lightning-combobox
                name="progress"
                label="Image"
                value={selectedImage}
                options={selectOptions}
                onchange={handleImageChange}></lightning-combobox>
                <img src={downloadUrl} alt="SalesforceCodex- Image Map" usemap="#maptest">
                
                <template if:true={maps}>
                    <map name="maptest">
                    <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>
                    </map>
                </template>
                </lightning-card>
        </lightning-layout-item>
        <lightning-layout-item size="4" flexibility="auto" padding="around-small">
            <lightning-card title="Show Detail" icon-name="action:record">
                <template if:true={detail}>
                    <div>
                        {detail}  
                    </div>
            </template>
            </lightning-card>
        </lightning-layout-item>
    </lightning-layout>
</template>

imageMap.js

import { LightningElement,wire,track } from 'lwc';
import getAllImages from '@salesforce/apex/ImageMapController.getAllImages';
import getImage from '@salesforce/apex/ImageMapController.getImage';

export default class ImageMap extends LightningElement {
    selectOptions=[];
    maps=[];
    @track imageUrl;
    downloadUrl;
    error;
    selectedImage;
    detail;
    
    handleMap(e){
        var itemId = e.target.dataset.item;
        e.preventDefault();
        
        var items=this.maps.filter(m=>m.Id==itemId);
        if(items!=undefined)
        {
            var item=items[0];
            if(item.LinkUrl__c!=undefined)
            {
                var win = window.open(item.LinkUrl__c, '_blank');
                win.focus();
            }
            else
            {
                this.detail=item.Detail__c;
            }
        }
    };

    @wire(getAllImages)
    lists({ error, data }) {
        if (data) {
            for(const list of data){
                const option = {
                    label: list.Name,
                    value: list.Id
                };
                this.selectOptions = [ ...this.selectOptions, option ];
            }
        } else if (error) {
            console.error(error);
        }
        this.isLoaded=true;
    }
    handleImageChange(e)
    {
        getImage({id: e.detail.value})
        .then((data,error) => {
            if (data) {
                this.imageUrl=data.PublicUrl;
                this.downloadUrl=data.DownloadableUrl;
                this.maps = data.Details;
                console.log(JSON.stringify(data));
            } else if (error) {
                this.error = error;
                console.log('Error:'+ JSON.stringify(error));
                this.isLoaded=true;
            }
        });
    }
}

imageMap.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>