Angular-leaflet NPM

angular-leaflet

Collection of angular components to build map views faster and with minimal configuration using the most popular library LeafletJS.

Instalation

npm install --save angular-leaflet

Usage

Import NglCoreModule to root or feature module in your angular app.

@NgModule({ 
  imports: [NglCoreModule]
})  
export class AppModule { }

NglCoreModule contains base component <app-leaflet> and classes:

BaseLayer - required to create custom layer and use inside core component
MapHandler - required to create map handler class
LayerHandler - required to create layer handler class

<app-leaflet [options]="options">
  <app-tile-layer></app-tile-layer>
  <app-feature-group>
    <app-polyline [coordinates]="coordinates | async" [options]="pathOptions | async"></app-polyline>
    <app-marker [latLng]="[51.759445, 19.457216]"></app-marker>
    <app-polygon [coordinates]="[[51.7894, 19.4972], [51.750, 19.435], [51.731, 19.471]]"
                 [options]="pathOptions | async"></app-polygon>
    <app-rectangle [bounds]="latLngBounds | async" [options]="pathOptions | async"></app-rectangle>
    <app-circle [center]="center | async" [radius]="1000" [options]="pathOptions | async"></app-circle>
  </app-feature-group>
</app-leaflet>

Table with available submodules

Name	Description	Components
`NglImageOverlayModule`	Contains component to display image as a base layer. Also required to set `crs` in map options to `CRS.Simple`.	`<app-image-overlay>`
`NglTileLayerModule`	Contains component to display tiles as a base layer. At this moment, OpenStreetMap is a provider of tiles.	`<app-tile-layer>`
`NglMarkerModule`	Contains component to display Marker layer on map.	`<app-marker`
`NglVectorsModule`	Contains layers based on vectors such as Polyline, Polygon, Circle and Rectangle.	`<app-polyline>`, `<app-polygon`, `<app-rectangle>`, `<app-circle>`
`NglGroupsModule`	Contains group-like layers.	`<app-feature-group>`