Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (areamap-pck) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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