MapTimeBoston Leaflet Tutorial RatMap Objects

I am following the introduction to Leaflet from https://maptimeboston.github.io/leaflet-intro/. At the first Rat Map, my code failed to show the rodent objects/locations on the map. I c/v the tutorial code directly and still failed to get objects on my map. All of the necessary files are in the same directory (and are appropriately named) as the html file being used.

I'm new to HTML, GeoJSON, and have been unsuccessful in finding a method that I could use to troubleshoot. The data files are complete and have all of the values/objects expected. I'm used to Python/R/VBA, so not having an error message is new to me as well.

I am running the HTML file through a Chrome browser. The HTML files are being written in Sublime Text

//make sure you have the jQuery and rodent GeoJSON files in HTML directory
<html>
<head>
  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script src="jquery-2.1.1.min.js"></script>
  <style>
    #map{ height: 100% }
  </style>
</head>
<body>

  <div id="map"></div>

  <script>

  // initialize the map
  var map = L.map('map').setView([42.35, -71.08], 13);

  // load a tile layer
  L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
    {
      attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
      maxZoom: 17,
      minZoom: 9
    }).addTo(map);

  // load GeoJSON from an external file
  $.getJSON("F://FinanceServer//HTML//rodents.geojson",function(data){
    // add GeoJSON layer to the map once the file is loaded
    L.geoJson(data).addTo(map);
  });

  </script>
</body>
</html>

I was expecting to see something resembling the third map from the aforementioned tutorial site.

Solution

The URL to your local file should never work, especially as an absolute path.

Browsers prevent you from accessing the client file system, for well known security reasons.

Even if you open your HTML page directly from file system (with file:// protocol), Chrome browser prevents you from making AJAX requests to other local files. Last time I tried it works in other browsers, though.

Even if you use another browser, your URL should be relative, or specify the protocol / start with double slash to make it absolute.

To avoid most of these limitations, the standard practice in web development is to serve files with a small local server.