areamap-pck
v1.0.0
Published
**The areamap design library provides a set of tools and components for integrating interactive area plan design into Angular applications.**
Downloads
12
Maintainers
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
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
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)"