Example to illustrate how to use leaflet-responsive-popup in Angular @asymmetrik/ngx-leaflet
- clone this repository with
git
cd ngx-leaflet-responsive-popup
npm install
npm start
- visit http://localhost:4200
ng new ngx-leaflet-responsive-popup
Update package.json
{
...
"devDependencies": {
...
"@asymmetrik/ngx-leaflet": "~5.0.1",
"leaflet": "^1.3.1",
"leaflet-responsive-popup": "^0.6.3",
...
}
...
}
If you are using Angular CLI, you will need to add the Leaflet CSS files to the styles array contained in angular.json
{
...
"styles": [
"styles.css",
"./node_modules/leaflet/dist/leaflet.css",
"./node_modules/leaflet-responsive-popup/leaflet.responsive.popup.css"
],
...
}
cd ngx-leaflet-responsive-popup
npm install
For example, in your app.module.ts
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
...
imports: [
...
LeafletModule
]
...
in app.component.html
<div style="height: 300px;"
leaflet
[leafletOptions]="options">
</div>
in app.component.ts
import { Component } from '@angular/core';
import { latLng, marker, tileLayer } from 'leaflet';
import { responsivePopup } from 'leaflet-responsive-popup';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'ngx-leaflet-responsive-popup';
aPopup = responsivePopup().setContent('A pretty CSS3 responsive popup.<br> Easily customizable.');
aMarker = marker([46.879966, -121.726909]).bindPopup(this.aPopup);
options = {
layers: [
tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' }),
this.aMarker
],
zoom: 5,
center: latLng(46.879966, -121.726909)
};
}
npm start