Get id Corrdinate javascript leaflet - leaflet

Question

How can I get the ID I gave to a polygon by clicking?
var geojson = {
"type": "FeatureCollection",
"features": [{
"postalAreaId": item.PostalAreaId,
"type": "Feature",
"properties": {
"name": "Coors Field",
"amenity": "Baseball Stadium",
"popupContent": "This is where the Rockies play!"
},
"geometry": {
"type": "Polygon",
"coordinates": []
}
}]
};

Answer 1

You can use the OnEachFeature option when you draw your features on the map... A possible solution would be:
var geojson = {
"type": "FeatureCollection",
"features": [
{
"postalAreaId": 1,
"type": "Feature",
"properties": {
"name": "Coors Field",
"amenity": "Baseball Stadium",
"popupContent": "This is where the Rockies play!"
},
"geometry": {
"type": "Point",
"coordinates": [-105.00341892242432, 39.75383843460583],
}
},
{
"postalAreaId": 2,
"type": "Feature",
"properties": {
"name": "Coors Field",
"amenity": "Baseball Stadium",
"popupContent": "This is where the Rockies play!"
},
"geometry": {
"type": "Point",
"coordinates": [-105.0008225440979, 39.751891803969535],
}
}]
};
var map = L.map('map').setView([39.74739, -105], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'Imagery © Mapbox',
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
function onEachFeature(feature, layer) {
layer.on('click', function (e) {
alert(feature.postalAreaId)
})
}
L.geoJSON(geojson, {
onEachFeature: onEachFeature
}).addTo(map);
html, body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<div id='map'></div>
In this case, I'm using click but you could also use mousein and mouseout. Basically, inside the onEachFeature function you're adding a listener that will check events that happen on each feature of the map.