Binding multiple markers to an overlay and controlling numbers of markers to display, using radios

[Ray]

I want to display two categories of markers.

Within each category, markers are grouped according to some criterion, say distance from a certain point.

The two categories of the markers are not exlusive, so I thought I will use checkboxes to select both categories, one category or no markers at all (both checkboxes are unchecked).

To select the marker groups, I want to use radio buttons.

For example, a use case could be:

There is only one base map, and on top of the map, I want to be able to see markers of pools and parks in a city, say, within 1km, 2km,etc., from a given point on the map.

So the overlay variables are "pool" and "park".

Say, there are 2 pools and 2 parks within 1km, and 2 more of each further out until the 2km mark, so in total 4 of each, for this example.

About the nomenclature itself, would it be appropriate to call those 4 "layers"?

For now, I will call the markers 'layers'.

Pool layers: 2 marker layer and 4 marker layer. (Only one can be selected at a time)

Same for Park layers.

Notwithstanding the name, I want to bind those pool markers to the pool overlays, and the park markers to the park overlays,

and I want to be able to display the markers (1)within 1km  or (2) within 2km (i.e., all) according to which radio I select.

Example:

When I check "pool" overlay only, selecting "1km" radio will show 2 pool markers.Selecting "2km" radio will show all pool markers (4).

When I check both "pool" and "park" overlays, "1km" radio will show 2+2 = 4 markers.Selecting "2km" radio will show all markers (8).

Etc.

Through online resources, I now know how to toggle the markers with radio, and how to use overlays, but I want to know how to bind multiple markers to

an overlay, and control the numbers of markers to display, using radios.

I described above.

(1) To toggle the markers with radio: 

//create a city map

var cityMap = L.tileLayer('https://...attribution: "<a href='... target='_blank'>hoge</a>"});

var map = L.map('mapid', {

    center: [x,y],

    zoom: 6.5,

    layers: [cityMap] 

});

//declare variables

var km1-pool1 = L.marker(...),

    km1-pool2 = L.marker(...),

    km2-pool1 = L.marker(...),

    km2-pool2 = L.marker(...),

    

var layer_km1_p = L.layerGroup([km1-pool1, km1-pool2]);

var layer_km2_p = L.layerGroup([km1-pool1, km1-pool2, km2-pool1, km2-pool2]); //include all markers

var layers_p = { 

    "Within 1km": layer_km1_p,

    "Within 2km": layer_km2_p

};

//display "within 1km" initially

layer_km1_p.addTo(map);

L.control.layers(layers_p, null).addTo(map); //<-- this will show radio buttons for the pools (of course, because I added markers for ppl only.)

(2) "pool" and "park" overlays are also easy:

//variables

var pool = new L.LayerGroup();

var pool_location1 = L.marker(...);

var pool_location2 = L.marker(...);

pool_location1.addTo(pool);

pool_location2.addTo(pool);

//similar code for the parks

.....

//.. create a city map (as above)

var overlays = {

    "show pools": pool,

    "show parks": park

};

//select pool at the time of display

pool.addTo(map);

L.control.layers(null, overlays).addTo(map); //<-- this will show checkboxes for the pool and park 

Already overwhelmed..... 

Can someone please give me some idea just using leaflets? (Should be doable, right?!) 

(Distance calculation from the given point need not be considered.)

Thank you.

Please note: I did not want to use check boxes for "Within 1 km", "Within 2 km" because it would look weird if I check both check boxes because all the "Within 1km" markers are included if I check "Within 2 km". I don't want to write extra codes to disable the "Within 1 km" checkbox in that case. (As of now, I don't know how to.)