Skip to main content
naming; tyop
Source Link
Vince
  • 20.3k
  • 16
  • 48
  • 65

Loading geojsonGeoJSON data into Leaflet map using getJSON problem

I've a problem loading geojsonGeoJSON data into Leaflet map using getJSON. None of the geojsonGeoJSON 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.

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

Loading geojson data into Leaflet map using getJSON problem

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.

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

Loading GeoJSON data into Leaflet map using getJSON problem

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.

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

Source Link
DaveF
  • 13
  • 4

Loading geojson data into Leaflet map using getJSON problem

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