title: Leaflet and geojson AJAX calls
body: <p>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 <a href="http://maptimeboston.github.io/leaflet-intro/" rel="nofollow noreferrer">this excellent tutorial</a> 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. </p>
  
  <p>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.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;A Leaflet map!&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /&gt;
    &lt;script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"&gt;&lt;/script&gt;
    &lt;script src="https://raw.githubusercontent.com/leaflet-extras/leaflet-providers/master/leaflet-providers.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
      #map{ height: 900px;width: 650px }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div id="map"&gt;&lt;/div&gt;
  
    &lt;script&gt;
  
  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}&amp;y={y}&amp;z={z}', {
      maxZoom: 20,
      attribution: 'Imagery from &lt;a href="http://giscience.uni-hd.de/"&gt;GIScience Research Group @ University of Heidelberg&lt;/a&gt; &amp;mdash; Map data &amp;copy; &lt;a href="http://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt;'
  }).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 + '&lt;br/&gt;' + feature.properties.OPEN_DT);
    return marker;
  }
    }).addTo(map);
  });
  
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks to anybody willing to read through this!</p>