How to use Angular JS with Leaflet.js

Question

I am working on a dashboard using Node.JS/Leaflet.js. I started learning Angular js a few weeks ago. But I am at a medium step in my project.

I am building an interactive map dashboard using:

• Node.JS/Express.js to process data on the backend
• Leaflet.js to do map visualization
• other libraries like d3.js.

Now, I am trying to add widgets to my dashboard, where I click on points and fetch information related to each point from DB using Node.js.

I'd like to simplify my problem and consider this example. http:jsfiddle.net/8QHFe/128/

When I hover my mouse on the shape, I get a chart related to every polygon/point on the map.

I am confused! My question is:

• Should I re-create the app to embed Leaflet into Angular Js code, like this example link or use angular leaflet directive. It read that it is not a stable library yet.
• Is it the best choice to use Angular.js in such scenarios?

Answer 1

So this is a great question. I often struggle understanding how to implement mapping packages into Angular. The Plunker below shows one way of doing it, but I am not sure it is the "Angular Way". I would love to hear other people weigh in.

In my last mapping application I did not use AngularLeaflet because I had too many customization to do. (For example turn WMS layers on and off depending upon some variables, swap basemaps on zoom levels, use ESRI layers, etc). That said it looks like a great project and I look forward to using it.

Plunker Example

I have one controller for the map and two services.

1. MapCtrl (Controller logic for the map)
2. MapService will talk to local storage and save the last view for a better UX
3. RecordService will get your ajax data to show on the map

So is Angular the best choice?

Who knows, regardless I enjoy using angular so much I cannot see any reason not too. The toughest thing about the way I show is not being able to use angular 2-way binding in the popups. Though that is countered by being able to heavily customize the map without forking the AngularLeaflet project... (maybe I am just too lazy).

Let me know what you think?