2

I've been trying to learn how to display my shapefiles as a layer on leaflet map then i came across calvinmetcalf github . Using his example i was able to display the councils.zip file as a shapefile layer on the map. But, trying to the do the same with my own shapefile produce no result as the shapefile refuse to load on the map. I couldn't see an error in the console either, so i am stuck on what i could be doing wrong. Here is the code below.

    <script>
    var map = L.map('map',
    {
        center:[11.47,8.20],
        zoom: 10
    });
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
    var shpfile = new L.Shapefile('lg_polygon2.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(map);
    shpfile.once("data:loaded", function() {
        console.log("finished loaded shapefile");
    });
</script>
  • 1
    Can you confirm that your layer is in 4326 projection? Does it need to be in shapefile format? GeoJSON format is a bit more native/easier to handle for webmapping projects? – jbukoski Aug 3 '17 at 15:46
  • Check it's in WGS-84 (4326) and use QGIS to export it to a GeoJSON file. The biggest issue is usually a wrong projection. – Bill Chappell Aug 3 '17 at 15:53
  • @Bill Chappell I already tried my hands on geojson too. I'm new to this anyway. I even hosted the geojson file on github, included it in my script and nothing shows up. The file is in EPSG:4326 – julie95 Aug 3 '17 at 16:47
  • It could also be a directory path issue. You might try including the full path to the file in the L.Shapefile (or L.geoJSON if you are using a GeoJSON now). Something like L.geoJSON("/home/user/me/fullpath/file.geojson"). – jbukoski Aug 3 '17 at 17:02
3

Thanks for your time. I have been able to figure out the problem and it has been resolved. I discovered the shapefile was in .rar format while I was calling .zip in the code. I changed it from .rar to .zip and it now works.

2

As an option, put the GeoJSON file in the same folder as your html file. I often do this to avoid path issues. Here is a simple page using GeoJSON with the local GeoJSON file. http://www.gistechsolutions.com/leaflet/DEMO/Drink/Drink.html

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.