ngx-leaflet
ngx-leaflet copied to clipboard
Display information inside Leaflet (ngx-leaflet": "^4.0.0) Polygon (L.polygon)
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
Refer Stack overflow https://stackoverflow.com/questions/60734829/display-information-inside-leaflet-version-1-3-4-polygon-l-polygon