Local GeoJSON in Leaflet using leaflet-ajax

Question

My aim is to include a local geojson file in my Leaflet map application using leaflet-ajax , as suggested by this earlier answer.

In my root directory, I have:

index.html
entire contents of Leaflet download
leaflet.ajax.min.js containing the contents of the source file on Github
bb4326.geojson containing 4 point features in EPSG4326

Index.html looks like:

<!DOCTYPE html>
<html>
<head>
    <title>Hey up here!</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    &lt;script src=&quot;leaflet.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;leaflet.ajax.min.js&quot;&gt;&lt;/script&gt; 

</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid', {center: [52.47, -1.89], zoom: 13});

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &amp;copy; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors, ' +
        'Imagery © &lt;a href=&quot;https://www.mapbox.com/&quot;&gt;Mapbox&lt;/a&gt;',
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1
}).addTo(mymap);

var geojsonLayer = new L.GeoJSON.AJAX(&quot;bb4326.geojson&quot;);       
geojsonLayer.addTo(mymap);


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

Opening index.html in a browser results in the basemap at the requested location and zoom-level, but the geojson file contents are not displayed. What am I overlooking? I thought that the ajax.min.js script ought to load the dataset for me?

bb4326.geojson was created by exporting a Shapefile to GeoJSON in QGIS and looks like:

{
"type": "FeatureCollection",
"name": "bb4326",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 1, "cat": "A" }, "geometry": { "type": "Point", "coordinates": [ -1.903211081088789, 52.483536707820782 ] } },
{ "type": "Feature", "properties": { "id": 2, "cat": "A" }, "geometry": { "type": "Point", "coordinates": [ -1.569431757803851, 55.041100936161001 ] } },
{ "type": "Feature", "properties": { "id": 3, "cat": "B" }, "geometry": { "type": "Point", "coordinates": [ -0.164490580870734, 51.446934150191545 ] } },
{ "type": "Feature", "properties": { "id": 4, "cat": "C" }, "geometry": { "type": "Point", "coordinates": [ -3.239562634800648, 51.514642158718445 ] } }
]
}

I've added the geojsonLayer.on('data:loaded', function(){geojsonLayer.addTo(mymap)}) bit, but the layer still won't show. Perhaps leaflet-ajax isn't installed properly? Note I have just a bare html file, the leaflet download and leaflet.ajax.min.js. — Hans Roelofsen, May 05 '21 at 15:53
Ar you running this from server or from file system? Any errors in the browser debugger network section? — TomazicM, May 05 '21 at 16:08
From file system. I'm just trying this locally to see how it works. If I'm happy with the map I might rent some serverspace and register a domain. — Hans Roelofsen, May 10 '21 at 11:07
Ok, I found an error message in the Firefox debugger: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/apps/web/bb4326.geojson. (Reason: CORS request not http) — Hans Roelofsen, May 10 '21 at 20:08
Problem overcome by running a local HTTP server using python, as suggested in this earlier answer and also discussed in the Mozilla Web Docs — Hans Roelofsen, May 11 '21 at 13:50

Local GeoJSON in Leaflet using leaflet-ajax

0 Answers0