Layer Control?

[clillie]

Hello, I've been pulling my hair out all morning. I have added the control along with the shapefile script to my page. The Control shows up, and the upload option is there, but no shapefile is being added to my map.

I do currently have another few controls already on my map..... There is a layer control.... Could this be an issue. Is there a particular layer that the shapefile is added to?

[mikegough]

Hi clillie,

First make sure you can open the sample map.html file in your browser and can successfully upload the sample zipped shapefile located in the shp directory. If that works, try uploading your shapefile. Please note that your shapefile has to be in a zipped directory; if you just browse to the .shp file, it will not work.

If you are not able to upload your shapefile to the sample map, then there's something about your shapefile that it doesn't like. What coordinate system is it referenced to? Try projecting it to something standard (e.g., GCS_WGS_84).

Next try uploading the sample shapefile (shp/management_area.zip) to your leaflet application. It should show up as a tiny polygon at (-116.959948 43.504602), west of Boise, Idaho. If that doesn't work, there's something about your application that the leaflet control doesn't like.

It may be conflicting with your layer controls. Hard to say. Try the things above first, so you can rule those out.

Also note that this control uses shapefile-js, so be sure you're importing that in your header.

[clillie]

Thank you for the reply, I have checked out my shapefile which is indded in WGS84 format. It does work on your sample map. Your shapefile does not work on my map.
The control is there, and when I load the shape file ArrayBuffer (20801) shows up in the Chrome console. My next idea is to try and take away the layer information as a test. This map has 4 controls on it: 1) Layer Control 2) Search Control 3) Draw Control 4) Points in Zone Control

I guess one by one I'll have to see if taking them away helps or not.

[mikegough]

Those sounds like good things to try. Here's another thing to try:

First, make a backup of L.Control.Shapefile.js. Then open up the original and replace the loadArrayBuffer function on line 56 with the code below. I changed the variables named "layer" on the theory that perhaps those may be causing problems with your other controls and made the variable called myLayer global for the purposes of testing. Refresh your browser & try again to see if it works. If it still doesn't show up, try opening up the console and typing in map.addLayer(myLayer). Look in the console for any errors. Also try bringing it to the front by typing myLayer.bringToFront() into the console.

    // Convert the array buffer to geojson and add it to the map as a layer
    loadArrayBuffer: function(buffer) {

        shp(buffer).then(function (geojson) {
            var geojsonLayer = L.geoJSON(geojson);
            var layers = geojsonLayer._layers;
            Object.keys(layers).forEach(function(key) {
                myLayer = (layers[key]);
                myLayer.addTo(map);
            });
        });
    }

[clillie]

Hello.... A few more pieces of information. 1) I was using leaflet 0.77. I've since tried with 1.03 and 1.31.... same story. 2) I modified the L.Control.Shapefile.js file as you suggested. I rand the myLayer.bringToFront() on the console, and came up with the following screenshot....

[mikegough]

Hmmm...so the console message indicates that the layer exists. What do those 3 errors in the console say? Have you tried your idea of removing your controls one by one?

Since your shapefile works in the sample map, we know that there's something about your application that the control isn't playing nicely with. There could also be something in your application that is conflicting with the Shapefile JS dependency. I really can't say what these things might be though.

When I do myLayer.bringToFront(), I don't see the "editing" property in the console that I see in your screen capture. Are you using Leaflet.Editable? If so, try disabling that.

[clillie]

Hello, Once again thank you for your reply. The 3 errors were extension errors in Chrome. I disabled them, and the errors are gone. Here is the html markup that I was using.
I've commented out all the extra libraries that the page was loading. I also modified the getmap function to basically load exactly what you load in your sample map. Still no dice! The developer that previously worked on this decided to load all the libraries when first logging on.... so I will have to double check that file too.

Found Barns