INTRODUCING NGX-LEAFLET

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

Angular is a great framework for building single page applications. As a company, we used Angular 1 frequently, so when Angular 2 came out we jumped right on it. However, finding existing components for third-party libraries like Leaflet was challenging. Since there wasn’t a clear solution, we started our own open source project for ngx-leaflet.

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.

HOW TO GET 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 (now updated for @asymmetrik/ngx-leaflet v4.x):

PREREQUISITES

• Install Git: Installation instructions here.
• Install Yarn: Because it’s faster, we use Yarn in place of npm. You should too. Follow these instructions to install it.

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
$ yarn install

# Run the tutorial application
$ npm run demo

At this point, you should be able to go to http://localhost:9000/src/demo/ 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.

CHECK OUT THE OTHER 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-markerclusters 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 first tutorial on using ngx-leaflet in Angular CLI projects. In the coming months, we’ll be writing more tutorials on ngx-leaflet and its extensions. Watch this blog for updates. As always, reach out to us if you want to know more about who we are, what we do, and the opportunities we can provide.