0

I'm trying to load a local GeoJSON to a leaflet map. I'm new to leaflet so I was just following this example: https://www.igismap.com/add-load-geojson-file-point-polyline-polygon-map-leaflet-js/

So in the page html, I added this:

<div id="map" style="width: 600px; height: 400px; position: center;"></div>
<script src="maps/overview.js"></script>

And in the overview.js file, I added this:

// loading GeoJSON file - Here my html and usa_adm.geojson file resides in same folder
$.getJSON("/maps/area.geojson",function(data){
// L.geoJson function is used to parse geojson file and load on to map
L.geoJSON(data,{style: myStyle}).addTo(map);
});

When I used the Brackets to see the live preview of the page, the features in the geoJSON file were shown. But when I accessed it from the web, the polygon was not shown. What could be the issue here?

Update: Error found in browser console: enter image description here

Improve this question
3
  • probably a CORS issue – ziggy Jan 26 at 17:23
  • Look for the errors in the browser debugger console. Any errors there? Any errors in the debugger network section? – TomazicM Jan 26 at 17:42
  • @TomazicM Yes. "Failed to load resource: the server responded with a status of 404 (Not Found)" – J.Tran Jan 26 at 22:48
0

Thanks all for the suggestions. I found the 404 error is due to the .geojson extension is not configured in IIS. I fixed the issue by adding '.geojson' in MIME types of IIS manager (https://bobcares.com/blog/how-to-add-mime-type-in-iis/). I hope it will not cause any unexpected issues.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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