Package Exports

areamap-design
areamap-design/package.json

Readme

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

output

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>

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