GeoJSONのリーフレットアイコン
Leafletを初めて使用し、GeoJSONからデータを取り込んで、デフォルトのアイコンから変更しようとしています。
これまでのところ、私はこれを持っています[簡潔にするためにGeoJSON（エントリを減らす）を短縮しました]：
<!DOCTYPE html>
<html>
<head>
<title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<style>
#map {position: absolute; top: 0; bottom: 0; left: 0; right: 0}
</style>
</header>
<body>
<div id = "map"></div>
<script>
var map = L.map('map').setView( [55.94919982336744, -3.18328857421875], 9);
L.tileLayer('https://nls.tileserver.com/nls/{z}/{x}/{y}.jpg', {
attribution: '<a href="http://maps.nls.uk/projects/api/">NLS Historic Maps API</a>'
}).addTo(map);
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"ministerLabel": "John Cranstoun",
"partLabel": "Presbytery of Edinburgh",
"PlaceLabel": "Edinburgh, Liberton Parish Church",
"EndYear": 1627,
"StartYear": 1624,
"Tenure": 3,
"AlmaLabel": "",
"DeathYear": 1629
},
"geometry": {
"type": "Point",
"coordinates": [
-3.16124,
55.9133
]
}
},
{
"type": "Feature",
"properties": {
"ministerLabel": "James Waugh",
"partLabel": "Presbytery of Edinburgh",
"PlaceLabel": "Kirknewton",
"EndYear": 1682,
"StartYear": 1673,
"Tenure": 9,
"AlmaLabel": "",
"DeathYear": 1691
},
"geometry": {
"type": "Point",
"coordinates": [
-3.419166666,
55.88777778
]
}
},
{
"type": "Feature",
"properties": {
"ministerLabel": "John Greig",
"partLabel": "Presbytery of Biggar",
"PlaceLabel": "Skirling",
"EndYear": 1662,
"StartYear": 1655,
"Tenure": 7,
"AlmaLabel": "",
"DeathYear": ""
},
"geometry": {
"type": "Point",
"coordinates": [
-3.46882,
55.63664
]
}
}
]
};
var bible = L.Icon({
options: {
iconSize: [45,25],
iconAnchor: [22,45],
popupAnchor: [1, -24],
iconURL: 'big-yin.png'
});
return L.marker(latlng, {icon: bible});
function createPopup(feature, layer) {
layer.bindPopup('<b>'+feature.properties.ministerLabel +'</b><br>'+ feature.properties.PlaceLabel +', '+feature.properties.partLabel +'<br>Education: '+feature.properties.AlmaLabel +'<br>Appointed: '+feature.properties.StartYear +'<br>End: '+feature.properties.EndYear +'<br>Death: '+feature.properties.DeathYear);
};
L.geoJSON(geojson, {
onEachFeature: createPopup
}).addTo(map);
</script>
</body>
</html>
アイコン（var bible）に関連する行を削除すると、マップとポップアップは機能しますが、デフォルトの青いピンアイコンで表示されます。追加var bibleすると、地図がまったく表示されません。
var bible = L.Icon({
options: {
iconSize: [45,25],
iconAnchor: [22,45],
popupAnchor: [1, -24],
iconURL: 'big-yin.png'
});
return L.marker(latlng, {icon: bible});
私はこれらの線が問題であると考えるのは正しいですか？
私はまともな進歩を遂げていました、しかし私はこれに少し壁にぶつかりました。これに関するオンラインチュートリアルのどれもそれを解決することができませんでした。
回答
JS Webページを開発するとき、最初に学ぶ必要があるのは、ブラウザーデバッガーの使用方法です（ブラウザーでF12キーを押します）。ブラウザデバッガのコンソールを見ると、アイコンの定義にsynatxエラーがあることがわかります。
カスタムアイコンの公式リーフレットの例を見ると、 https://leafletjs.com/examples/custom-icons/、アイコンを定義する正しい方法は次のとおりです。
var bible = L.Icon({
iconSize: [45,25],
iconAnchor: [22,45],
popupAnchor: [1, -24],
iconURL: 'big-yin.png'
});
これを修正すると、return L.marker(latlng, {icon: bible});ステートメントが原因でデバッガコンソールに新しい構文エラーが表示されます。ステートメントはスタンドアロンではなく、関数内にある必要があります。
GeoJSONlaxerの公式リーフレットの例を見ると https://leafletjs.com/examples/geojson/、pointToLayerオプションを使用してレイヤーポイントにカスタムマーカーを割り当てていることがわかります。あなたの場合、これは次のようになります。
function createMarker(feature, latlng) {
return L.marker(latlng, {icon: bible});
}
L.geoJSON(geojson, {
poinToLayer: createMarker,
onEachFeature: createPopup
}).addTo(map);