Leaflet and geojson AJAX calls

Question

I've been trying to figure out how to map some 2,200 data points in leaflet, however I've only just delved into the world of JS and there's a lot of concepts that are new to me. I've been using this excellent tutorial as a working example of how to pull data from a geojson file and have it appear on your map. However, I can't seem to get it to work with my own data and I don't know what I'm doing wrong. I have tried using numerous different hosting sources and using both the test data and the tutorial data (as geojson files) to troubleshoot whether it's the host or the geojson file that was causing problems. I am still not sure which it is.

Below is my code (using test data and the icon files from the tutorial), if anybody is able to take a look and tell me why it's not loading the data onto my map I would be so grateful! Even some suggestions for what I could try doing would help. My only background in coding is with R, so there's probably something I am missing that should have been obvious.

<html>
<head>
  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.0.3/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>

Thanks to anybody willing to read through this!

score 3 · Answer 1 · edited May 23 '17 at 11:47

Welcome to SO!

A handy way to debug HTML and JavaScript is with your browser's console, like Chrome's for example.

When you load your page, there may be error messages logged in the console. I'm seeing an error about mime types for the leaflet-providers.js. The fix for that is to convert the url with rawgit.com. See here for more info.

The new script source would be https://rawgit.com/leaflet-extras/leaflet-providers/master/leaflet-providers.js.

Next, it appears that $.getJSON isn't executing the success callback, which means there might be an error somewhere in the request. jQuery's getJSON also returns a Promise (see The jqXHR Object), which allows us to move the code around a bit to see if we can catch an error.

$.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)
    });

In our fail(), we get some text logged to our browser console. Looks like the geojson file is sitting behind a login on bitbucket.

Try moving the geojson file out from a password protected area.

Leaflet and geojson AJAX calls

1 Answers1