I'm a new member and a beginner with Leaflet and JavaScript.

I try to display shapefile data on my webmap with Leaflet. But it doesn't work. All the data (.shp, index.html... ) in WGS84 are on my computer, in the same directory.

My JavaScript code is:

var shapeLayer = new L.Shapefile("data/QualiAgro.zip");

I get the following Console message:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://some-url-here. (Reason: additional information here).

If I understood this is a CORS problem (url). But I don't know how to do? Does any one have any idea?

I also try the shapefile data with: http://leaflet.calvinmetcalf.com/#3/32.69/10.55 There's no display.

Thank you Vince for your answer.

I have installed "Wampserver2" on my computer to run my html from a local server.
I changed the JavaScript code :

    var shapeLayer = new L.Shapefile("http//localhost:80/data/QualiAgro.zip");

But I still have the same problem with no message Console for the mistake.

  • 1
    For security reasons access to files on local file system via AJAX (XMLHttpRequest) is blocked in most browsers. You'll have to run your HTML app from (local) server. – TomazicM Apr 14 '20 at 16:13

Open command line and navigate to the folder in where your project is, and then run this command: python3 -m http.server

This may solve your problem as mentioned in the comments.

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.