angular-image-mapper

An Angular library with the ImageMapperComponent for displaying and interacting with clickable regions on images (e.g., clickable maps).

Installation

Install the library (if published on npm):

npm install angular-image-mapper-component

If locally:

1. Build the library with:

ng build angular-image-mapper-component

2. Add a path to tsconfig.json in the paths section pointing to dist/angular-image-mapper-component.

Usage

Import the component and types into your Angular module:

import { ImageMapperComponent, Area, Colors } from 'angular-image-mapper-component';

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

ImageMapperComponent

This component renders an image with interactive regions.

Input Parameters (inputs)

| Name | Required | Type | Description | |--------------|----------|----------------|--------------------------------------------------------------------------| | src | Yes | string | Image URL | | width | Yes | number | Image width | | height | No | number | Image height (optional) | | imgWidth | No | number | Actual source image width (for scaling coordinates) | | areas | Yes | Array<Area> | Array of regions to display | | colors | Yes | Colors | Colors for region states | | selected | No | Array<Area> | Regions selected by click | | preselected| No | Array<Area> | Regions preselected by default |

Output Events (outputs)

| Name | Required | Description | |------------------|----------|-------------------------------------------------| | onClick | No | Triggered on region click | | onMouseEnter | No | Mouse entering a region | | onMouseLeave | No | Mouse leaving a region | | onMouseMove | No | Mouse moving over a region | | onImageClick | No | Click on the image outside any region | | onImageMouseMove| No | Mouse moving over the image outside any region | | onLoad | No | Image loaded and ready |

Types

Area

export interface AreaBase {
  _id: string;
  name: string;
  coords: number[];
  shape?: string;
}

export type Area<T = {}> = AreaBase & T;

• coords is an array of numbers; coordinate format depends on shape.
• shape is shape type: 'circle', 'poly', 'rect'.

Colors

export interface Colors {
  defaultColor: string; // Default color
  hoverColor: string; // Hover color
  clickColor: string; // Click color
  activeColor: string; // Color for 'preselected' array
}

Usage Example

*module.ts

import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ImageMapperComponent, ImageMapperHelperAreaComponent } from 'angular-image-mapper-component';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [AppComponent],
  imports: [
    CommonModule,
    BrowserModule,
    ImageMapperComponent,
    ImageMapperHelperAreaComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

*component.ts

import { Component } from '@angular/core';

// src
import { areas, colors } from '../constants';
import { Area } from 'angular-image-mapper-component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  protected readonly areas = areas;
  protected readonly colors = colors;

  public imgUrl = 'body_front.svg';
  public selected: Array<Area> = []
  public preselected: Array<Area> = []

  onFocusArea (event: any): void {
    const areaIndex = this.selected.findIndex((area) => area._id === event.area._id)
    this.selected = areaIndex >= 0
      ? this.selected.filter((area) => area._id !== event.area._id)
      : this.selected.concat(event.area)
  }
}

*component.html

<app-image-mapper
  name="body-map"
  [src]="imgUrl"
  [areas]="areas"
  [colors]="colors"
  [width]="655"
  [selected]="selected"
  [preselected]="preselected"
  (onClick)="onFocusArea($event)"
 />

ImageMapperHelperComponent

A helper component designed to display the same image as the main ImageMapperComponent but allows users to draw shapes interactively by simple clicks on the image and immediately obtain their coordinates.

Usage

<app-image-mapper-helper-area
  name="body-map-helper"
  [src]="imgUrl"
  [width]="655"
/>

Thanks! @hardliner_s