I am trying to load a shapefile in Leaflet but no luck, It just loads the map. not sure what I am missing.

Here is the file: http://data-atgis.opendata.arcgis.com/datasets/2ba102832e8b4d69a15e33e9a1c8d63a_0.zip

I have downloaded leadlet.shpfile.js, shp.js, catiline.js and saved them next to my HTML along with the shapefile as shown below. enter image description here

and here is my HTML code

    <!DOCTYPE html>
  <meta charset="utf-8" />
  <title>Esri Leaflet Quickstart</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js" data-require="[email protected]" data-semver="0.7.3"></script>

    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  <script src="AT_2.geojson" type="text/javascript"></script>

<div id="map"></div>
<script src="catiline.js"></script>
    <script src="leaflet.shpfile.js"></script>
    <script src="shp.js"></script>
var geo = L.geoJson({features:[]},{onEachFeature:function popUp(f,l){
            var out = [];
            if (f.properties){
                for(var key in f.properties){
                out.push(key+": "+f.properties[key]);
        l.bindPopup(out.join("<br />"));
  var map = L.map('map').setView([-36.833891798833903,174.830803391713999], 11)

var base = 'AT_Infrastructure_Projects.zip';
    shpfile.once("data:loaded", function() {
        console.log("finished loaded shapefile");


Since I need this map needs to be sent as an email attachment and js files are not allowed to be included as attachments, I have included those js files (catiline, shp,leaflet.shpfile.js) within tags. but I am receiving this error enter image description here

Seems the solution for the above are available here:

https://www.youtube.com/watch?v=nx8E5BF0XuE and here https://www.chromium.org/Home/chromium-security/extension-content-script-fetches/ but none of the suggested solutions in the video works for me as I need my user to just open the html.file without changing anything on their system.

  • Any errors in the browse debugger console?
    – TomazicM
    Commented Jul 29, 2021 at 6:46

1 Answer 1


Your code seems like a mixture of examples from various sources that of course does not work together. There are several reasons why it does not work:

  • You have ages old //cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js Leaflet library reference at the end of references, which should go out.
  • GeoJSON layer geo is never added to the map.
  • .addTo(map) for shp(base) is wrong and shouldn't be there. Data is added to geo layer with geo.addData(data) statement.
  • References to shpfile layer should go out, since there is no such layer.

Your code should then look something like this:

var map = L.map('map').setView([-36.833891798833903,174.830803391713999], 11)

var geo = L.geoJson({features:[]}, {
  onEachFeature: function popUp(f, l) {
    var out = [];
    if (f.properties){
      for(var key in f.properties){
        out.push(key + ": " + f.properties[key]);
      l.bindPopup(out.join("<br />"));

var base = 'AT_Infrastructure_Projects.zip';

And this is the result:

enter image description here

  • Are those js libraries (catiline.js) are available online as CDN? Commented Jul 29, 2021 at 19:21
  • If you look in the docs of catiline.js at github.com/calvinmetcalf/catiline, you'll see the following remark: Important: the file catiline.js or catiline.min.js should be a standalone file hosted on the same domain as your web page. If you can't, or need to bundle catiline but you need it to work on IE10, Opera, and Safari, you have to host the file "SHIM_WORKER.js" on the same domain as the html file and set the path to it in a global variable SHIM_WORKER_PATH before you load catiline.
    – TomazicM
    Commented Jul 29, 2021 at 19:32
  • If you have no problem with that, you can refer to it at unpkg.com/[email protected]/dist/catiline.js
    – TomazicM
    Commented Jul 29, 2021 at 19:34
  • Thanks, I included those between script tags, seems the problem has been solved, but I am receiving two errors related to cross-origin, trying to find a solution for this as well in Google. Commented Jul 29, 2021 at 19:36
  • 1
    @MohsenSichani Having had the same issue, the best approach I've found is to convert the shapefile to a geojson which you can store as a js file (with just var data = {json data} and include it via <script>. I don't see an easy solution to cross-origin problems using local shapefiles.
    – Josh
    Commented Jan 17, 2023 at 10:07

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.