Version used - @asymmetrik/ngx-leaflet": "^4.0.0",
Multiple polygons using lat long array has been plotted on leaflet
Sample JSON -
"data": [
{
"latLong": [
{
"x": 468.15,
"y": 329.27
},
{
"x": 400.12,
"y": 300.47
},
{
"x": 450.74,
"y": 376.65
},
{
"x": 500.25,
"y": 400.85
}
],
"name": Polygon 1
"id": "polygon1",
}];
//Details
// This is array of Lat and long cordinates created from aboveJSON
var latlong = [
[[468.15, 329.27],[400.12, 300.47],[450.74, 376.65],[500.25, 400.85]]];
var PolygonOptions = {color:'red', weight:8};
var polygon = L.polygon(latlong , PolygonOptions ).bindPopup("Need Dynamic Text", {permanent: true, opacity: 0.7}) polygon.addTo(this.map);
[Result]
Display name for each shape as per attached image as L.Polygon method accepts lat long array and options as done
Version used - @asymmetrik/ngx-leaflet": "^4.0.0",
Multiple polygons using lat long array has been plotted on leaflet Sample JSON - "data": [ { "latLong": [ { "x": 468.15, "y": 329.27 }, { "x": 400.12, "y": 300.47 }, { "x": 450.74, "y": 376.65 }, { "x": 500.25, "y": 400.85 } ], "name": Polygon 1 "id": "polygon1", }]; //Details // This is array of Lat and long cordinates created from aboveJSON
var PolygonOptions = {color:'red', weight:8}; var polygon = L.polygon(latlong , PolygonOptions ).bindPopup("Need Dynamic Text", {permanent: true, opacity: 0.7}) polygon.addTo(this.map); [Result] Display name for each shape as per attached image as L.Polygon method accepts lat long array and options as done
Refer Stack overflow https://stackoverflow.com/questions/60734829/display-information-inside-leaflet-version-1-3-4-polygon-l-polygon