Angular.io Support for Leaflet Maps
Nov 14, 2017
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.
ngx-leaflet allows external libraries to easily extend its 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.
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):
Once you’re good with the prerequisites, clone the repo and run the demo app:
# Clone the Repository $ git clone firstname.lastname@example.org: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:
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 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.
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.