1

I've a problem loading GeoJSON data into Leaflet map using getJSON. None of the GeoJSON data is displaying. The basemap & two circles are showing so it looks like Leaflet is working as expected. Both of these files are local & in the same folder.

<!DOCTYPE html>
<html>
    <head>
        <title>Base 1_71</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
        <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <script src="osmtogeojson.js"></script>
        <style>
            body {padding: 0;margin: 0;}
            html, body, #map {height: 100%;width: 100%;}
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            var osm = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {opacity: 0.7});
            var map = L.map('map').setView([51.3718,-2.3460], 14).addLayer(osm);
                    var Radius = 2000
            L.circle([51.3813864, -2.3596963], {radius: Radius,opacity: .5,fillOpacity: 0}).addTo(map);

            $.getJSON("TTCircuitWays.geojson", function (data) {
            L.geoJson(data, {
                color: 'red',
                weight: 3,
                opacity: 1,
            }).addTo(map);
        }); 
        L.circle([51.3823864, -2.3596963], {radius: Radius,opacity: 1,fillOpacity: 0}).addTo(map);
        </script>
    </body>
</html>

Geojson data:

{
  "type": "FeatureCollection",
  "generator": "overpass-ide",
  "copyright": "The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.",
  "timestamp": "2021-06-08T18:49:49Z",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "@id": "relation/4137412"
      },
      "geometry": {
        "type": "MultiLineString",
        "coordinates": [[[-2.3659215,51.3822893],[-2.3581637,51.3829442]],[[-2.3567509,51.3834819],[-2.357133,51.3833276],[-2.3576093,51.3831429],[-2.3576622,51.3831224],[-2.3581637,51.3829442]],[[-2.3521667,51.3852626],[-2.3518664,51.3854071],[-2.3518386,51.3854365],[-2.3518186,51.3854736],[-2.3517752,51.3855541]]
        ]
      }
    }
  ]
}

What's strange is that this & other examples I've written worked a couple of years ago and even internet examples such as this one fail: http://www.gistechsolutions.com/leaflet/DEMO/Simple/indexMap1.html

Improve this question
3
  • Loading map from server or from file system? Any errors in the browser debugger console and/or network section?
    – TomazicM
    Commented Jun 9, 2021 at 6:40
  • Looks like an axis order issue to me - or does leaflet use a lat/lon order by default?
    – Ian Turton
    Commented Jun 9, 2021 at 7:47
  • 1
    @IanTurton In API calls Leaflet uses lat/lon order by default, see for example leafletjs.com/reference-1.7.1.html#latlng. GeoJSON data retains standard lon/lat coordinate order.
    – TomazicM
    Commented Jun 9, 2021 at 9:25

1 Answer 1

Reset to default
2

Your GeoJSON loads just fine for me. Are you making sure to load your script through a server (e.g. using Python http.server)? Could be a CORS issue if you're trying to load the GeoJSON locally.

enter image description here

Improve this answer
3
  • Yes Looking at the console as @TomazicM suggested, it looks like it's a 'CORS' issue. Turn off privacy.file_unique_origin in Firefox as described here: & it loads. I'm confused as to why FF thinks there's a security risk loading from my local hard drive but allows download of data from a remote server. As this is just for my usage is setting up an http:server the best/simplest way forward or is it safe for me to keep privacy check off?
    – DaveF
    Commented Jun 9, 2021 at 21:37
  • I would avoid turning off that privacy option, setting up a Python server is simple enough, you just need to make sure your file is named index.html and Python does the rest!
    – 15Step
    Commented Jun 10, 2021 at 15:20
  • Thanks. I'm having problems setting up the server. I've posted a separate question Here. If you have a minute I'd appreciate any help.
    – DaveF
    Commented Jun 10, 2021 at 16:31

Your Answer

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

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