❤
npm
Sign UpSign In

angular-leaflet
TypeScript icon, indicating that this package has built-in type declarations

0.0.17 • Public • Published

angular-leaflet

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

npm version Build Status

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.

Readme

Keywords

none

Package Sidebar

Install

npm i angular-leaflet

Weekly Downloads

109

Version

0.0.17

License

none

Unpacked Size

447 kB

Total Files

89

Last publish

Collaborators

  • kklimczak
Try on RunKit
Report malware