angular-leaflet-directive | AngularJS directive to embed an interact with maps | Frontend Framework library

Good morning!

I have a web application, where I use a leafletjs map (http://tombatossals.github.io/angular-leaflet-directive/#!/) and openstreetmap as tile.

The map works perfectly, I can interact in any way (add markers, create layers, zoom ..), however, when I access the page where the map is, it does not load correctly, according to the printscreen below:

It resets when I resize the window or open and close the console.

Font:

View:

I'm using angular-leaflet-directive in my AngularJS application to show Leaflet maps. At this time I'm playing around with paths - drawing lines between two points. This is working great, but at this time it is rendered as a straight line. I want a smooth Bézier curved line. I've found 2 plug-ins on the Leaflet site Leaflet.Curve and Leaflet.Canvas-Flowmap-Layer, but none have an AngularJS implementation.

Question: has anyone integrated this into the angular-leaflet-directive? if so, can you give some pointers how to do this? I've looked at the code, but I don't know how to start. And of course I've Googled around but found nothing.

All the sample available for using leaflet with d3 is using leaflet version 0.7.x which was released in 2015.

Why are all modules and examples using so old leaflet version? For ex:

• https://github.com/tombatossals/angular-leaflet-directive

  https://bost.ocks.org/mike/leaflet/

  http://bl.ocks.org/d3noob/9267535

  http://bl.ocks.org/Sumbera/10463358

When I try to update for ex this http://bl.ocks.org/d3noob/9267535 to latest leaflet version it breaks.

Is there any reason why all the example still use so old leaflet version?

I'm using Angular in a project with Codeigniter and I'm applying the Leaflet map. Creating the function, it generates the map, but it informs error when obtaining the center property and does not load in the defined position of initialization, it follows code and images: