Hello ! First, thanks for this awesome project.

I'm currently developping an app that use leaflet and shapefile. But I'm also using an api that authenticate users with a JWT. Each users have some shapefile to load, so I would need to add authentication headers to "new L.Shapefile()".

Is that possible ? If yes how could I do it ?

Hello,
After loading a file with a projection inside (EPSG:31700 --- prj file --- http://spatialreference.org/ref/epsg/dealul-piscului-1970-stereo-70/prj/) all areas are not fitting correctly on map:

Is there any way to fix this or what should I do to shift all the areas after import?

Thank you!

It seems that we can't put our ziped shapefile data and the shp.js file in any other place than the root folder. It could be cool to support folder organisation as :

var shpfile = new L.Shapefile("path/to/shapefiles/data-shp.zip",{});
shpfile.addTo(map);

As with other posters I am having trouble with UK shapefile data.
Whilst the data imports correctly there is clearly a problem with the datum, as everything is shifted.
The source of the shapefile data is the UK Ordnance Survey (it is their 'Open Data'); I am confident that they know what they are doing.
Please can you help point me in the right direction to try and solve this.

PS Thanks for the excellent demo, http://leaflet.calvinmetcalf.com, very impressive.
Jim

Apologies if I'm being stupid, I have a shape file in the following projection:
PROJCS["British_National_Grid",GEOGCS["GCS_OSGB_1936",DATUM["D_OSGB_1936",SPHEROID["Airy_1830",6377563.396,299.3249646]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Transverse_Mercator"],PARAMETER["False_Easting",400000.0],PARAMETER["False_Northing",-100000.0],PARAMETER["Central_Meridian",-2.0],PARAMETER["Scale_Factor",0.9996012717],PARAMETER["Latitude_Of_Origin",49.0],UNIT["Meter",1.0]]

When adding this to the map, the objects are offset from their correct position by around 200m East /North-East.

I've tried digging through the code in shp, and can't work out whether the projection is automatically detected and converted, or whether I will need to manually convert or pass any options.

The README.md says "To easily try this out using your own shapefile, see the demo at leaflet.calvinmetcalf.com, ..." but when I go to leaflet.calvinmetcalf.com, I just get the github page showing the README.md. How to I see the demo?
I suppose I must be dense, but I can't see how to do it. Maybe a redirect was changed and the README.md wasn't updated?

I am trying to upload shapefiles from the local drive with a upload button. You have a page were it allows the user to upload their shapefile but you do not have the mapsetup.js were the shapefile uploader is defined. Can you share an example of that code please.

I'm adding a shapefile layer as follows:

var levelStyle = function(feature) {
    switch (feature.properties.CNTR_VALUE) {
      case 0.1: return { weight: 2, color: "rgb(240,130,40)" };
      case 1.1: return { weight: 2, color: "rgb(250,60,60)" };
      case 2.1: return { weight: 2, color: "rgb(160,0,200)" };
        default: return { weight: 0, color: "rgba(0,0,0,0)" };
    }
}
var shptest = new L.Shapefile("/charts/leaflet/levels-160.zip", {
    style: levelStyle
});
var overlays = {
    "Overlays": {
        "Severe weather levels": levels,
        "Surface based CAPE": capesfc,
        "500hPa Geopotential height": gph500hpa
    },
    Test: {
        Test: shptest
    }
};
L.control.groupedLayers(basemaps,overlays,{
   exclusiveGroups: ["Overlays"]
}).addTo(mymap);

In the map, the shapefile appears to be shifted ~0.25° to the North. When I open the same shapefile in QGIS, it's displayed where it belongs. The shapefile is reprojected from EPSG:4326 to EPSG:3857 with ogr2ogr. Both the original and the reprojected shapefiles display identically in QGIS.

I attach the shapefile in question.

levels-160.zip

Because the shp is being accessed from file://, but the basemap is http/s, a CORS error is thrown when opening index.html locally.

This can be an issue if one os looking to deploy this as a simple shp viewer on a local system.

To replicate simply download a copy of the repo and open index.html in Chrome.

I am haivng a problem opening a shapefile. The shapefile can be found, here:

http://18.216.197.92/Parcel.zip

This shapefile will work just fine when placed on the demo, however, when I try to load it into the test page here:

18.216.197.92/test-Leaflet.html

It will not show up on Chrome. It will show up if I load the page into Firefox, however.

What am I doing wrong?

I'd like to offer my users to upload these 3 files instead of having to compress it into .zip first. Does the library currently already allow this?

The other solution I had in mind is to have them select all three, I zip them up on my end, and then proceed as usual.

How decodiing(or set coding) for value(on russian) from dbf-file. Not display correct?

more: http://stackoverflow.com/questions/24081050/bad-text-from-dbfshapefile

Hi There, how would I go about implementing this in conjunction with leaflet-directive?

I have shp in epsg:4326 with circle, but circle show on leaflet map how ellipse. If i change shape projection on EPSG:3857 my shape not show.

Hi Calvin,

I used shapefiles that I got from http://www.geopostcodes.com/Indonesia - sample data. The downloaded data contains not only shapefiles, but also some others. Then I took only the Shapefile folder (containing shp, shx, dbf, and prj), zipped them, and feed L.Shapefile with that (I have performed chmod +x to the zipped file).

However, the shapes are not rendered to the map. And before, I have tried two other shapefiles from http://thematicmapping.org/downloads/world_borders.php and both worked (both are .zip files from the start).

Any thought on this? Thanks!

*Also have posted this question at http://stackoverflow.com/questions/27418105/leaflet-shapefiles-required-to-show-shapes

I'm unable to load my project shapefile on the webmap. Using the 'councils' example it works fine and I can see the 'finished loaded shapefile' message on console but taking a look at my shapefile console, there are no messages at all. I already verified the shapefile is in EPSG:4326. Please,help me out.

(also posted in https://stackoverflow.com/q/60265760/274677)
I am following the Leaflet essentials book, on how to load shapefiles.
The book's instructions are:

First, add references to two JavaScript files. The first,
leaflet-shpfile, is the plugin, and the second depends on the
shapefile parser, shp.js:

<script src="leaflet.shpfile.js">
</script><script src="shp.js"></script>

Next,
create a new shapefile layer and add it to the map. Pass the layer
path to the zipped shapefile:

var shpfile = new L.Shapefile('council.zip');
shpfile.addTo(map);

I've followed the above instructions with slight changes since I'm on Webpack. Here's what I 've done:

1. installed shpjs with npm i shpjs --S
2. downloaded leaflet.shpfile.js from github and placed it in src/
3. in my *.js file I require both shpjs and leaflet.shpfile.js with the following code:

const shp=require('shpjs');
require('./leaflet.shpfile.js');

I then access the shapefile as instructed:

console.log(shp);
const shapeFileLayer = L.shapefile(someURL);

On the last line of code I get the following trace:

react-dom.production.min.js:196 ReferenceError: shp is not defined
    at NewClass.addFileData (leaflet.shpfile.js:38)
    at NewClass.initialize (leaflet.shpfile.js:25)
    at new NewClass (leaflet-src.js:300)
    at Object.L.shapefile (leaflet.shpfile.js:67)
    at Map.createLayerGroups (main.js_+_3_modules:342)
    at Map.componentDidMount (main.js_+_3_modules:186)
    at ik (react-dom.production.min.js:251)
    at exports.unstable_runWithPriority (scheduler.production.min.js:18)
    at fg (react-dom.production.min.js:120)
    at Yj (react-dom.production.min.js:244)

The console.log statement on the line immediately above succeeds, showing that some function shp is defined. I cannot, then, explain why I get the reference error shp is not defined on the line that comes immediately next.

I made a small plugin that uses your two plugins that is probably of interest to people using this one. I haven't done much testing on it, so I don't want to submit it to main leaflet docs.

This plugin is an extension to the Leaflet.draw toolbar that adds an extra button for importing a shapefile.
Leaflet.draw-extension

Demo

Is there a good place on github to post things like this?

Hello, I want to make use of the library because I have a very large geoJSON file (too many nodes) and when I try to use it in my site (hosted in a free server by the way), it just takes too long. I think this plugin could solve that. I am trying to implement the shp.js created by Mano Marks as it does this site: https://www.e-education.psu.edu/geog863/l5_p3.html, but I made it work only for point files.
To start using your library I just downloaded the demo html, the libraries (directly from the demo), and also the congress.zip. But when I open (locally) on my browser, it just doesn't load the shapefile.. if I can't make that work I just can't continue. (I am not even close to a programmer, I have only basic knowladge). Thank you.

This is an awesome piece of code, great effort.
How would you go searching within the Shapefile (ie if there was a column called Name and you wanted to find a particular result from that column)?

Hello, I am currently working on a website that maps a shapefile that contains text that is written in Greek. When I open this shapefile in ArcGIS, the Greek text appears as it should. When I use your plugin on leaflet the text does not render as it should. Here is the image:
ONOMA, PERIODOS & XRHSH contain Greek text, but are not rendered as Greek. Do you have any ideas to why this could be?

Hi!
Am I the only one who cannot make it work with Internet Explorer 11? It get stuck on loading features. Works with everything else (Win/Mac/Ubuntu/Android-chrome/firefox/safari).
Same issue with leaflet.FileGBD (I'll post it there too).
Thanks,
FX

Hi, first of all, thanks for your plugin. It does a great job with all the shape files I've tried, except the ones that have roads (lines) in them. The curious thing is if I load the shapefile on your demo page, the lines show up fine, but I've cloned your repo and modified the index to load my road shape files on the map and they wont get drawn. I'm a newbie on maps and cartography and dealing with projections and positions its getting my nuts.
Thanks for your advice.

    <script type="text/javascript" src="/leaflet-0.5.1/0.7.2/catiline.js"></script>
    <script type="text/javascript" src="/leaflet-0.5.1/0.7.2/leaflet.shpfile.js"></script>
    ...................
     var test_shp = new L.Shapefile('/dostup/test_shp/9999').addTo(map);
     alert(test_shp.getLayers().length);
     .....................

alert return 0
9999.shp good showing in mapinfo(polygons).

I'm having trouble using zip files on Mac Chrome. When I extract the zip the layers show. I'm not getting any JS errors this was just a hunch I had. Is anyone else able to reproduce?

how can I chose different colors for each shapefile that I add to map?

I am receiving below error in the console while uploading a shapefile. Any reason as to why that is happening?

I'm using zipped shapefiles loaded from dronedeploy and passing an arraybuffer to leaflet.shapefile. I'm working on three projects. One succeeds but two don't I traced into shape and found this being throw by unzip:
RangeError: Maximum call stack size exceeded
at utf8Slice (http://localhost:1841/js/leaflet1/shp.js?_dc=1497547765872:1029:30)
at Uint8Array.slowToString (http://localhost:1841/js/leaflet1/shp.js?_dc=1497547765872:710:16)
at Uint8Array.toString (http://localhost:1841/js/leaflet1/shp.js?_dc=1497547765872:739:23)
at Object.utf8decode (http://localhost:1841/js/leaflet1/shp.js?_dc=1497547765872:3984:53)
at Object.utf8decode (http://localhost:1841/js/leaflet1/shp.js?_dc=1497547765872:3590:21)
at ZipObject.dataToString (http://localhost:1841/js/leaflet1/shp.js?_dc=1497547765872:2788:22)
at ZipObject.asText (http://localhost:1841/js/leaflet1/shp.js?_dc=1497547765872:2835:29)
at http://localhost:1841/js/leaflet1/shp.js?_dc=1497547765872:320:20
at Array.forEach (native)
at module.exports (http://localhost:1841/js/leaflet1/shp.js?_dc=1497547765872:315:8)

The line numbers won't mean much since I put some debugging in. I can download the zip file and drag it onto your test project and it works. I wondered if it's a size issue but the failed files give:
ArrayBuffer returned 12228250
ArrayBuffer returned 1882584

and the successful on:
ArrayBuffer returned 6531249

Only the successful one fires 'data:loaded' of course.

My code:

`var corsRequest = new Request (exp.download_path, init);

fetch (corsRequest).then (function (response) {
	return response.arrayBuffer ();
}).then (function (arrayBuffer) {
	console.log ('ArrayBuffer returned', arrayBuffer.byteLength);

	var shapeLayer = new L.Shapefile(arrayBuffer, {
		onEachFeature: function (feature, layer) {
			if (min == undefined) {
				min = feature.properties.elevation
			}
			
			if (max == undefined) {
				max = feature.properties.elevation
			}
			
			min = min < feature.properties.elevation ? min : feature.properties.elevation;
			max = max > feature.properties.elevation ? max : feature.properties.elevation;
		
			layer.bindPopup (Object.keys (feature.properties).map (function (k) {
				return k + ": " + feature.properties[k];
			}).join("<br/>"), {
				maxHeight: 200
			});

		},

		style: function(feature) {
			var num = Math.floor (Number (feature.properties.elevation) + 100);
			num = num / 200;
			var r = Math.floor (num * 255);
			var g = Math.floor (num * 255);
			var b = Math.floor (num * 255);
			return { color: 'rgba(' + r.toString () + ',' + g.toString () + ',' + b.toString () + ',' + 0.6 + ')' };
		},

		filter: function (feature, layer) {
			return feature.properties.ID % 4 == 0;
		}
	});


	shapeLayer.addTo (this.map);

	shapeLayer.once ('data:loaded', function () {							
		console.log ('BOUNDS', shapeLayer.getBounds().isValid());						
		console.log (arguments);
	});
}.bind (this));

`

Hello,
I'm now using your plugin for shapefiles.
I want to know if there's a method to add new properties (self-defined) into the shapefile object?
There's a method like "feature.properties.XXX = YYY" to add new property to the feature in GeoJson.
Wondering if there's something similar to it or another way to do this.
Thanks.

I have a zipped shapefile that generally works with stand-along shapefile tools, but which fails with the demo upload application. The error generated are:

shit RangeError: Invalid DataView length -4
at new DataView ()
at ParseShp.getRow (shp.js:sourcemap:419)
at ParseShp.getRows (shp.js:sourcemap:407)
at new ParseShp (shp.js:sourcemap:371)
at module.exports (shp.js:sourcemap:429)
at shp.js:sourcemap:103
at Array.map ()
at Function.shp.parseZip (shp.js:sourcemap:92)
at shp.js:sourcemap:140
at tryToUnwrap (shp.js:sourcemap:3000)
blob:http://leaflet.calvinmetcalf.com/40feeb75-ebed-4a72-9e49-67f0c8707e95:15 shit

How can I dig into this error tracking down what I've done wrong in the shapefile? Or what alternate steps should I use when I have an issue like this to track it. I guess I could try parsing the shapefile component files...

Thanks!
Rotor.zip

Hi Calvin,

First, thank you for this plugin.

This is the issue I encounter. When loading a shape zip file. I get a "promise.then(...).catch is not a function" error:
at e.addFileData (leaflet.shpfile.js:57)
at e.initialize (leaflet.shpfile.js:23)
at new e (leaflet.js:5)

but on "http://leaflet.calvinmetcalf.com/" it successfully loads the file. The file is 51MB in size which I download here (https://tnris-datadownload.s3.amazonaws.com/d/otls/state/tx/otls_tx.zip).

Looking forward for your response.

I got this error while i am trying to load shp file on local host.
GET http://localhost/WEBGIS/shp.js 404 (Not Found)

unexpectedly the same code working fine online.

some body help me to find out the solution...plzzz

Hello Calvin,

I was able to recreate your local zipfile example in my application unfortunately I was unable to get the program to read the properties of the shapefile. In the info window for the shapefile it shows a color code but only black dots show up for shapefiles. If possible can you point me to where in your script the feature style is loaded I am guessing one of my files that is associated in the require.js is incorrect but I am not sure which file is causing this.

Hello, I'm having an issue loading a raw arraybuffer into the shapefile program. Here is the error I get in chrome:

GET http://domain.com/dir/rawinflate.min.js.map 404 (Not Found)
[object%20ArrayBuffer].shp:1 GET http://domain.com/dir/[object%20ArrayBuffer].shp 404 (Not Found)
[object%20ArrayBuffer].prj:1 GET http://domain.com/dir//[object%20ArrayBuffer].prj 404 (Not Found)
[object%20ArrayBuffer].dbf:1 GET http://domain.com/dir//[object%20ArrayBuffer].dbf 404 (Not Found)

The plugin is working fine if I load from a url, but I'm just having an issue here. To load it, I use

var r = new FileReader();
r.onload = function (e) {
  var contents = e.target.result;
  var layer = new L.Shapefile(contents, {style: {
    "color": "#000000",
    "fill": "none",
    "weight": 2
  }});
}
r.readAsArrayBuffer(f)

This may very well be an issue on my end, and if so, sorry for opening an issue.

Can you make class static so can be used like marker class ex: L.Shapefile('romania/judete/Arad.zip',{style: firmaStyle}).addTo(map)

Hi There,
Not so much an issue as a plea for help! I have the plugin working to pull in a .zip shapefile onto a website. I would like to be able to run it as it runs in the demo where the user can upload their own file to overlay their data on my map. Is this possible to do?

Any advice on how to go about implementing this would be great. I have a box where the user can browse to a file and select it but I'm not too sure what happens then, can I just pass that file to the new L.Shapefile(uploadedfile) in some way?

Many thanks,

In IE and Firefox not all layers are displayed. In Opera, Chrome is ok.
What is the problem?

var map = L.map('map').setView([45.70, 25.50], 7);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

var myStyle = {
"color": "#ff7800",
"weight": 1,
"opacity": 0.65
};

var myStyle2 = {
"color": "#0000FF",
"weight": 1,
"opacity": 0.65
};

var shpfile = new L.Shapefile('Satu-Mare.zip',{style: myStyle});
shpfile.addTo(map);
var shpfile2 = new L.Shapefile('Oradea.zip',{style: myStyle2});
shpfile2.addTo(map);
var shpfile3 = new L.Shapefile('Maramures.zip',{style: myStyle2});
shpfile3.addTo(map);
var shpfile4 = new L.Shapefile('Suceava.zip',{style: myStyle});
shpfile4.addTo(map);
var shpfile5 = new L.Shapefile('Botosani.zip',{style: myStyle2});
shpfile5.addTo(map);
var shpfile6 = new L.Shapefile('Salaj.zip',{style: myStyle});
shpfile6.addTo(map);
var shpfile7 = new L.Shapefile('Cluj.zip',{style: myStyle2});
shpfile7.addTo(map);
var shpfile8 = new L.Shapefile('Bistrita-Nasaud.zip',{style: myStyle});
shpfile8.addTo(map);
var shpfile9 = new L.Shapefile('Mures.zip',{style: myStyle2});
shpfile9.addTo(map);
var shpfile10 = new L.Shapefile('Harghita.zip',{style: myStyle});
shpfile10.addTo(map);
var shpfile11 = new L.Shapefile('Neamt.zip',{style: myStyle2});
shpfile11.addTo(map);
var shpfile12 = new L.Shapefile('Iasi.zip',{style: myStyle});
shpfile12.addTo(map);
var shpfile13 = new L.Shapefile('Arad.zip',{style: myStyle});
shpfile13.addTo(map);
var shpfile14 = new L.Shapefile('Timis.zip',{style: myStyle2});
shpfile14.addTo(map);
var shpfile15 = new L.Shapefile('Caras-Severin.zip',{style: myStyle});
shpfile15.addTo(map);
var shpfile16 = new L.Shapefile('Mehedinti.zip',{style: myStyle2});
shpfile16.addTo(map);
var shpfile17 = new L.Shapefile('Hunedoara.zip',{style: myStyle});
shpfile17.addTo(map);
var shpfile18 = new L.Shapefile('Gorj.zip',{style: myStyle2});
shpfile18.addTo(map);
var shpfile19 = new L.Shapefile('Dolj.zip',{style: myStyle});
shpfile19.addTo(map);
var shpfile20 = new L.Shapefile('Alba.zip',{style: myStyle2});
shpfile20.addTo(map);
var shpfile21 = new L.Shapefile('Vaslui.zip',{style: myStyle2});
shpfile21.addTo(map);
var shpfile22 = new L.Shapefile('Galati.zip',{style: myStyle});
shpfile22.addTo(map);
var shpfile23 = new L.Shapefile('Tulcea.zip',{style: myStyle2});
shpfile23.addTo(map);
var shpfile24 = new L.Shapefile('Constanta.zip',{style: myStyle});
shpfile24.addTo(map);
var shpfile26 = new L.Shapefile('Olt.zip',{style: myStyle});
shpfile26.addTo(map);
var shpfile25 = new L.Shapefile('Calarasi.zip',{style: myStyle2});
shpfile25.addTo(map);
var shpfile28 = new L.Shapefile('Giurgiu.zip',{style: myStyle});
shpfile28.addTo(map);
var shpfile27 = new L.Shapefile('Teleorman.zip',{style: myStyle2});
shpfile27.addTo(map);
var shpfile29 = new L.Shapefile('Valcea.zip',{style: myStyle2});
shpfile29.addTo(map);
var shpfile30 = new L.Shapefile('Sibiu.zip',{style: myStyle});
shpfile30.addTo(map);
var shpfile31 = new L.Shapefile('Brasov.zip',{style: myStyle2});
shpfile31.addTo(map);
var shpfile32 = new L.Shapefile('Arges.zip',{style: myStyle});
shpfile32.addTo(map);
var shpfile33 = new L.Shapefile('Dambovita.zip',{style: myStyle2});
shpfile33.addTo(map);
var shpfile34 = new L.Shapefile('Prahova.zip',{style: myStyle});
shpfile34.addTo(map);
var shpfile35 = new L.Shapefile('Ilfov.zip',{style: myStyle2});
shpfile35.addTo(map);
var shpfile36 = new L.Shapefile('Bucuresti.zip',{style: myStyle});
shpfile36.addTo(map);
var shpfile37 = new L.Shapefile('Covasna.zip',{style: myStyle2});
shpfile37.addTo(map);
var shpfile38 = new L.Shapefile('Bacau.zip',{style: myStyle});
shpfile38.addTo(map);
var shpfile39 = new L.Shapefile('Vrancea.zip',{style: myStyle2});
shpfile39.addTo(map);
var shpfile40 = new L.Shapefile('Buzau.zip',{style: myStyle});
shpfile40.addTo(map);
var shpfile41 = new L.Shapefile('Ialomita.zip',{style: myStyle2});
shpfile41.addTo(map);
var shpfile42 = new L.Shapefile('Braila.zip',{style: myStyle});
shpfile42.addTo(map);

Hi first of all, thanks for sharing.

I'm trying to include leaflet.shapefile in my project firstly in the simplest way following the "index.html" example. I don't know even if it was intended to be an example, but if so, I noticed that it isn't working. It only shows base tile layer, the "watercolor" one, and it isn't adding to the map the "congress.zip" file because it can't find any feature in it.

Maybe I'm doing something wrong, in that case i would to ask for some help.

Thank you in advance.

I am trying to set an "order" on the layers on my map. I have WMS, WFS, KML, and now (thanks to your awesome plugin) SHP. I am trying to set the "z-index" on this layer, however, it says that the method does not exist.

Is it possible for me to be able to sort the viewing of a SHP layer?

Basically, I want to be able to hide it behind say a KML at the same location.

Thanks.

So I want to use this module for my leaflet map but I'm developing it on ionic. How can I use this module?

What's the best way to deal with project shapefiles using the Leaflet plugin or isn't this currently supported? Thanks!

JS beginner here. I'm tinkering with your plugin and I was wondering if there is some relatively easy way to display a message or an icon indicating that the shapefile is currently loading while the worker is loading it.

Sorry, wrong place :)

Was having some trouble loading larger shape files in my application (~10mb), so went back to see if they loaded alright in the linked to demo. When loading the page, though, it now hangs for me on chrome, firefox, and safari. On firefox, the initial leaflet map loads but get a warning: Unresponsive script for http://calvinmetcalf.github.io/leaflet.shapefile/catiline.js:255

Mac osx 10.10.3
Chrome 43.0.2357.65 (64-bit)
Firefox 38.0.1
Safari 8.0.6 (10600.6.3)

I want to prevent it from downloading...

Hello, thanks for writing this plugin!

I'm having an issue with getting popup information to show up. I loaded a zipped shapefile into an arraybuffer and create a new shapefile like so:

var layer = new L.Shapefile(r.result, {style: {
"color": "#000000",
"fill": "none",
"weight": 2,
"opacity": .9
}}).addTo(leafletMainMap);

It shows up on the map, but when I click on a marker, there is no popup. I tried looking through http://leaflet.calvinmetcalf.com/script.js, but I couldn't find the code that creates the popup. I'm not using the web workers/catiline to do this. Any ideas?

Hi, I have an html file that includes the 2 script source, "leaflet.shpfile.js" and "shp.js". I then did the:
var shape = new L.Shapefile(" url of a zip file hosted in Dropbox ");
shape.addTo(map);

For some reason when I load the html and I go to inspect. There are no error messages and it seems like everything loaded correctly. However, I don't see the shape file. I checked to see if the zip file was the issue however it loaded correctly when I uploaded it to your example.
I also tried by uploading via locally as just a .zip file. This did not work, instead it gave me a "XMLHttpRequest cannot load" CORS issue.
I don't know if this would affect the code but I am also pulling from different libraries such as Turf, leaflet, and some others.

Any thoughts?

HI, im chinese engineer in Taiwan
i try this example use the shapefile zip
and i found this case cant write chinese ,
can u teach me where can i fix this problem
thx!

How can I zoom to certain shapefile?
I have tried like this but not working:

var romania = new L.Shapefile('Romania.zip',{style: romaniaStyle});
romania.addTo(map);
map.fitBounds(romania.getBounds());

The dbf file contains Chinese characters, and they can't display correctly, like this:
æ��å�¨å�°å