menambahkan fitur heatmap dan memperbarui ui layer control

WebGISPovertyMapping/assets/css/style.css

@@ -282,13 +282,53 @@ html, body {
     top: 0; bottom: 0; left: 0; right: 0;
 }
 
-/* ===== LAYER CONTROL ===== */
-.leaflet-control-layers {
-    border-radius: 10px !important;
-    border: none !important;
-    box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important;
-    font-family: 'Segoe UI', Arial, sans-serif !important;
-    font-size: 13px !important;
+/* ===== LAYER CONTROL DI SIDEBAR ===== */
+.layer-control {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 4px 2px;
+}
+
+.layer-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    color: #444;
+    cursor: pointer;
+    padding: 4px 2px;
+    border-radius: 6px;
+    transition: background 0.15s;
+}
+
+.layer-item:hover {
+    background: #f0f4f8;
+}
+
+.layer-item input[type="checkbox"] {
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+    accent-color: #1B2A4A;
+    flex-shrink: 0;
+}
+
+.layer-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    display: inline-block;
+    flex-shrink: 0;
+}
+
+.layer-radius-icon {
+    width: 16px;
+    height: 10px;
+    border: 2px dashed #8e44ad;
+    border-radius: 50%;
+    display: inline-block;
+    flex-shrink: 0;
 }
 
 .map-legend {
@@ -327,4 +367,13 @@ html, body {
     border-radius: 50%;
     display: inline-block;
     flex-shrink: 0;
+}
+
+.layer-heatmap-icon {
+    width: 16px;
+    height: 12px;
+    border-radius: 4px;
+    background: linear-gradient(to right, #3498db, #f1c40f, #e67e22, #e74c3c);
+    display: inline-block;
+    flex-shrink: 0;
 }