0

I have been trying for days to load a GeoJSON file using Ajax and Leaflet. I can get the map & index.html to load using an Apache server and such but the GeoJSON itself does not show up.

Here is my Head:

<!-- ajax plugin -->
<script src="htdocs/webmap101/leaflet.ajax.min.js" type="text/javascript" ></script>

<!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
  integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
  crossorigin=""/>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
  crossorigin=""></script>

Heres is my Script:

var mymap = L.map('mapdiv')
            mymap.setView([19.4,-99.1],11);

          var bl =  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
          mymap.addLayer(bl);

        var geojsonLayer = new L.GeoJSON.AJAX('attractions.geojson', {pointToLayer:
              function(feature, latlng) {
              var str = "<h4>"+feature.properties.name+"</h4><hr>";
              str += "<a href=' " + feature.properties.web+ " ' target = 'blank'";
              str += "<img src='img/"+feature.properties.image+" ' width='200px'";
              str += "</a>";
              return L.marker(latlng).bindPopup(str);
            }});
            geojsonLayer.addTo(mymap);

Chrome developer tools gives me this error:

GET http://localhost/webmap101/htdocs/webmap101/leaflet.ajax.min.js 404 (Not Found)

index.html:95 Uncaught TypeError: L.GeoJSON.AJAX is not a constructor at index.html:95

1
  • Have you tried L.geoJSON.ajax(...) ?
    – Matt
    Feb 15, 2019 at 8:38

2 Answers 2

4

There are several things that have to be corrected.

First thing is wrong path to ajax library leaflet.ajax.min.js. Error 404 for file webmap101/htdocs/webmap101/leaflet.ajax.min.js tells you that there is no such file on this path on the server. Check it.

Second thing is that statement for including ajax library

<script src="htdocs/webmap101/leaflet.ajax.min.js" type="text/javascript" ></script>

has to be placed after statement for including Leaflet library

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
  crossorigin=""></script>

Third thing is that even if you correct above errors, there might be problems beacuse geojson layer is added to map before it is actually loaded. Solution for this is adding layer after it has been loaded:

var geojsonLayer = new L.GeoJSON.AJAX(
   ...
   ...
}});
geojsonLayer.on('data:loaded', function(){
  geojsonLayer.addTo(mymap);
});
-2

Ajax call must be AFTER leaflet call in the header.

1
  • If you became aware of error in your question after posting it you can edit your question to correct it.
    – TomazicM
    Feb 15, 2019 at 18:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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