ファイルからgeojsonデータを読み込み、circleMarkersを表示するjacascriptコードがあります(ポップアップが機能しないため、通常のマーカーは表示できません)。リーフレットマーカークリック時の表示データdiv内
{
$.ajax({
dataType: "json",
type: 'POST',
url: "geojsonfile.php",
beforeSend: function() {},
success: function(data) {
display = L.geoJson(data, {
style: function(feature) {
return {
color: '#0515B5'
};
},
pointToLayer: function(feature, latlng) {
return new L.CircleMarker(latlng, {
radius: 6,
fillOpacity: 0.85
});
},
onEachFeature: function(feature, layer) {
layer.bindPopup("Name: " + feature.properties.name);
document.getElementById("sname").innerHTML = feature.properties.name;
layer.on({
click: showData
});
}
}).addTo(map);
}
}).error(function(xhr, status, error) {
console.log(error);
});
}
function showData(e) {
$("#sdata").show();
}
データが表示されるHTMLテーブルは
<table id="sdata">
<tbody>
<tr>
<td> Name:</td>
<td id="sname"></td>
</tr>
</tbody>
</table>
あるしかし、問題はのみにGeoJSONの最後の値がテーブルに表示されている、それが可能であることをマーカーonclickingマーカーのポップアップのようにsnameの値が表示されます。