Installation

From your angular project directory, run:

npm install --save @maplarge/ngx-maplarge

Setup

The MapLarge module and components are used to authenticate against and interact with a live MapLarge server. The following example outlines how you can integrate MapLarge into the root component of an angular app, app.component, however these steps can be performed from any child component.

1. Set up mapLargeServiceOptions in your app's environment:

   /src/environments/environment.ts

   
   export  const  environment = {
   	production:  false,
   	mapLargeServiceOptions: {
   		serverUri:  "http://my.maplarge.server",
   		username:  "[email protected]",
   		password:  "password1"
   	}
   };
   

2. Import MapLargeModule to root or feature module in your Angular app, and add a provider to specify environment configuration:

   /src/app/app.module.ts

   import { MapLargeModule } from  '@maplarge/ngx-maplarge';
   
   ...
   
   @NgModule({
   	imports: [MapLargeModule],
   	providers: [
   		{provide:  MapLargeInitOptions, useValue:  environment.mapLargeServiceOptions}
   	]
   })
   

Add a dashboard to a component

Add the MapLarge-Dashboard component to your template /src/app.component.html

<maplarge-dashboard  id="your-maplarge-dashboard-id">
	<scope-bindings>
		<scope-binding  path="scopePath" [(value)]="angularComponentVariable"></scope-binding>
	</scope-bindings>
</maplarge-dashboard>

scope-bindings Scope Bindings are optional parameters that can be configured with a dashboard component declaration to two-way bind variables in your angular component directly to MapLarge scope variables.

Interact directly with the MapLarge JS API

In addition, or alternatively, you can interact directly with the MapLarge Javascript API via the 'ml' instance.

/src/app.component.ts

import { MapLargeService } from  '@maplarge/ngx-maplarge';

export class AppComponent implements OnInit{

  constructor(
    private  mlsvc: MapLargeService
  ) {}
   
  ngOnInit() {
    this.mlsvc.ready((ml) => {
		  console.log("MapLarge Ready", ml);
	  })
    .catch((err: any) => {
      console.log("Error initializing MapLarge Service.", err);
    });
   }
}