I am trying to make an interactive map using leaflet where the user can toggle an overlay of multi-polygons. So far the following code works using a checkbox to display dummy point data, and radio buttons to switch between basemaps. However, I'm not sure how to use the L.Polygon function to display my json data.

function createOverlay(map, attribute){
    var iceSheets = new L.LayerGroup();

    //Define overlay/popup content
    //Dummy data here
    //***Add code here***

    var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>',
        bwLink = '<a href="http://thunderforest.com/">OSMBlackAndWhite</a>';

    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; ' + osmLink + ' Contributors',
        bwUrl = 'https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',
        bwAttrib = '&copy; '+osmLink+' Contributors & '+bwLink;

    var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
        bwMap = L.tileLayer(bwUrl, {attribution: bwAttrib});

    var baseLayers = {
        "OSM Mapnik": osmMap,
        "Greyscale": bwMap

    var overlays = {
        "Ice Sheets": iceSheets


Does anyone have a suggestion on how to accomplish this? Is using L.Polygon the best way to go, or would I be better off using the Leaflet draw plugin?

Your Answer

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

Browse other questions tagged or ask your own question.