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>

Examples

example-app - contains a angular5 app with angular-leaflet library example usage.

Issues

Feel free to create issue with your problem.