Home

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 git@github.com:Asymmetrik/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.

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.

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.

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.

Want more?

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