Geek Answers Handbook

How to use Angular JS with Leaflet.js

I work in a control panel using Node.JS / Leaflet.js. I started learning Angular js a few weeks ago. But I am in the middle step in my project.

I am creating an interactive map panel using:

  • Node.JS / Express.js for backend data processing
  • Leaflet.js for map visualization.
  • other libraries like d3.js.

Now I am trying to add widgets to my toolbar, where I click on points and extract the information associated with each point from the database using Node.js.

I would like to simplify my problem and consider this example. HTTP: jsfiddle.net/8QHFe/128/

When I hover over a shape, I get a diagram associated with each polygon / point on the map.

I'm confused! My question is:

  • Do I have to re-create the application to embed Leaflet in Angular Js code, like this example link or use the angular leaflet directive . He read that the library is not yet stable.
  • Is it better to use Angular.js in such scripts?
+7
javascript jquery angularjs
source share
1 answer

So this is a great question. I often try to figure out how to implement mapping packages in Angular. The plank below shows one way to do this, but I'm not sure if this is the "Angular Path". I would like to hear other people weigh.

In my last mapping application, I did not use AngularLeaflet because I had too many settings. (For example, turn WMS layers on and off depending on some variables, replace the basic elements at the zoom levels, use ESRI levels, etc.). This suggests that this is a great project, and I look forward to using it.

Plunger example

I have one controller for the card and two services.

  • MapCtrl (controller logic for the map)
  • MapService will talk to local storage and save the latest view for better UX
  • RecordService will get your ajax data to display on the map

So is Angular the best choice?

Who knows, despite the fact that I like to use Angular, I also see no reason. The hardest part, as I show, is not able to use Angular two-way snap in pop-ups. Although this contradicts the fact that it can greatly customize the map without overlaying the AngularLeaflet project ... (maybe I'm too lazy).

Let me know what you think?

+15
source share

More articles:


All Articles