4

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?

kboul
  • 13,836
  • 5
  • 42
  • 53
Lauren
  • 1,035
  • 1
  • 14
  • 32

1 Answers1

5

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

kboul
  • 13,836
  • 5
  • 42
  • 53
  • What do you mean by restarting the server in step 3? I reinstalled all the packages in the order you listed and I still get errors. `TS2339: Property 'BeautifyIcon' does not exist on type 'typeof' "../node_modules/@types/leaflet/index` – Lauren Aug 07 '18 at 17:21
  • I mean stop the server from the command line by pressing ctl + c or cmd + c on mac and then run ng serve again. I run everything locally and couldn't create a stackblitz cause does not play well with ngx-leaflet. – kboul Aug 07 '18 at 17:39
  • Ah. I did that and still no luck. I wonder if any of my other plugins are causing issues. Do you have any idea how to include `BeautifyMarker` in `@typeof`? – Lauren Aug 07 '18 at 17:59
  • I did not get any errors while I tried it. I will try to push the project to github for you to be able to see it and let you know because it was not possible to build it using stackblitz. It did not not play well with ngx-leaflet. – kboul Aug 07 '18 at 18:07
  • I made some small alterations and also included a [github link](https://github.com/kboul/beautify-marker). Please check it and let me know if it worked. – kboul Aug 07 '18 at 18:58
  • Okay, interesting development...when I started and entirely new project, your code worked fine. So there's something in my existing project that isn't working! – Lauren Aug 07 '18 at 19:22
  • No problem. As I received also this error at home in contrast with work's computer try replacing the first two lines with the new ones I provided to test as well. Also check the github project if you want. Please mark the answer as accepted if it helped you. – kboul Aug 07 '18 at 19:25
  • 1
    Oh, I didn't notice that change! I tried the new import style and it seems to be working. Thank you so much! – Lauren Aug 07 '18 at 19:34