Using Angular 2 to import an external Leaflet library written in TypeScript

Question

Using Angular 2 to import an external Leaflet library written in TypeScript

Seeking help in integrating a TypeScript Leaflet library into my Angular 2 application.

Below is my map component. I have successfully installed leaflet.d.ts using tsd install and there are no complaints about

/// <reference path="../../typings/leaflet/leaflet.d.ts"/>

. However, when trying to utilize an exported module L.map from leaflet.d.ts, I encounter the error "ReferenceError: L is not defined". This is my first attempt at importing an external TypeScript library into Angular 2, so clearly there's something amiss.

/// <reference path="../../typings/leaflet/leaflet.d.ts"/>
import { Component } from 'angular2/core';
@Component({
  selector: 'map',
  template: `
        <div id="map"></div>
  `,
})
export class Map{
    constructor(){
          var map = new L.Map('map', {
             zoomControl: false
         });
    }

package.json

{
  "dependencies": {
    "angular2": "^2.0.0-beta.3",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "normalize.css": "^3.0.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "systemjs": "0.19.6",
    "typings": "^0.6.4",
    "zone.js": "^0.5.11"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "gh-pages": "^0.11.0",
    "grunt": "~0.4.5",
    "grunt-contrib-clean": "^1.0.0",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^1.0.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-sass": "~0.9.0",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-shell": "^1.2.1",
    "lite-server": "^2.0.1",
    "normalize.css": "^3.0.3",
    "typescript": "^1.7.5"
  },
  "scripts": {
    "publish": "node publish.js",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  }
}

tsd.json

{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "master",
  "path": "typings",
  "bundle": "typings/tsd.d.ts",
  "installed": {
    "leaflet/leaflet.d.ts": {
      "commit": "1da639a106527e0c4010b354a1efe52a3059a291"
    }
  }
}

Would appreciate any insights on what might be going wrong here.

Thank you!

typescript angular tsd

Answer 1

Answer №1

It is important to ensure that you have included the leaflet JS file:

System.config({
  map: {
    leaflet: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js'
  },
  packages: {'app': {defaultExtension: 'ts'}} 
});
System.import('app/main')
        .then(null, console.error.bind(console));

To use it in your modules, you can import it like this:

import {Component, OnInit} from 'angular2/core';
import leaflet from 'leaflet';

You can also refer to this plunkr example for further guidance: http://plnkr.co/edit/aUo2uvlxC5ji32u01jfF?p=preview.

Answer 2

It is important to ensure that you have included the leaflet JS file:

System.config({
  map: {
    leaflet: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js'
  },
  packages: {'app': {defaultExtension: 'ts'}} 
});
System.import('app/main')
        .then(null, console.error.bind(console));

To use it in your modules, you can import it like this:

import {Component, OnInit} from 'angular2/core';
import leaflet from 'leaflet';

You can also refer to this plunkr example for further guidance: http://plnkr.co/edit/aUo2uvlxC5ji32u01jfF?p=preview.

Answer 3

Answer №2

Here is a helpful workaround for using 3rd party libraries with angular-cli until better support is available. It worked wonders for me :)

To start, navigate to your project directory and enter the following command:

npm install leaflet --save

Next, open your angular-cli-build.js file and include this line:

vendorNpmFiles: [
   ..................
   'leaflet/**/*.js',
    ....................
  ]

Now, modify your src/system-config.ts as follows:

const map:any ={
     ..................
   'leaflet': 'vendor/leaflet/dist',
    ....................

}

And add the packages configuration:

const packages: any = {
  'leaflet': {
    format: 'cjs'
  }

};

In your src/index.html file, insert the script tag:

<script type="text/javascript" src="vendor/leaflet/dist/leaflet.js"></script>

Don't forget to link the CSS file as well:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />

Finally, in the component where you want to use Leaflet:

declare let L: any;
@Component({
  moduleId: module.id,
  selector: 'app-map',
  templateUrl: 'map.component.html',
  styleUrls: ['map.component.css']
})
export class MapComponent implements OnInit, AfterViewInit {
 leafletMap: any;
 ngAfterViewInit() {
    this.leafletMap = L.map("map").setView([23.709921, 90.407143], 7);
 }
}

Voila! Your map should now be successfully loaded :D

Answer 4

Here is a helpful workaround for using 3rd party libraries with angular-cli until better support is available. It worked wonders for me :)

To start, navigate to your project directory and enter the following command:

npm install leaflet --save

Next, open your angular-cli-build.js file and include this line:

vendorNpmFiles: [
   ..................
   'leaflet/**/*.js',
    ....................
  ]

Now, modify your src/system-config.ts as follows:

const map:any ={
     ..................
   'leaflet': 'vendor/leaflet/dist',
    ....................

}

And add the packages configuration:

const packages: any = {
  'leaflet': {
    format: 'cjs'
  }

};

In your src/index.html file, insert the script tag:

<script type="text/javascript" src="vendor/leaflet/dist/leaflet.js"></script>

Don't forget to link the CSS file as well:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />

Finally, in the component where you want to use Leaflet:

declare let L: any;
@Component({
  moduleId: module.id,
  selector: 'app-map',
  templateUrl: 'map.component.html',
  styleUrls: ['map.component.css']
})
export class MapComponent implements OnInit, AfterViewInit {
 leafletMap: any;
 ngAfterViewInit() {
    this.leafletMap = L.map("map").setView([23.709921, 90.407143], 7);
 }
}

Voila! Your map should now be successfully loaded :D

Answer 5

Answer №3

To successfully implement Thierry Templier's solution with systemjs and Angular 2.4, I made some necessary adjustments.

Following his instructions, I included Leaflet in my system.config.js file. However, to ensure its functionality in my component, I had to import it as shown below:

import * as L from 'leaflet';

After doing so, the L class was properly recognized in my MapComponent

export class MapComponent {
    let map = L.map("map").setView([38, -77], 13);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
    }

Answer 6

To successfully implement Thierry Templier's solution with systemjs and Angular 2.4, I made some necessary adjustments.

Following his instructions, I included Leaflet in my system.config.js file. However, to ensure its functionality in my component, I had to import it as shown below:

import * as L from 'leaflet';

After doing so, the L class was properly recognized in my MapComponent

export class MapComponent {
    let map = L.map("map").setView([38, -77], 13);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
    }

Answer 7

Answer №4

While you're at it, make sure to check out all the necessary steps that need to be taken

npm install @types/leaflet@latest --save

and don't forget to add the source in index.html.

No additional imports or declarations are required. The import statement could then resemble

import {control, LatLng, layerGroup, LayerGroup, Map} from "leaflet";

Remember, map initialization should occur within ngOnInit(), constructor usage is not meant for logic.

Answer 8

While you're at it, make sure to check out all the necessary steps that need to be taken

npm install @types/leaflet@latest --save

and don't forget to add the source in index.html.

No additional imports or declarations are required. The import statement could then resemble

import {control, LatLng, layerGroup, LayerGroup, Map} from "leaflet";

Remember, map initialization should occur within ngOnInit(), constructor usage is not meant for logic.

Using Angular 2 to import an external Leaflet library written in TypeScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Discovering Child Elements in Angular 2 with @ViewChild and CSS Selectors

Creating a user login with email and password using AngularFire2 requires following a few specific steps to successfully

Module not found in Typescript

The soft keyboard on Android devices may be obscured by an input field when using Cordova

Angular - Javascript - Oops! The variable 'google' seems to have gone missing after reloading the page

Importing an anonymous ES5 function using Typescript

The table __EFMigrationsHistory does not exist

Angular default selection attribute behaving unexpectedly

The parameter of type '{ [key:string]:any;}' cannot be assigned a string argument

Error encountered in Node.js OpenAI wrapper: BadRequestError (400) - The uploaded image must be in PNG format and cannot exceed 4 MB

Use the jqwidgets jxGrid with the checkbox selection mode to enable row selection by checking for any clicks on the row

Error loading ngs-boostrap in angular2: issues encountered during initialization

Could not perform ng build --prod due to inability to negate a statement

Deploying an NX micro front-end using docker and Nginx individually for every micro front-end

Pass service API data across initial components within Angular 6

Excel add-in in Angular featuring exclusive custom functions

Concern with generic characteristics during type conversion

Deactivate the chosen tab by clicking the Mat-Tab button

Premature updates detected in state cloning process

Ways to access a property within an object using TypeScript