JSFiddle - React, Tailwind, and code Playground

Atlas of the the construction technique

HTML

<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Jerome Andre">

    <!-- Load personnal CSS styles -->
    <link rel="stylesheet" href="styles/bootstrap.css">
    <link rel="stylesheet" href="styles/styles2.css">

    <!-- Load leaflet elements -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <!-- Load Marker Cluster element -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"> </script>

    <!-- loads files for SCALE BAR -->
    <script src="scripts/L.Control.BetterScale.js"></script>
    <link rel="stylesheet" href="styles/L.Control.BetterScale.css" />

  </head>

  <body>
   
    <!-- Carte-->
    <div id="mapcontainer">
      <div id="map"></div>
    </div>
    <div class="inputs" id="year">
<h4>&nbsp;Filtrer par date&nbsp;</h4>
  <input type="checkbox" class="year" name="-150" value="-150" checked="true" style="accent-color:black;">
  <label class="input-text" for="-150">-150 à -100</label>  
    <input type="checkbox" class="year" name="-100" value="-100" checked="true" style="accent-color:red;">
  <label class="input-text" for="-100">-100 à -30</label>  
    <input type="checkbox" class="year" name="-30" value="-30" checked="true" style="accent-color:yellow;">
  <label class="input-text" for="-30">-30 à 15 &nbsp; </label>  
  <input...

CSS

#mapcontainer {
    display: flex;
	width: 100%;
	height: 100%;
	position: fixed;
}

#map {
	z-index:0;
	flex: 1;   
	}
  
  .inputs, .inputs_2 {
	width: 110px;
	position: fixed;
	right: 0px;
	top: 0px;
	z-index: 1;
	background-color: #eee;
	flex-wrap: wrap;
	margin: 5px;
	padding: 5px;
	border: solid;
	border-width: thin; 
	border-radius: 5%;
	text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal; 
	display: flex;
	}
	
.inputs_2 {
	top: 240px;	
}
	
.input-text{
	font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
	font-size: 14px;
	color: #777;
	flex-wrap: wrap;
}


@media (max-width: 500px) {
  .inputs, .inputs_2 {
    position: fixed;
	right: 0px;
	top: 0px;
	max-width: 110px;
	min-width: 90px;
  }
  .inputs_2 {
    position: fixed;
	right: 0px;
	top: 240px;
  } 
}
h4 {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
	font-size: 12px;
    padding: 0px;
	padding-bottom: 4px;
	margin: 0;
	vertical-align: center;	
}

JavaScript

var map = L.map('map').setView([44, 6], 5);


/* Modifie le fond de carte suivant le niveau de zoom, celui de l'Atlas of Roman Empire n'est pas disponible > 11 */
var romanempiremap = L.tileLayer('https://dh.gu.se/tiles/imperium/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://dh.gu.se/dare/">Digital Atlas of the Roman Empire (DARE) </a> contributors',
});

var OSM = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
  subdomains: 'abcd',
  maxZoom: 19
});

romanempiremap.addTo(map); //initial layer according to initial zoom

map.on("zoomend", function(e) {
  console.log("Zoom level: ", map.getZoom());
  if (map.getZoom() > 11) { //Level 11 is the treshold 
    map.removeLayer(romanempiremap);
    OSM.addTo(map);
  } else {
    map.removeLayer(OSM);
    romanempiremap.addTo(map);
  }
});

let checkboxStates

const jsontest = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": {
        "field_1": "1",
        "field_2": "Aix en Provence",
        "eventType": "?",
        "field_4": 43.528819,
        "field_5": 5.447192,
        "year": "50"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [5.447192, 43.528819]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "field_1": "2",
        "field_2": "Alsace",
        "eventType": "temple",
        "field_4": 48.512921,
        "field_5": 7.165208,
        "year": "0"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [7.165208, 48.512921]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "field_1": "3",
        "field_2": "Amarynthos",
        "eventType": "autre",
        "field_4": 38.386943,
        "field_5": 23.909185,
        "year": "-150"
      },
      "geometry": {
       ...