Multiple polygons in angular leaflet "paths" - angularjs

Question

I am trying to display multiple paths in my OSM maps using angular leaflet. Paths types like multiple circle and polygons.
For circle, the below code:
angular.forEach($scope.alertcircles, function(obj, key){
var arraylen = obj.g_pos_circle.coordinates[0].length;
console.log(obj.id);
$scope.paths['circle' + obj.id] = {
circle: {
color: '#FF0000',
opacity: 0.5,
stroke: false,
fillColor: '#ff69b4',
fillOpacity: 0.5,
weight: 8,
radius: 6,
latlngs: [],
type: 'circle',
clickable: true,
heading: 240
}
};
for(i=0; i<obj.g_pos_circle.coordinates[0].length;i++){
var coord = obj.g_pos_circle.coordinates[0][i];
angular.extend($scope.paths ['circle' + obj.id] .circle.latlngs.push({
lat: parseFloat(coord[1]),
lng: parseFloat(coord[0])
}))
}
$scope.paths['circle' + obj.id].circle.radius = obj.g_pos_radius
});
For polygon
angular.forEach($scope.alertareas, function(obj, key){
var arraylen = obj.g_pos_poly.coordinates[0].length;
console.log(obj.id);
$scope.paths['area' + obj.id] = {
area: {
color: '#FF0000',
opacity: 0.5,
stroke: false,
fillColor: '#ff69b4',
fillOpacity: 0.5,
weight: 0,
latlngs: [],
type: 'polygon',
clickable: true,
heading: 240
}
};
for(i=0; i<obj.g_pos_poly.coordinates[0].length-1; i++){
var coord = obj.g_pos_poly.coordinates[0][i];
angular.extend($scope.paths ['area' + obj.id ] .area.latlngs.push({
lat: parseFloat(coord[1]),
lng: parseFloat(coord[0])
}))
}
});
I am not able to see any shapes in my map. I previously had a setup like below but the problem is all the shapes are connected as there no differentiation among different shapes
$scope.paths = {
area: {
color: '#FF0000',
opacity: 0.5,
stroke: false,
fillColor: '#ff69b4',
fillOpacity: 0.5,
weight: 0,
latlngs: [],
type: 'polygon',
clickable: true,
heading: 240
},
circle: {
color: '#FF0000',
opacity: 0.5,
stroke: false,
fillColor: '#ff69b4',
fillOpacity: 0.5,
weight: 8,
radius: 6,
latlngs: [],
type: 'circle',
clickable: true,
heading: 240
}
};
What approach do I have to follow to show individual shapes correctly. Any help is greatly appreciated.

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