What is the process for importing an untyped Leaflet plugin into an Angular application?

Question

What is the process for importing an untyped Leaflet plugin into an Angular application?

I am trying to incorporate the leaflet plugin leaflet-mapwithlabels into my angular project. However, the library does not provide an option for NPM installation. After following some guides, I attempted adding the JS file directly to the node-modules in its own folder and then importing it into my component like this:

import * as L from 'leaflet';
import {GeoJSON} from "leaflet";
import "node_modules/leaflet-mapwithlabels/dist/leaflet-mapwithlabels.js"

and including it in my angular.json file:

            "styles": [
              "@angular/material/prebuilt-themes/azure-blue.css",
              "./node_modules/leaflet/dist/leaflet.css",
              "./node_modules/leaflet-mapwithlabels/dist/leaflet-mapwithlabels.css",
              "src/styles.scss"
            ],
            "scripts": [
              "./node_modules/leaflet/dist/leaflet.js",
              "./node_modules/leaflet-mapwithlabels/dist/leaflet-mapwithlabels.js"
            ]

and referencing it here:

  private map!: L.MapWithLabels;

Unfortunately, this approach did not work as expected. Any guidance on how I can successfully include it would be greatly appreciated.

Here is some relevant information:

package.json:

  "devDependencies": {
    "@angular-devkit/build-angular": "^18.2.1",
    "@angular/cli": "^18.2.1",
    "@angular/compiler-cli": "^18.2.1",
    ...
  "dependencies": {
    ...
    "@bluehalo/ngx-leaflet": "^18.0.2",
    "@ngageoint/geopackage": "^4.2.6",
    "@stijn98s/leaflet.tilelayer.pouchdbcached": "^1.0.0",
    "@types/leaflet.fullscreen": "^3.0.2",
    "leaflet": "^1.9.4",
    "leaflet-geometryutil": "^0.10.3",
    "leaflet.fullscreen": "^3.0.2",

Update: Here is my current attempt, but I am still encountering errors:

I moved the JS file and added this configuration to my angular.json:

"scripts": [
  "node_modules/leaflet/dist/leaflet.js",
  "./node_modules/leaflet.fullscreen/Control.FullScreen.js",
  "./src/assets/scripts/leaflet-mapwithlabels.js"
]

I created a leaflet-extensions.d.ts file in my src/types directory:

import * as L from 'leaflet';
import * as geojson from "geojson";
import {Layer} from "leaflet";

declare module 'leaflet' {
  interface LayerOptions {
    // Specify label options here
  }
  // More definitions...
}

declare module "leaflet-map-with-labels" {
  export = L;
}

And my usage looks like this:

import { 
Injectable 
} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import * as L from 'leaflet';
import { Geometry } from 'geojson';
import { CountryProperties } from "../model/interfaces";

@Injectable({
  providedIn: 'root'
})
export class MapService {
  constructor(private http: HttpClient) {}
  initMap(elementId: string): L.MapWithLabels {
    return L.mapWithLabels(elementId, {
      // Map initialization options
    })
  }
  loadGeoJSON(url: string): Observable<GeoJSON.FeatureCollection<Geometry, CountryProperties>> {
    return this.http.get<GeoJSON.FeatureCollection<Geometry, CountryProperties>>(url);
  }
}

However, I am still encountering the following error:

ERROR TypeError: L.mapWithLabels is not a function
at _MapService.initMap (map.service.ts:16:14)

If anyone can provide insights on what may have gone wrong, I would greatly appreciate the help.

javascript angular typescript leaflet

Answer 1

Answer №1

After including the JavaScript file in the angular.json > "scripts" array, you need to add the necessary TypeScript definitions for the new classes, factories, and options provided by the library.

For instance, you can define something like this:

import * as geojson from 'geojson';
import { Layer } from 'leaflet';

declare module "leaflet" {
    export class MapWithLabels extends Map {
        constructor(element: string | HTMLElement, options?: MapWithLabelsOptions);
    }
    export interface MapWithLabelsOptions extends MapOptions {
        labelPane?: string;
    }
    export function mapWithLabels(element: string | HTMLElement, options?: MapWithLabelsOptions): MapWithLabels;

    type TypeOrFn<T, Ly extends Layer> = T | ((layer: Ly) => T)
    interface LabelFns<Ly extends Layer> {
        label?: TypeOrFn<string, Ly>;
        labelStyle?: TypeOrFn<object, Ly>;
        labelPriority?: TypeOrFn<number, Ly>;
    }

    export interface LayerOptions extends LabelFns<LayerWithFeature> {
        labelPos?: string;
        // etc.
    }

    class LayerWithFeature<P = any, G extends geojson.GeometryObject = geojson.GeometryObject> extends Layer {
        feature?: geojson.Feature<G, P>
    }
}

You can then utilize these additional classes, factories, and options using TypeScript:

import L from "leaflet";
import './assets/scripts/leaflet-mapwithlabels';

class MyComponent {
    private map!: L.MapWithLabels;
}

// Examples from the library documentation
const map = L.mapWithLabels('map_div', { labelPane: "tooltipPane" });

// Fetch geojson data and create a polygon layer with labels
fetch('hu_megyek.geojson').then(r => r.json()).then(d => {
    L.geoJSON(d, {
        label: l => l.feature?.properties.Nev,
        labelPos: 'cc',
        labelStyle: { color: 'darkblue', whiteSpace: 'normal', minWidth: '120px', textAlign: 'center' },
        labelPriority: l => l.feature?.properties.Nepesseg,
    }).addTo(map);
});

Playground Link

Please note: To ensure that the leaflet-mapwithlabels plugin extends the same global object L used in your application, import the Leaflet L directly instead of using "import * as L":

import L from 'leaflet'; // Import "L" directly, not as "* as L"

View live demo here: https://stackblitz.com/edit/stackblitz-starters-tyrpr2?file=src%2FMapService.service.ts

Answer 2

After including the JavaScript file in the angular.json > "scripts" array, you need to add the necessary TypeScript definitions for the new classes, factories, and options provided by the library.

For instance, you can define something like this:

import * as geojson from 'geojson';
import { Layer } from 'leaflet';

declare module "leaflet" {
    export class MapWithLabels extends Map {
        constructor(element: string | HTMLElement, options?: MapWithLabelsOptions);
    }
    export interface MapWithLabelsOptions extends MapOptions {
        labelPane?: string;
    }
    export function mapWithLabels(element: string | HTMLElement, options?: MapWithLabelsOptions): MapWithLabels;

    type TypeOrFn<T, Ly extends Layer> = T | ((layer: Ly) => T)
    interface LabelFns<Ly extends Layer> {
        label?: TypeOrFn<string, Ly>;
        labelStyle?: TypeOrFn<object, Ly>;
        labelPriority?: TypeOrFn<number, Ly>;
    }

    export interface LayerOptions extends LabelFns<LayerWithFeature> {
        labelPos?: string;
        // etc.
    }

    class LayerWithFeature<P = any, G extends geojson.GeometryObject = geojson.GeometryObject> extends Layer {
        feature?: geojson.Feature<G, P>
    }
}

You can then utilize these additional classes, factories, and options using TypeScript:

import L from "leaflet";
import './assets/scripts/leaflet-mapwithlabels';

class MyComponent {
    private map!: L.MapWithLabels;
}

// Examples from the library documentation
const map = L.mapWithLabels('map_div', { labelPane: "tooltipPane" });

// Fetch geojson data and create a polygon layer with labels
fetch('hu_megyek.geojson').then(r => r.json()).then(d => {
    L.geoJSON(d, {
        label: l => l.feature?.properties.Nev,
        labelPos: 'cc',
        labelStyle: { color: 'darkblue', whiteSpace: 'normal', minWidth: '120px', textAlign: 'center' },
        labelPriority: l => l.feature?.properties.Nepesseg,
    }).addTo(map);
});

Playground Link

Please note: To ensure that the leaflet-mapwithlabels plugin extends the same global object L used in your application, import the Leaflet L directly instead of using "import * as L":

import L from 'leaflet'; // Import "L" directly, not as "* as L"

View live demo here: https://stackblitz.com/edit/stackblitz-starters-tyrpr2?file=src%2FMapService.service.ts

What is the process for importing an untyped Leaflet plugin into an Angular application?

Answer №1

Similar questions

The href attribute is not functioning correctly on Internet Explorer version 8

Display a pop-up window using window.open and automatically print its contents using window.print upon loading

Error: JSDOM - The document variable has not been declared

An analysis of Universal Angular.io and Prerender.io from the viewpoint of Googlebot

Dispatch an item containing a list within a list

What is the best way to upload images in Vue.js without using base64 formatting?

Is Axios phasing out support for simultaneous requests?

Issues with relocating function during the NgOnInit lifecycle hook in an Angular 2 application

Utilizing Jquery Autocomplete with multiple arrays for data sourcing

For each individual category in the mongoose database, conduct a search

JavaScript Thumbnail Slider Builder

Validation of Date in Angular 5 (with specified minimum and maximum dates)

Managing the jQuery.noConflict function

An object may be null when its type is A or undefined, but we are certain it is not undefined

Using AngularJS and SpringMVC for uploading multiple files at once

I constantly encounter a TypeError message that returns as undefined

Combining arrays using JavaScript

The canvas appears blank when using Firefox version 36

Is there a way to verify if all the values in an array of objects are identical?

transfer item between a mother and offspring