Add BeautifyMarker plugin to ngx-leaflet project

Question

I am currently unable to integrate the BeautifyMarker plugin with the ngx-leaflet Angular 2 package.

I have followed the install instructions for BeautifyMarker alongside the ngx-leaflet plugin instructions with no luck.

I used npm install to grab BeautifyMarker, Font Awesome, and already had Bootstrap installed. Leaflet is also already added and configured properly per the ngx-leaflet official tutorial.

I edited my angular-cli.json file to include the BeautyMarker .css and .js files, like so:

"styles": [
    "styles.css",
    "../node_modules/leaflet/dist/leaflet.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/beautifymarker/leaflet-beautify-marker-icon.css"
],
"scripts": [
    "../node_modules/leaflet/dist/leaflet.js",
    "../node_modules/beautifymarker/leaflet-beautify-marker-icon.js",
], ...

I also imported the package entirely, as it extends L, like so:

import * as L from 'leaflet';
import 'beautifymarker';

That didn't work, so I also tried:

import * as L from 'leaflet';
import '../../node_modules/beautifymarker/leaflet-beautify-marker-icon.js';

Also tried omitting the import altogether, a la the heatmap.js plugin. None of these allow me to access L.BeautifyIcon.

Any tips?

Answer 1

I took some time to investigate your issue.

What I did was:

1. installed leaflet, @asymmetrik/ngx-leaflet & @types/leaflet
2. installed bootstrap, font-awesome, beautifymarker & add them to angular.json
3. restarted server as the watchers are only for the src folder and angular-cli.json is not observed for changes to render font-awesome

angular.json

"styles": [
   "node_modules/leaflet/dist/leaflet.css",
   "node_modules/bootstrap/dist/css/bootstrap.css",
   "node_modules/font-awesome/css/font-awesome.css",
   "node_modules/beautifymarker/leaflet-beautify-marker-icon.css",
   "src/styles.css"
],
"scripts": [
    "node_modules/leaflet/dist/leaflet.js",
    "node_modules/beautifymarker/leaflet-beautify-marker-icon.js"
]

app.module.ts

import { LeafletModule } from '@asymmetrik/ngx-leaflet';
..
imports: [
   ..,
   LeafletModule.forRoot()
],

app.component.ts

// import * as L from 'leaflet';
// import 'beautifymarker';

// instead of the above try
import 'leaflet';
import 'beautifymarker';
declare let L;

options = {
    layers: [
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18, attribution: '...' }
        )
    ],
    zoom: 12,
    center: L.latLng(46.879966, -121.726909)
};

beautifyOptions = {
    icon: 'plane',
    borderColor: '#8D208B',
    textColor: '#8D208B',
    backgroundColor: 'transparent'
};

layers = [
    L.marker([ 46.879966, -121.726909 ], {
        icon: L.BeautifyIcon.icon(this.beautifyOptions)
    })
];

template

<div style="height: 500px;"
    leaflet 
    [leafletOptions]="options"
    [leafletLayers]="layers">
</div>

Demo