ng-leaflet-universal
NgLeafletUniversal
NgLeafletUniversal is an open source Angular module that extends and simplifies the Leaflet implementation for Angular.
Server side rendering (SSR) support
One of the principals problems when you are using Leaflet’s maps in your Angular application is the configuration for SSR. This library contains all the required configuration for been integrated with your Angular Universal application.
Installation
You can install this library via npm using the next command on your project
npm i ng-leaflet-universal
Implementation
After installing, import the module in your application:
import { NgLeafletUniversalModule } from "ng-leaflet-universal";
imports: [
...
NgLeafletUniversalModule
],
Add the leaflet css to your angular.json:
"styles": [
"./node_modules/leaflet/dist/leaflet.css",
"src/styles.css"
],
Basic template implementation:
<div class="map-wrapper">
<ng-leaflet-universal></ng-leaflet-universal>
</div>
It’s up to you adding this styles.
.map-wrapper {
position: relative;
width: 300px;
height: 300px;
}
Add marker to your map using the updateMarkers function in your own component
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MapComponent } from 'ng-leaflet-universal';
import { Marker } from 'ng-leaflet-universal/lib/models/marker.interface';
@Component({
selector: 'app-custom-component',
templateUrl: './custom-component.component.html',
styleUrls: ['./custom-component.component.scss'],
})
export class CustomComponentComponent implements AfterViewInit {
@ViewChild(MapComponent) mapComponent: MapComponent;
markers: Marker[];
constructor() {
this.markers = [];
}
ngAfterViewInit(): void {
this.mapComponent.updateMarkers(this.markers);
}
Once you set or update your marker list using the updateMarkers function, the map will set the view on the center of your markers collection automatically.
Elements / components
Markers
We provide you an marker component that you can use for setting your locations easily, setting the location point (Latitude and Longitude) and the icon you would like to show into it.
Model: Key | Type | Definition
-
icon string Url of icon or image you want to show in your marker. location Location: { latitude: string, longitude: string } The specific location where your marker will be showed. card MarkerCard The card that will be open when a user click on your marker.
Example:
myMarker: Marker = {
id: "abc123",
icon: "https://picsum.photos/200/200",
location: {
latitude: -81.1288,
longitude: -81.4579,
},
card: myMarkerCard,
};
Marker Cards
This library contains a card component that you can customize and adapt to your own needs. These cards will be open when you click in your markers. Every single element in this cards includes several parameters that allows you customize that element’s style, and a class param that you can use for setting your own css class.
Model: | Key | Type | Definition |–|–|– |image | CardImage | Specify the main image of the card |title | CardText | Show a title into the card |subtitle | CardText | Show a subtitle into the card |address |CardText | Show the address of the lacation |content |CardText | An html that will be rendered into the card |cardStyle | CardStyle | An object that define (By params) the way your card will look |callToActions | CardCallToAction[] | A collection that indicate the buttons will be shown in the card |customStyleClass |string | A css class that allows you to set your own style rules for your cards |customHtml |string | A custom html string that you can use to replace the default card structure and define everything you want in the card
Example:
card: {
image: { url: 'https://picsum.photos/200/200' },
title: { text: 'The place', customStyleClass: 'awesome-title' },
subtitle: { text: 'The best place' },
content: { text: '<p> This is the content that will be used in the <b> card </b> </p>' },
address: { text: 'Neverland, NM 88203' },
callToActions: [
{
text: 'View details',
link: 'https://myawesomeapp.domain/Location-1',
customStyleClass: 'my-details-button'
},
{
text: 'Directions',
backgroundColor: '#007319',
textColor: '#fff',
link: `https://www.google.com/maps/@-81.1288,-81.4579,18.13z`,
icon: 'fas fa-directions'
}
],
customStyleClass: 'custom-card-style'
}
Route
Finds the fastest route between coordinates in the supplied order.
Options: RouteOptions
| Option | Values | Descriptions
|–|–|–
|alternatives | true , false (default), or Number | Search for alternative routes. Passing a number alternatives=n searches for up to n alternative routes.
|steps | true , false (default) | Returned route steps for each route leg
|annotations | true , false (default) | Returns additional metadata for each coordinate along the route geometry.
|geometries |polyline (default), polyline6 , geojson | Returned route geometry format (influences overview and per step)
|overview |simplified (default), full , false | Add overview geometry either full, simplified according to highest zoom level it could be display on, or not at all.
Example:
use the getRoute function in your own component
Params
| Option | Values | Descriptions |
|---|---|---|
| form | Location - { latitude: number, longitude: number } |
Specify the source location. |
| to | Location - { latitude: number, longitude: number } |
Specify the destination location. |
| options | RouteOptions | Specify options. |
| transportation | Transportation - CAR - default, FOOT, BIKE |
Specify the mode of transportation |
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MapComponent } from 'ng-leaflet-universal';
import {
ROUTE_GEOMETRIE,
ROUTE_OVERVIEW,
} from 'ng-leaflet-universal/lib/models/route-options.interface';
@Component({
selector: 'app-custom-component',
templateUrl: './custom-component.component.html',
styleUrls: ['./custom-component.component.scss'],
})
export class CustomComponentComponent implements AfterViewInit {
@ViewChild(MapComponent) mapComponent: MapComponent;
ngAfterViewInit(): void {
this.mapComponent.getRoute(
{
latitude: 13.388860,
longitude: 52.517037,
},
{
latitude: 13.397634,
longitude: 52.529407,
},
{
steps: true,
overview: ROUTE_OVERVIEW.FALSE,
annotations: false,
geometries: ROUTE_GEOMETRIE.POLYLINE,
alternatives: 2,
}
).subscribe((res) => {
console.log(res);
});
}