Leaflet map does not display path

Question

I am trying out the basic features of Leaflet with Angular. I have the following html piece:

In the controller, I have done the following:

$scope.markers = [
                 {
                    lat: 52.5,
                    lng: 0,
                    focus: true,
                    //message: "Hey, drag me if you want",
                    title: "Marker",
                    draggable: true,
                    label: {
                        message: "Hey, drag me if you want",
                        options: {
                            noHide: true
                        }
                    }
                },
                {
                    lat: 51,
                    lng: 0,
                    focus: true,
                    title: "Marker",
                    draggable: true,
                    label: {
                        message: "Hey, drag me if you want",
                        options: {
                            noHide: true
                        }
                    }
                }

            ];
$scope.europeanPaths = {
                p1: {
                    color: 'red',
                    weight: 8,
                    latlngs: [
                        { lat: 51.50, lng: -0.082 },
                        { lat: 48.83, lng: 2.37 },
                        { lat: 41.91, lng: 12.48 }
                    ],
                    message: "<h3>Route from London to Rome</h3><p>Distance: 1862km</p>",
                }
            };
$scope.london = {
                lat: 51.505,
                lng: -0.09,
                zoom: 5
            };

The markers nicely show up and the map gets centred over London. But the path doesn't get displayed. When I debugged through the "paths" directive, I found that a layer with the path co-ordinates get added to the map.

I am pretty new to Angular, hence trying to understand how things are working behind the scenes. TIA.

(I am trying to create a Fiddle for the same!)

Answer 1

I had the same problem, and the reason was in included css with style

svg{
width: 100%;
height: 100%;
}

Correction

 .angular-leaflet-map svg{
   width: initial;
   height: initial;
 } 

resolve the problem