[GIS] adding radio button to leaflet

Question

I would like to add a radio button control (like a list) to my leaflet map (which look like basemap dropdown menu).

So users can switch the apperance of some layers by simply selecting corresponding radio button, e.g., display big circles rather than small ones.

How is that possible?

var radius = 600;     
var smallRadiusCircle = L.circle([44.710, 6.84], radius, {fill: true, fillColor:'gray', fillOpacity: 0.4, color: 'none', weight: 1});

var radius2 = 1800;     
var bigRadiusCircle = L.circle([44.710, 6.84], radius2, {fill: true, fillColor:'gray', fillOpacity: 0.4, color: 'none', weight: 1});

Answer 1

I use the grouped layer control: https://github.com/ismyrnow/leaflet-groupedlayercontrol Make them 2 layers, put them in an exclusive group then the control makes them use radio buttons instead of a checkbox.

    var groupedOverlays = {
        "Dept of Health":{
            "Regions":regions,
            "Coalitions":subregions,
            "County":county,
            "Zip Code":zipcode,
            "State":state
        }
    }
};

    var options = {
      // Make the "Landmarks" group exclusive (use radio inputs)
      exclusiveGroups: ["Dept of Health"],
      // Show a checkbox next to non-exclusive group labels for toggling all
      groupCheckboxes: true
    };

    // Use the custom grouped layer control, not "L.control.layers"
    var layerControl = L.control.groupedLayers(baseMaps, groupedOverlays, options);
    map.addControl(layerControl);