YAGA leaflet-ng2 is a granular implementation of the popular Leaflet framework into the model view view controller (MVVC) of Angular2 and it is fully compatible with the newest version of Angular 4. It provides a directive for every Leaflet class that belongs to the user interface by inheriting the original Leaflet class and enhancing it with the decorators of Angular and glue-code. With this approach the directives are still extensible and it is possible to write the structure of an app in a descriptive way in a well known markup language, HTML5. This is why you mainly need HTML skills for creating a template based geo-app with leaflet-ng2.
It is easy to enhance this library with one’s own Angular modules, because of its modular structure. It is even possible to use the already existing Leaflet plugins on top, because the implementation also detects changes that were made in Leaflet and bind them to Angular’s data model.
The YAGA Development-Team gives a great importance to tests, test-coverage, documentation, examples and getting started templates.
Note: This is just a release candidate!
First you have to install this library from npm:
npm install --save @yaga/leaflet-ng2This module works like a normal Angular 2 module. You should do something like that:
import { YagaModule, OSM_TILE_LAYER_URL } from '@yaga/leaflet-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();
@Component({
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;
}
@NgModule({
bootstrap: [ AppComponent ],
declarations: [ AppComponent ],
imports: [ BrowserModule, YagaModule ]
})
export class AppModule { }
document.addEventListener('DOMContentLoaded', () => {
platform.bootstrapModule(AppModule);
});Do not forget to import the leaflet css!
After that you should be able to use the following directives or components:
yaga-mapThis must be the root component!yaga-attribution-controlyaga-circleyaga-circle-markeryaga-div-iconyaga-geojsonyaga-iconyaga-image-overlayyaga-markeryaga-polygonyaga-polylineyaga-popupyaga-rectangleyaga-scale-controlyaga-tile-layeryaga-tooltipyaga-zoom-control
For further information look at the api documentation or the examples.
For developing we recommend to use a command-line-interface like angular-cli for
web-applications or ionic for smartdevice-like apps.
You can also check out our ionic-starter templates on our GitHub account
You have to perform the followings steps to start a project with the angular-cli:
# Install the angular-cli to your system
npm install -g angular-cli
# Create a app with the angular-cli
ng new my-yaga-app
# Switch into the created project directory
cd my-yaga-app
# Install @yaga/leaflet-ng2 as project dependency
npm install --save @yaga/leaflet-ng2Import the YAGA module into your app in app.module.ts:
// other imports...
import { YagaModule } from '@yaga/leaflet-ng2';
// ...
@NgModule({
imports: [
// other...
YagaModule,
],
// some other properties...
)
export class AppModule { }You have to perform the followings steps to start a project with the ionic-cli:
# Install the ionic-cli to your system
npm install -g ionic
# Create a app with the ionic-cli (select a template unteractive)
ionic start my-yaga-app
# Switch into the created project directory
cd my-yaga-app
# Install @yaga/leaflet-ng2 as project dependency
npm install --save @yaga/leaflet-ng2Import the YAGA module into your app in app.module.ts:
// other imports...
import { YagaModule } from '@yaga/leaflet-ng2';
// ...
@NgModule({
imports: [
// other...
YagaModule,
],
// some other properties...
)
export class AppModule { }Scripts registered in package.json:
init: Install all stuff needed for development (Typings, libs etc.)clean: Remove the stuff from init-taskreinit: Call clean and inittranspile: Transpile TypeScript Code to JavaScriptlint: Use the linter for TypeScript Codetest: 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.
This library is released under the ISC License.