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月08日T18: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
Vince
20.5k16 gold badges49 silver badges65 bronze badges
-
Loading map from server or from file system? Any errors in the browser debugger console and/or network section?TomazicM– TomazicM2021年06月09日 06:40:59 +00:00Commented 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– Ian Turton2021年06月09日 07:47:19 +00:00Commented 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– TomazicM2021年06月09日 09:25:04 +00:00Commented Jun 9, 2021 at 9:25
1 Answer 1
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.
answered Jun 8, 2021 at 19:44
-
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– DaveF2021年06月09日 21:37:53 +00:00Commented 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.htmland Python does the rest!15Step– 15Step2021年06月10日 15:20:08 +00:00Commented Jun 10, 2021 at 15:20 -
lang-js