Image Map dynamic resize in Angular 8

Question

I want to dynamically resize an image map. I only found a solution for jQuery (https://github.com/stowball/jQuery-rwdImageMaps)

How can I realize this in Angular?

Answer 1

you can use https://github.com/davidjbradshaw/image-map-resizer It works with javascript call :

sample

in HTML :

 <img src="...." width="100%"  usemap="#usaMap" (load)="imageResized();">

in TS :

declare function imageMapResize(): void;

@Component({...

})
...
imageResized() {
  imageMapResize(); // Javascript function in imageMapResizer.min.js 
}

Answer 2

Previous answer works, however, you have to download the imageMapResizer.min.js into the assets folder.

Then, you should import it in the index.html file like this:

<script src="./assets/imageMapResizer.min.js"></script>

I thought that the file should be imported in the angular.json file, but it didn't work ... index.html did the trick for me.