1

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/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
 
        <script src="leaflet.js"></script>
        <script src="leaflet.ajax.min.js"></script> 
</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 &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(mymap);

    var geojsonLayer = new L.GeoJSON.AJAX("bb4326.geojson");       
    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 ] } }
]
}
8
  • 2
    do you have an error message in your browser?
    – ziggy
    Commented May 5, 2021 at 15:23
  • 2
    See my answer at GeoJSON does not appear on my Leaflet map
    – TomazicM
    Commented May 5, 2021 at 15:40
  • 1
    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. Commented May 5, 2021 at 15:53
  • 1
    Ar you running this from server or from file system? Any errors in the browser debugger network section?
    – TomazicM
    Commented May 5, 2021 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. Commented May 10, 2021 at 11:07

0