2

The answers I have tried prior to asking this question:

Loading external GeoJSON file into Leaflet map?

Load external geojson file into leaflet map

Issue in loading external geojson file into leaflet map?

GeoJSON does not appear on my Leaflet map

GeoJSON not showing in leaflet map?

I have created a map using Leaflet and included GeoJSON data in the same directory as my program. I am testing this code by opening in both Firefox and Chrome, both show my map in the proper location, neither show the geometry of my features.

I am using a local file which can be seen in my script. Below is the relevant includes and code:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/mapinfo.css">
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<link rel="stylesheet" 
href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<title>GeoArchive</title>
</head>

Code:

<div class="col-sm-8 text-left">
    <h1>GeoHistory Archive</h1>
    <p>This is a guide to all historical events which took place in your selected area. Select a point on
        the map to see if any events took place there!</p>
    <div id="mapid"
        style="width: 8000px; height: 800px;   display: block; margin-left: auto; margin-right: auto; width: 100%;">
    </div>
    <script>
        var map = L.map('mapid').setView([37.7688150141044, -122.44451522827147], 14);
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition((position) => {
                map.panTo(L.latLng(position.coords.latitude, position.coords.longitude))
            })
        }

        L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=vpKwi7e2rRjEWHBci22Y', {
            attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
        }).addTo(map);
        var geojson = new L.GeoJSON.AJAX("SFLandmarks.geojson");
        geojson.on('data:loaded', function () {
            geojson.addTo(map);
        });
    </script>
    <h1>
        {{ search }}
    </h1>
    <p>{{ output }}</p>
    <hr>
    <h3>All Resources Attributed to Wikipedia & SFData</h3>
    <p></p>
</div>

I am attempting to use AJAX to load my GeoJSON layer onto 'map' but have continuously had no luck over the last week.

Is there anything obvious I could be doing wrong? I have seen that there may be a problem using a local file on the test server in Visual Studio Code, but I am testing via Firefox as well which has been stated does not suffer from that problem.

Below is the output given by my console upon running my code via flask which is my web framework for the overall application:

$ python main.py
 * Serving Flask app "main" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [19/Dec/2019 17:02:46] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [19/Dec/2019 17:02:46] "GET /css/mapinfo.css HTTP/1.1" 404 -
127.0.0.1 - - [19/Dec/2019 17:02:46] "GET /css/mapinfo.css HTTP/1.1" 404 -

Through suggestions in the comments below, I have narrowed down the problem using the Network Tab on the Google Chrome Developers tools (F12) to determine that my AJAX.js file is not being located on the webpage giving me the two following error codes:

ajax.js:1 Failed to load resource: the server responded with a status of 404 
(NOT FOUND)

Uncaught TypeError: L.GeoJSON.AJAX is not a constructor
at (index):58

This is a locally loaded file.

Improve this question
  • Dou you have MIME type .geojson enabled/defined on your server? What do you get if you try to load SFLandmarks.geojson file directly in browser? – TomazicM Dec 19 '19 at 14:12
  • have you done a sanity check and opened the geojson in QGIS or something? Are you sure it's a valid geojson? – jbalk Dec 19 '19 at 18:13
  • Please do a sanity check for the network requests: using the network tab of the developer tools in your web browser, see if there's any request about SFLandmarks.geojson. Is the request happening? Is the request to the same server, same port? Is your web server returning a 404 or something like that? – IvanSanchez Dec 19 '19 at 18:23
  • @jbalk it definitely works in QGIS, just double-checked. It also works using GeoJSON.io – KullideDev Dec 23 '19 at 10:28
  • @TomazicM the GeoJSON file is on my local machine, I am using a method defined in one of the originally linked threads to load the file using L.GeoJSON.AJAX. The file does work when loaded into QGIS or geojson.io – KullideDev Dec 23 '19 at 10:40
1

What you are trying to achieve will never work. Browsers do not allow javascript to freely access files stored on the user's local file system. This is a fundamental security feature. Otherwise, there'd be nothing to prevent any website from sniffing your computer and doing whatever it wants with all your files.

In addition, I believe you misunderstand the purpose of L.geoJSON.AJAX. Ajax is no magic workaround to get local files to load, its purpose is to perform tasks asynchronously, such as loading data without blocking other script execution, and then performing tasks once the asynchronous job is complete. It is intended to be used for processing bulky tasks in the background, while keeping the website responsive.

To fit your code:

var geojson = new L.GeoJSON.AJAX("SFLandmarks.geojson");

just points to "SFLandmarks.geojson" residing next to your html page on your server. It is simply a path relative to the HTML page.

Possible solutions are:

  • Put the data on your server and load it straight from there (easiest)
  • Offer a file upload mechanism to allow the user to upload data. Once uploaded, you can then manipulate or visualize the data. This is not geospecific and there are many questions and tutorials out there for JS file uploads that could fit your task.
Improve this answer
  • Thanks for the clarification and help understanding a bit more about the leaflet-ajax plugin. I am currently looking at [developer.mozilla.org/en-US/docs/Learn/Server-side/… & Express) top understand how I can run a test server to use my GeoJSON data, Thanks again. – KullideDev Dec 24 '19 at 13:55
  • While testing my server, it does not seem my GeoJSON loads in with my html file, however. – KullideDev Dec 24 '19 at 14:23
  • As I continue to test this program on a local server it seems my main issue is that the leaflet-ajax plugin is failing to be recognized by my web browser. I am receiving code 404 on the js file in my <head> is it possible that running in a virtual environment is having an effect on this? Additionally, I am new to this website, would it be best practice for me to create a new post for this issue? – KullideDev Dec 24 '19 at 15:40
  • Stackexchange follows a QA pattern, where each question should be as focused as possible to allow for precise answers. So yes, any new issues you stumble upon warrant a new question to be asked. gis.stackexchange.com/help/how-to-ask – Senshi Dec 25 '19 at 14:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.