0

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.

  • What's the value of your overlayMaps variable? – IvanSanchez Dec 10 '17 at 23:45
  • From the documentation for UniForm plugin github.com/chriscalip/L.UniformControl it looks like that after control.addTo(m) you are missing control.renderUniformControl() call. – TomazicM Dec 11 '17 at 17:41
1

i see a mistake in the code, no overlayer value. So i try with this :

    <script type="text/javascript" charset="UTF-8">

//----------------
 var watercolor = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

        });
     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 m = L.map('map', {
    center: [10, -1],
    zoom: 6,
   layers: [watercolor, geo ]
});

//}}).addTo(m);
      var base = 'Fr_admin.zip';
        shp(base).then(function(data){
        geo.addData(data);
        });

    var baseMaps = {
    "BaseLayer": watercolor
};
var overlays = {
        "shapefile": geo
    };
L.control.layers(baseMaps,overlays).addTo(m);




        </script>

It 's work, i can chose to display the shapefile or not. But dont return all segmentation like here :http://leaflet.calvinmetcalf.com/#3/32.69/10.55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.