README

@smartmaps/Li-Lib

GeoSolutions Library for Angular Components

Installation

npm install --save-dev @smartmaps/li-lib

yarn add --dev @smartmaps/li-lib

Js-Api Dependencies

The Library needs (currently) an attached js-api script tag in the hosting Application:

<script src="https://www.yellowmap.de/api_rst/api/loader?apiKey={InsertYourApiKeyHere};libraries=free-3"></script>

A free library key is fully sufficient, enterprise does work too.

Documentation

Integration in AppModule

The LI-Library uses NGRX Store as state pattern. The library uses feature modules from the ngrx store. Currently you will have to implement you own root store in your implementing application.

The minimum implementation for creating the root store is:

@NgModule({
    declarations: [],
    imports: [
        StoreModule.forRoot({}),
        EffectsModule.forRoot(),
    ]
})
export class AppStoreModule {}

To use the GIS-Module in your Application you need to register the LiModule with the forFeature() method in your Module.

@NgModule({
    declarations: [],
    imports: [LiModule.forFeature()],
    providers: [
        {
            provide: MAP_SETTINGS,
            useValue: environment.mapSettings
        }
    ],
    exports: [LiModule] // only need if you don't add the LiModule to your Root Application Module
})
export class MapModule {}

Use Map Component:

The Map Component is accessible with the tag. Currently the map initializes automatically on loading with the location of Karlsruhe. To define you own initialize routine (with a specific location) you need to use the autoInitialize Property:

<div>
    <lilib-map [autoInitialize]="false"></lilib-map>
</div>

Use MapServices => Initialize the Map

To initialize/load the map with a specific location (center positon with lat/lng or a rectangular with NorthEast/SouthWest position) you can use the methods of the MapService defined in the library:

import { MapService, LatLng, LatLngBoundsImpl } from '@smartmaps/li-lib';
@Component({
    templateUrl: './main-page.component.html',
    styleUrls: ['./main-page.component.scss'],
})
export class MainPageComponent implements OnInit {
    header = 'Maps Demo';

    description = 'A Map should be drawn after initialize it';

    initializeWithBounds = false;

    northEast: LatLng = { lat: 52, lng: 16 };
    southWest: LatLng = { lat: 49, lng: 4 };

    constructor(private mapService: MapService) {}

    ngOnInit(): void {}

    initializeMap() {
        if (this.initializeWithBounds) {
            const bounds = new LatLngBoundsImpl(this.southWest, this.northEast);

            this.mapService.initializeWithBounds(bounds);
        } else {
            const center = { lat: 51.556581978349755, lng: 8.140869140625002 };

            this.mapService.initialize({
                center,
                zoom: 6,
            });
        }
    }
}

Use MapEventService => Get Maps State

To get the current position of the Map you can subscribe to the Observable Events in the MapEventService:

import { Component, OnInit } from '@angular/core';

import { MapEventService } from '@smartmaps/li-lib';

@Component({
    selector: 'app-event-container',
    templateUrl: './event-container.component.html',
    styleUrls: ['./event-container.component.scss'],
})
export class EventContainerComponent implements OnInit {
    events: string[] = [];

    constructor(private mapEventService: MapEventService) {}

    ngOnInit(): void {
        this.mapEventService.onClick.subscribe((e) => this.addToEvents(e));
        this.mapEventService.onMove.subscribe((e) => this.addToEvents(e));
        this.mapEventService.onResize.subscribe((e) => this.addToEvents(e));
        this.mapEventService.onZoom.subscribe((e) => this.addToEvents(e));
    }
}

Version History

0.3.0

added Map Options

Its now possible to customize the options parameter when initializing the map. The parameters for the options object are documented at the smartmaps docu page

Reminder

The Library will change/update in the near future and is currently in beta state!

Usage no npm install needed!