CODEWITHSUNDEEP
javascriptjquerynode.jsangularjs
user3378649
user3378649

Reputation: 5354

How to use Angular JS with Leaflet.js

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:

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:

Upvotes: 8

Views: 11294

Answers (1)

Cory Silva
Cory Silva

Reputation: 2811

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?

Upvotes: 16

Related Questions