• Public
  • Public/Protected
  • All


Yaga - leaflet-ng2

Build Status Coverage Status

Angular 2 module for Leaflet. This module serves components and directives for Leaflet in Angular2.

Note: This is just a release candidate! Some TypeScript tyings are self written and have to be merged to DefinitlyTyped.

How to use

First you have to install this library from npm:

npm install --save @yaga/leaflet-ng2

This module works like a normal angular 2 module. You should do something like that:

import { YagaModule, OSM_TILE_LAYER_URL }   from '@yaga/leflet-ng2';
import { Component, NgModule, PlatformRef } from '@angular/core';
import { BrowserModule }                    from '@angular/platform-browser';
import { platformBrowserDynamic }           from '@angular/platform-browser-dynamic';

const platform: PlatformRef = platformBrowserDynamic();

    selector: 'app',
    template: `<yaga-map><yaga-tile-layer [(url)]="tileLayerUrl"></yaga-tile-layer></yaga-map>`
export class AppComponent {
    // Your logic here, like:
    public tileLayerUrl: string = OSM_TILE_LAYER_URL;

    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports:      [ BrowserModule, YagaModule ]
export class AppModule { }

document.addEventListener('DOMContentLoaded', () => {

Do not forget to import the leaflet css!

After that you should be able to use the following directives or components:

  • yaga-map This must be the root component!
  • yaga-attribution-control
  • yaga-circle
  • yaga-circle-marker
  • yaga-div-icon
  • yaga-geojson
  • yaga-icon
  • yaga-image-overlay
  • yaga-marker
  • yaga-polygon
  • yaga-polyline
  • yaga-popup
  • yaga-rectangle
  • yaga-scale-control
  • yaga-tile-layer
  • yaga-tooltip
  • yaga-zoom-control

For further information look at the examples

Scripts Tasks

Scripts registered in package.json:

  • init: Install all stuff needed for development (Typings, libs etc.)
  • clean: Remove the stuff from init-task
  • reinit: Call clean and init
  • transpile: Transpile TypeScript Code to JavaScript
  • lint: Use the linter for TypeScript Code
  • npm-lint: Lint the npm-package
  • test: Run software- and coverage-tests in node.
  • browser-test: Build the tests for the browser.
  • build-examples: Build the examples.
  • doc: Build the API documentation.
  • dependency-check: Check for outdated dependencies.

Generated using TypeDoc