1

I'm trying to use the Leaflet Shapefile plugin (https://github.com/calvinmetcalf/leaflet.shapefile). A demo page also shows the plugin's output (http://calvinmetcalf.github.io/leaflet.shapefile/). I downloaded the js files and organised the HTML shared on the demo page. Then I ran the same page locally on my computer. However, the shapefile layer doesn't become visible whatever I did. Any ideas on what the problem might be? I uploaded the files I'm using to the following link (https://we.tl/t-wpdHCsNDO3). I also attached the HTML file below:

<!doctype html>
<html lang="en">

<head>
    <meta charset='utf-8' />
    
    <title>Preview</title>
    
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    
    <script src="catiline.js"></script>
    <script src="leaflet.shpfile.js"></script>
    <script src="shp.js"></script>
    
    <link rel="stylesheet" href="gh-pages.css" />
    
    <style>
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%
        }
    </style>
</head>

<body>
    <div class="github-fork-ribbon-wrapper right">
        <div class="github-fork-ribbon">
            <a href="https://github.com/calvinmetcalf/leaflet.shapefile">Fork me on GitHub</a>
        </div>
    </div>
    <div id="map"></div>
    <script>
        var m = L.map('map').setView([42.09618442380296, -71.5045166015625], 8);
        var watercolor = L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg', {
            attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
        }).addTo(m);

        var shpfile = new L.Shapefile('congress.zip', {
            onEachFeature: function(feature, layer) {
                if (feature.properties) {
                    layer.bindPopup(Object.keys(feature.properties).map(function(k) {
                        return k + ": " + feature.properties[k];
                    }).join("<br />"), {
                        maxHeight: 200
                    });
                }
            }
        });
        shpfile.addTo(m);
        shpfile.once("data:loaded", function() {
            console.log("finished loaded shapefile");
        });
    </script>
</body>

</html>
Improve this question
4
  • Any errors in the browser debugger console or network section?
    – TomazicM
    Commented Mar 24, 2023 at 15:30
  • Here is the link for error messages: imgur.com/a/HCbnHwF
    – Melanie
    Commented Mar 24, 2023 at 20:15
  • All modern browsers disable access to local files through AJAX (XMLHttpRequest) protocol for security reasons. You either have to set up local web server or read data from another web server which allows CORS requests.
    – TomazicM
    Commented Mar 25, 2023 at 7:08
  • Thank you very much for the explanation🙏🏼 If you post it separately as an answer, I will mark it accepted!
    – Melanie
    Commented Mar 25, 2023 at 13:58

1 Answer 1

Reset to default
4

All modern browsers disable access to local files through AJAX (XMLHttpRequest) protocol for security reasons (see https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).

If you don't want to set up local web server and want to use local file system to read your zipped shapefile, this can be done with some trickery, converting content of shapefile to data URL and then bring it in through JS script as JS variable.

To convert shapefile to data URL you can use some online converter like https://dopiaza.org/tools/datauri/index.php. Once you have data URL string, save it to some JS file like shapefile-data.js and assign it to some variable in the file:

var shapefileDataURL = 'data:application/zip;base64,UEsDBBQAAgAIAIN8I0KlIknlmAIAAHwJAAAUAAAAQ09OR1JFU1M ...';

Then you can bring your data in with simple script link:

<script src="data/shapefile-data.js"></script>

File has to be in the same directory as your HTML file or in it's child folder. You can then use it like this:

var shpLayer = new L.Shapefile(shapefileDataURL, ...
Improve this answer
1
  • Thank you very much🙏🏼
    – Melanie
    Commented Mar 25, 2023 at 23:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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