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
L.geoJSON.ajax(...)
?