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 wokked a couple of years ago and even internet examples such as this one fail:
http://www.gistechsolutions.com/leaflet/DEMO/Simple/indexMap1.html