Responsive Image Maps

A responsive image map Angular directive that updates the areas' coordinates according to the image size.

It will manage all shapes (rect, circle and poly).

This library was generated with Angular CLI version 12.2.0.

Index

- Installation
- Use
- The Map Directive
- The Map public Properties, Getters and Methods
- The MapSize Type
- The Area Directive
- The Area public Properties, Getters and Methods
- The AreaSize Type
- Working Example

Installation

1. Install npm package:

npm install @a11y-ngx/responsive-image-maps --save

2. Import A11yResponsiveImageMapsModule into your module or standalone component:

``typescript
import { A11yResponsiveImageMapsModule } from '@a11y-ngx/responsive-image-maps';

@NgModule({
declarations: [...],
imports: [
...
A11yResponsiveImageMapsModule,
],
})
export class AppModule { }
`

Use

Add an image with a map in your template.

$3

- The Map directive will pick any

#### Map Directive public Properties, Getters and Methods

| Property | Type | Returns | Description |
|:---------|:-----|:--------|:------------|
| loaded | BehaviorSubject | boolean | Will return true when the image has been loaded |
| sizeChanged | EventEmitter | MapSize | Will emit the new image's size & position when page resize and it changes the width and height values |
| areas | QueryList | ResponsiveImageAreaDirective | To access all children directives |
| scaleFactor | get | { width: number, height: number } | The scale factor from the image's original full size and the resized size |
| imageSize | MapSize | object | To access all the values (size & position) from the main image |
| nativeElement | get | HTMLMapElement | To access the HTML

#### The MapSize Type

| Property | Type | Description |
|:---------|:----:|:------------|
| top | number | The image DOMRect's top value |
| left | number | The image DOMRect's left value |
| width | number | The image DOMRect's width value |
| height | number | The image DOMRect's height value |
| fullWidth | number | The image's original full width size (resized or not) |
| fullHeight | number | The image's original full height size (resized or not) |

$3

- The Area directive will pick any tag with [shape] and [coords] attributes.
- This directive will manage the area size (either relative to the image or to the viewport).
- Each directive can be accessed:
- Using a template variable through the exported name of responsiveImageArea.
- From the Map directive through the areas property, which will return a QueryList.
- The HTML element can be reached through the nativeElement property.

#### Area Directive public Properties, Getters and Methods

| Property | Type | Returns | Description |
|:---------|:-----|:--------|:------------|
| areaSize | AreaSize | object | To access all the values (size & position) from the area (relative to the image) |
| nativeElement | get | HTMLAreaElement | To access the HTML element |
| getBoundingClientRect() | method | DOMRect | To get the calculated position of the element (relative to the viewport) |
| updateCoords() | method | void | Will update the [coords] attribute based on the image size. _(NOTE: there's no need to trigger this manually, the map directive will update when needed)_ |

#### The AreaSize Type

| Property | Type | Description |
|:---------|:----:|:------------|
| top | number | The area's (relative to image) top value |
| left | number | The area's (relative to image) left value |
| width | number | The area's width value |
| height | number | The area's height value |

Working Example

TypeScript

`typescript
import { ResponsiveImageMapDirective, MapSize, AreaSize } from '@a11y-ngx/responsive-image-maps';

@Component({ ... })
export class MyComponent {
@ViewChild('imageMap') imageMap: ResponsiveImageMapDirective;

updateOtherElements(newSize: MapSize): void {
const width = newSize.width;
const height = newSize.height;
...

this.imageMap.areas.forEach(area => {
const areaElement = area.nativeElement;
const areaSize: AreaSize = area.areaSize;
...
});
}

updateMapSizes(): void {
this.imageMap.update();
}
}
`

HTML

`html



``