Display Shapefile with leaflet and layer control

Question

Hello I try to implement a leaflet pluging, for display a local hosted shapefile. The display of the shapefile work, but i want to add a layer control (for togle shapefile layer). the plugin link : https://github.com/calvinmetcalf/shapefile-js

the demo link :http://leaflet.calvinmetcalf.com/#3/32.69/10.55

I want to implement the layer control on demo page

<script>
var m = L.map('map').setView([0, 0 ], 10);
var watercolor = 
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        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('Fr_adm.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");
    });
     // initialize stylable leaflet control widget
var control = L.control.UniForm(null, overlayMaps, {
        collapsed: false,
        position: 'topright'
    }
);
// add control widget to map and html dom.
control.addTo(m);


</script>

The shapefile Fr_adm.zip is displayed, but no layer control. Thank for your help.

Answer 1

Your problem is that overlayMaps is not defined. Open your console and you should see an error stating this.

Looking at the documentation for L.control.UniForm maps (an extension of leaflet), we can see:

/ **
* standard leaflet code.
** /
// initialize stylable leaflet control widget
var control = L.control.UniForm(null, overlayMaps, {
        collapsed: false,
        position: 'topright'
    }
);

What is overlayMaps in this? To answer we need to take a look at the documentation for standard leaflet code. overlayMaps is a list of key, object pairs:

... we’ll create two objects. One will contain our base layers and one will contain our overlays. These are just simple objects with key/value pairs. The key sets the text for the layer in the control (e.g. “Streets”), while the corresponding value is a reference to the layer (e.g. streets).

var baseMaps = {
    "Grayscale": grayscale,
    "Streets": streets
};

var overlayMaps = {
    "Cities": cities
};

Consequently, overlayMaps in your example should look like:

var overlayMaps = {"Name To Display":shpfile }

Once defined you should be able to create your layer control as normal.