style.css

/* style.css */

/* Map Container */
#map {
  width: 100vw;  /* Full viewport width */
  height: 100vh; /* Adjust the height as needed */
}

/* Layers Control Title */
.layers-control-title {
  padding: 5px 10px;
  font-size: 14px;
  background: #fff;
  border-bottom: 1px solid #ccc;
  text-align: center;
  font-weight: bold;
}

/* Layers Control (Select Year) */
.leaflet-control-layers {
  right: 20px; /* Move it 20px from the left of the viewport */
  top: 10px;  /* Optional: Adjust the vertical position */
  box-shadow: none;
}

/* Leaflet Layers Control Checkbox Labels */
.leaflet-control-layers label {
  font-size: 14px;
}

/* Optional: Style for the Layers Control Base Layers Section */
.leaflet-control-layers-base {
  padding: 5px 10px;
}

/* Optional: Style for Hover Effect on Layer Labels */
.leaflet-control-layers label:hover {
  background-color: #f0f0f0;
}

/* Optional: Adjust the Width of the Layers Control */
.leaflet-control-layers-expanded {
  width: auto;
}

/* Length Control */
.length-control {
  position: absolute; /* Ensure it's absolutely positioned */
  right: 20px;         /* Move it 20px from the left of the viewport */
  bottom: 50px;       /* Adjust the vertical position as needed */
  background: rgba(255, 255, 255, 0.8); /* Keep the original style */
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
}

/* Optional: Style for the Map Attribution */
.leaflet-control-attribution {
  font-size: 12px;
}

/* Optional: Style for the Zoom Control Buttons */
.leaflet-control-zoom a {
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
}