Areamap design

The areamap design library provides a set of tools and components for integrating interactive area plan design into Angular applications.

Stackblitz Example

https://stackblitz.com/edit/areamap-design

Output Screenshot

Basic Usage - Local Files

<nh-areamap-design 
  [enableZoom]="true"
  [readOnly]="true"
  [borderColor]="'red'" 
  [selectedPinColor]="'yellow'" 
  [defaultPinColor]="'red'"
  [viewCords]="true"
  [enablePinTooltip]="true"
  [defaultAreaPlan]="'./assets/white-background-500x500.jpg'"
  [areaPlan]="'assets/F43.pdf'"
  [pins]="pinlist"
  (pinChanged)="onpinSelected($event)"
  (createdPin)="onPinCreated($event)"
  ></nh-areamap-design>

Overview

• Install
• Usage
• Options

Install

Angular >= 10

npm install areamap-design

Partial Ivy compilated library bundles.

Usage

Add AreamapDesignModule to your module's imports

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

import { AreamapDesignModule} from 'areamap-design';

@NgModule({
  imports: [BrowserModule, AreamapDesignModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

And then use it in your component

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

@Component({
  selector: 'app-base',
  template: `
  <nh-areamap-design 
  [enableZoom]="true"
  [readOnly]="true"
  [borderColor]="'red'" 
  [selectedPinColor]="'yellow'" 
  [defaultPinColor]="'red'"
  [viewCords]="true"
  [enablePinTooltip]="true"
  [defaultAreaPlan]="areaplan"
  [areaPlan]="'assets/F43.pdf'"
  [pins]="pinlist"
  (pinChanged)="onpinSelected($event)"
  (createdPin)="onPinCreated($event)"
  ></nh-areamap-design>`
})
export class AppComponent {
  areaplan= "http://www.worldplumbing.org/wp-content/uploads/2016/11/white-background-500x500.jpg";
  pinlist = [{location: {x: 200, y: 200}, color: 'pink', name: 'Pin 1'}];

  onpinSelected(args) {
    console.log(args, 'pin selected')
  }

  onPinCreated(args) {
    console.log(args, 'pin created')
  }
}

Options

• [enableZoom]
• [readOnly]
• [borderColor]
• [selectedPinColor]
• [defaultPinColor]
• [viewCords]
• [enablePinTooltip]
• [defaultAreaPlan]
• [areaPlan]
• [pins]
• (pinChanged)
• (createdPin)

[enableZoom]

| Property | Type | Required | | --- | ---- | --- | | [enableZoom] | boolean | Required |

Allow zoom areamap

[enableZoom]="true"

[readOnly]

| Property | Type | Required | | --- | ---- | --- | | [readOnly] | boolean | Optional, default = false|

Readonly areamap if user don't want any integration with in

[readOnly]="true"

[borderColor]

| Property | Type | Required | | --- | ---- | --- | | [borderColor] | string | Required|

Border color for the pin on areamap

[borderColor]="'red'"

[selectedPinColor]

| Property | Type | Required | | --- | ---- | --- | | [selectedPinColor] | string | Required|

User selected pin color for the pin on areamap

[selectedPinColor]="'yellow'"

[defaultPinColor]

| Property | Type | Required | | --- | ---- | --- | | [selectedPinColor] | string | Required|

User default pin color for the pin on areamap

[defaultPinColor]="'gray'"

[viewCords]

| Property | Type | Required | | --- | ---- | --- | | [viewCords] | boolean | Required |

Enable to View X and Y coordinate of areamap

[viewCords]="true"

[enablePinTooltip]

| Property | Type | Required | | --- | ---- | --- | | [enablePinTooltip] | boolean | Required |

Enable hover tooltip of pin

[enablePinTooltip]="true"

[defaultAreaPlan]

| Property | Type | Required | | --- | ---- | --- | | [defaultAreaPlan] | string | Required |

Pass areamap default plan

[defaultAreaPlan]="'./assets/map-default.pdf'"

[areaPlan]

| Property | Type | Required | | --- | ---- | --- | | [areaPlan] | string | Required |

Actual areamap plan

[areaPlan]="'./assets/map-23.pdf'"

[pins]

| Property | Type | Required | | --- | ---- | --- | | [pins] | Array | Optional |

List of pins that user want to plot on areaplan

pinList = [
     {  location: 
         { x: 200, y: 200}, 
         color: 'pink',  
         name: 'Pin 1'
     }
  ];

(pinChanged)

| Property | Type | Required | | --- | ---- | --- | | (pinChanged) | callback | Optional |

Selected pin changed handling callback

Define callback in your component's class

onPinSelected(args: any) {
  // do anything
}

Then add it to nh-areamap-design in component's template

(error)="onPinSelected($event)"

(createdPin)

| Property | Type | Required | | --- | ---- | --- | | (createdPin) | callback | Optional |

New pin created handling callback

Define callback in your component's class

onPinCreated(args: any) {
  // do anything
}

Then add it to nh-areamap-design in component's template

(createdPin)="onPinCreated($event)"

License

MIT © Narendra Hinge