Shapefile not Showing up in Leaflet Map

Question

I have a very simple example map that I would like to add a shapefile to. The shapefile is zipped and I've checked that it shows up here http://leaflet.calvinmetcalf.com/#3/32.69/10.55, however it does not show up on my example map. Any help with this would be greatly appreciated.

Code

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
  <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
  <script src="Plugins//shp.js"></script>
  <script src="Plugins//leaflet.shpfile.js"></script>

  <!--
Needed?
-->
  <style>
    #map {
      position: relative;
      margin: 0 0 0 0;
      height: 650px;
      width: 700px;
    }
  </style>

</head>

<body>
  <div id="map"></div>
  <script>

    var map = L.map('map', {
      minZoom: 1,
      maxZoom: 9
    });

    map.setView([34.15, -112.0], 7)
    map.setMaxBounds(map.getBounds());

    Streets = L.tileLayer(
      'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYXVzdGluY2FyZXkiLCJhIjoiY2thanlmdGU4MGFjeTJ5bGJqcHgzZTB3NiJ9.qkuctvbWSIpVLidV8ptKcg', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
      }).addTo(map);

      var shpfile = new L.Shapefile('TestShapefile.zip');

      shpfile.addTo(map);

      var overlayMaps = {
            "TestShapefile": shpfile
        };

      L.control.layers(overlayMaps).addTo(map);

  </script>
</body>
</html>

In the Plugins folder that I reference I have the following javascripts:

leaflet.shpfile.js and shp.js

Yes. I should have looked there. Access to XMLHttpRequest at 'file:///XXXX' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. TestShapefile.zip:1 Failed to load resource: net::ERR_FAILED — Dan, Apr 15 '21 at 15:49

kboul · Answer 1 · 2021-04-15T20:10:44.773

1

This can happen if you have included a url with a domain different than yours, then you would receive a CORS error. It is purely for controlling what a domain can request from another one. f.i

var shpfile = new L.Shapefile("https://someOtherDomain.com/congress.zip");

So try placing the file locally . F.i where you have also your .js files like this:

var shpfile = new L.Shapefile("./congress.zip");

Here is a demo

Note also that you have to run your index.html inside a web server and not via the file system by opening the html file on the browser. An alternative would be to run it via a module bundler like webpack or parcel etc. similar to the demo.

edited Apr 15 '21 at 20:10

answered Apr 15 '21 at 16:46

kboul

13,836
5
42
53

That makes sense. I used your demo example with my shapefile and was able to get what I want (although for some reason the extent and zoom limits are not being implemented). In reference to opening via a web server, if I were to upload the this to github is it just the index.html file and the zip file that that I would need to upload to a repository? – Dan Apr 15 '21 at 20:01
1

Yes, unless you have split the js part into separate script files, thus you need to include them also. Same applies with styles & css files. If you use it like it in the demo you only need these two. – kboul Apr 15 '21 at 20:08

Shapefile not Showing up in Leaflet Map

1 Answers1