Skip to content
Ryan Blace edited this page Aug 24, 2022 · 13 revisions

Overview

@asymmetrik/ngx-leaflet is a compact and extensible library for integrating Leaflet maps into Angular.io applications. In this article, we introduce it and some of its features.

ngx-leaflet allows external libraries to easily extend functionality without having to modify or duplicate the core library

Leaflet has a huge library of third-party plugins, which include everything from drawing to heat maps to navigation aids. ngx-leaflet allows external libraries to easily extend functionality without having to modify or duplicate the core library. This is a core design principle of ours - doing things this way keeps the library small and focused while allowing others to develop at their own pace. Fortunately, Angular.io makes this really easy.

Getting Started

We've published the library to npm under the name @asymmetrik/ngx-leaflet. The best way to get started is to check out the Github page, where you can read the docs, request help, or submit issues. In addition, you can clone the Git repo and run the demo to see it in action and play around with several examples. Just follow these instructions:

Install Prerequisites

  • Install Git
  • Install NPM

Clone and Run the Demo

Once you're good with the prerequisites, clone the repo and run the demo app:

# Clone the Repository
$ git clone [email protected]:BlueHalo/ngx-leaflet.git

# Install the dependencies
$ cd ngx-leaflet
$ npm install

# Run the tutorial application
$ npm run demo

At this point, you should be able to go to http://localhost:4200 to see a demo of the basic functionality of the library. This includes adding custom layers, markers, layer controls, controlling zoom and center position, and using structural directives to control layer visibility. Below is a screenshot of one of the examples from the demo.

screenshot of the ngx-leaflet demo application

Plugins and Extensions

In addition to the core library, there are several projects that extend ngx-leaflet to integrate other third-party Leaflet libraries. At the time of writing, these include:

Leaflet.markercluster

You can find @asymmetrik/ngx-leaflet-markercluster on Github and npm. This project extends ngx-leaflet to add support for Leaflet.markercluster. The screenshot below shows the plugin in use with ngx-leaflet.

screenshot of the ngx-leaflet-markercluster demo application

Leaflet.draw

You can find @asymmetrik/ngx-leaflet-draw on Github and npm. This project extends ngx-leaflet to add support for Leaflet.draw. The following screenshot shows the plugin in use with ngx-leaflet.

screenshot of the ngx-leaflet-draw demo application

Leaflet D3 Hexbins and Pings

You can find @asymmetrik/ngx-leaflet-d3 on Github and npm. This project extends ngx-leaflet to add support for leaflet-d3, which provides support for d3-hexbin layers and animated map pings. Finally, the screenshot below shows the plugin in use with ngx-leaflet.

screenshot of the ngx-leaflet-d3 demo application

Want more?

If you want to get started, you can check out our tutorial on using ngx-leaflet in Angular CLI projects.