Panggilan AJAX selebaran dan geojson

Saya telah mencoba mencari cara untuk memetakan sekitar 2.200 titik data dalam brosur, namun saya baru saja mempelajari dunia JS dan ada banyak konsep yang baru bagi saya. Saya telah menggunakan tutorial luar biasa ini sebagai contoh kerja tentang cara mengambil data dari file geojson dan menampilkannya di peta Anda. Namun, sepertinya saya tidak bisa menerapkannya dengan data saya sendiri dan saya tidak tahu apa kesalahan yang saya lakukan. Saya telah mencoba menggunakan berbagai sumber hosting yang berbeda dan menggunakan data pengujian dan data tutorial (sebagai file geojson) untuk memecahkan masalah apakah host atau file geojson yang menyebabkan masalah. Saya masih tidak yakin yang mana.

Di bawah ini adalah kode saya (menggunakan data pengujian dan file ikon dari tutorial), jika ada yang bisa melihat dan memberi tahu saya mengapa data tidak dimuat ke peta saya, saya akan sangat berterima kasih! Bahkan beberapa saran tentang apa yang dapat saya coba lakukan akan membantu. Satu-satunya latar belakang saya dalam pengkodean adalah dengan R, jadi mungkin ada sesuatu yang saya lewatkan yang seharusnya sudah jelas.

<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> &mdash; Map data &copy; <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>

Terima kasih kepada siapa pun yang bersedia membaca ini!


javascript ajax geocoding leaflet geojson
person Whale Biologist    schedule 20.05.2017    source sumber

Jawaban (1)


arrow_upward
3
arrow_downward

Selamat datang di JADI!

Cara praktis untuk men-debug HTML dan JavaScript adalah dengan konsol browser Anda, seperti Chrome misalnya.

Saat Anda memuat halaman, mungkin ada pesan kesalahan yang dicatat di konsol. Saya melihat kesalahan tentang tipe pantomim untuk penyedia brosur.js. Cara mengatasinya adalah dengan mengkonversi url dengan rawgit.com. Lihat di sini untuk info lebih lanjut.

Sumber skrip baru adalah https://rawgit.com/leaflet-extras/leaflet-providers/master/leaflet-providers.js.

Selanjutnya, tampaknya $.getJSON tidak menjalankan panggilan balik sukses, yang berarti mungkin ada kesalahan di suatu tempat dalam permintaan. getJSON jQuery juga mengembalikan Janji (lihat Objek jqXHR), yang memungkinkan kita untuk memindahkan kode sekitar sedikit untuk melihat apakah kita dapat menemukan kesalahan.

$.getJSON("https://bitbucket.org/whalebiologist/website-map/raw/58abf2f24696fef437c294c02e55019d1c6554e4/churches_short.geojson")
    .then(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);
    })
    .fail(function(err){
        console.log(err.responseText)
    });

Di fail() kami, kami mendapatkan beberapa teks yang masuk ke konsol browser kami. Sepertinya file geojson berada di belakang login di bitbucket.

Coba pindahkan file geojson dari area yang dilindungi kata sandi.

person Adam Paxton    schedule 20.05.2017