1
私はリーフレットに2,200点のデータポイントをマップする方法を見つけようとしてきましたが、私はJSの世界を掘り下げただけで、新しいことがたくさんあります。私はをgeojsonファイルからデータを取得してマップ上に表示する方法の実例として使用してきました。しかし、私は自分のデータで動作させることができず、私が間違っていることを知らない。私は数多くの異なるホスティングソースを使用し、テストデータとチュートリアルデータ（geojsonファイル）の両方を使用して問題を引き起こしていたホストまたはgeojsonファイルであるかどうかのトラブルシューティングを試みました。私はそれがどちらであるかまだ分かりません。リーフレットとgeojson AJAXコール
以下は私のコードです（テストデータとチュートリアルのアイコンファイルを使用しています）。もし誰かが見て、私の地図にデータをロードしていない理由を教えてくれたら、とても感謝します！私がやろうとしていることに対するいくつかの示唆も助けになるでしょう。私の唯一のコーディングの背景はRであるので、明らかになっていたはずのものがあります。
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://raw.githubusercontent.com/leaflet-extras/leaflet-providers/master/leaflet-providers.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
#map{ height: 900px;width: 650px }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([-41.291, -185.229], 6);
var OpenMapSurfer_Roads = L.tileLayer('http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}', {
maxZoom: 20,
attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
$.getJSON("https://bitbucket.org/whalebiologist/website-map/raw/58abf2f24696fef437c294c02e55019d1c6554e4/churches_short.geojson",function(data){
var ratIcon = L.icon({
iconUrl: 'http://maptimeboston.github.io/leaflet-intro/rat.png',
iconSize: [60,50]
});
L.geoJson(data,{
pointToLayer: function(feature,latlng){
var marker = L.marker(latlng,{icon: ratIcon});
marker.bindPopup(feature.properties.Location + '<br/>' + feature.properties.OPEN_DT);
return marker;
}
}).addTo(map);
});
</script>
</body>
</html>
誰でもこの記事を読んでくれてありがとう！