Update app/map_py_heatmap.py

app/map_py_heatmap.py

@@ -1,544 +1,544 @@
-import folium
-from folium import plugins
-import json
-import os
-import pandas as pd
-from collections import Counter
-
-
-import folium
-from folium import plugins
-import json
-import os
-import pandas as pd
-from collections import Counter
-
-
-def load_case_data_from_csv(filter_year='all', filter_crime='all', filter_city='all'):
-    """Load case data from a single cleaned CSV file."""
-
-    cleaned_csv_path = "../cleaned_data.csv"
-    if not os.path.exists(cleaned_csv_path):
-        raise FileNotFoundError(f"{cleaned_csv_path} not found.")
-
-    # load 1 file saja
-    data = pd.read_csv(cleaned_csv_path, on_bad_lines='skip')
-
-    # normalisasi ke lowercase
-    data_lower = data.map(
-        lambda x: x.lower().strip() if isinstance(x, str) and x.strip() != "" else x
-    )
-
-    # normalisasi nama pengadilan → ambil kota-nya saja
-    if 'lembaga_peradilan' in data_lower.columns:
-        data_lower['kota'] = (
-            data_lower['lembaga_peradilan']
-            .str.replace(r'^pn\s+', '', regex=True)
-            .str.strip()
-            .str.title()
-        )
-    else:
-        data_lower['kota'] = None
-
-    # parsing tanggal
-    if 'tanggal_musyawarah' in data_lower.columns:
-        data_lower['tanggal'] = pd.to_datetime(
-            data_lower['tanggal_musyawarah'], errors='coerce'
-        )
-        data_lower['tahun_putusan'] = data_lower['tanggal'].dt.year.astype('Int64')
-
-    df = data_lower.copy()
-
-    # filter year
-    if filter_year != 'all':
-        try:
-            year_val = int(filter_year)
-            df = df[df['tahun_putusan'] == year_val]
-        except:
-            pass
-
-    # filter crime
-    if filter_crime != 'all' and 'kata_kunci' in df.columns:
-        df = df[df['kata_kunci'] == filter_crime.lower()]
-
-    # filter city
-    if filter_city != 'all':
-        df = df[df['kota'].str.lower() == filter_city.lower()]
-
-    if df.empty:
-        return {}
-
-    # agregasi
-    case_data = {}
-
-    # group by kota
-    grouped = df.groupby('kota')
-
-    for kota, group in grouped:
-        total_cases = len(group)
-
-        # ambil top 10 kejahatan
-        if 'kata_kunci' in group.columns:
-            crime_counts = group['kata_kunci'].value_counts().head(10)
-        else:
-            crime_counts = {}
-
-        cases = {crime.title(): int(count) for crime, count in crime_counts.items()}
-
-        case_data[kota] = {
-            'total': total_cases,
-            'cases': cases,
-        }
-
-    return case_data
-
-
-
-def create_heatmap_interactive(filter_year='all', filter_crime='all', filter_city='all'):
-    """Create an interactive Folium choropleth heatmap with click-to-zoom and case information.
-    
-    Args:
-        filter_year: Filter by specific year or 'all' for all years
-        filter_crime: Filter by specific crime type or 'all' for all crimes
-        filter_city: Filter by specific city/kabupaten or 'all' for all cities
-
-    Returns:
-        str: HTML string for embedding the Folium map.
-    """
-    # Load real case data from CSV with filters
-    real_case_data = load_case_data_from_csv(filter_year=filter_year, filter_crime=filter_crime, filter_city=filter_city)
-    
-    # Load GeoJSON data with metric
-    try:
-        with open('app/static/geojson/jatim_kabkota_metric.geojson', encoding='utf-8') as f:
-            geojson_data = json.load(f)
-    except:
-        # Fallback to original if metric version doesn't exist
-        with open('data/geojson/jatim_kabkota.geojson', encoding='utf-8') as f:
-            geojson_data = json.load(f)
-    
-    # Update features with real case data
-    for feature in geojson_data['features']:
-        kabupaten_name = feature['properties'].get('name', feature['properties'].get('NAMOBJ', ''))
-        
-        if kabupaten_name in real_case_data:
-            # Use real data
-            data = real_case_data[kabupaten_name]
-            feature['properties']['metric'] = data['total']
-            feature['properties']['cases'] = data['cases']
-            feature['properties']['total_cases'] = data['total']
-        else:
-            # Fallback jika tidak ada data
-            feature['properties']['metric'] = 0
-            feature['properties']['cases'] = {}
-            feature['properties']['total_cases'] = 0
-
-    # Calculate bounds from all features for Jawa Timur only
-    all_bounds = []
-    for feature in geojson_data['features']:
-        geom = feature['geometry']
-        if geom['type'] == 'Polygon':
-            for coord in geom['coordinates'][0]:
-                all_bounds.append([coord[1], coord[0]])
-        elif geom['type'] == 'MultiPolygon':
-            for poly in geom['coordinates']:
-                for coord in poly[0]:
-                    all_bounds.append([coord[1], coord[0]])
-    
-    # Get min/max bounds for Jawa Timur
-    if all_bounds:
-        lats = [b[0] for b in all_bounds]
-        lons = [b[1] for b in all_bounds]
-        min_lat, max_lat = min(lats), max(lats)
-        min_lon, max_lon = min(lons), max(lons)
-        
-        # Add small buffer (0.1 degrees)
-        buffer = 0.1
-        bounds = [
-            [min_lat - buffer, min_lon - buffer],  # Southwest
-            [max_lat + buffer, max_lon + buffer]   # Northeast
-        ]
-    else:
-        # Fallback bounds for Jawa Timur
-        bounds = [[-8.8, 111.0], [-6.0, 114.5]]
-
-    # Create Folium map with restricted bounds
-    m = folium.Map(
-        location=[-7.5, 112.5], 
-        zoom_start=9,        # Start zoom level 9 - nyaman lihat seluruh Jatim
-        min_zoom=8,          # Min zoom 8 - bisa lihat peta lebih luas sedikit
-        max_zoom=13,         # Max zoom 13 - cukup untuk detail
-        tiles=None,  # No tiles initially
-        zoom_control=True,   # Tampilkan tombol zoom
-        scrollWheelZoom=False,  # Matikan scroll wheel zoom - hanya pakai tombol
-        prefer_canvas=True,
-        max_bounds=True,
-        min_lat=bounds[0][0],
-        max_lat=bounds[1][0],
-        min_lon=bounds[0][1],
-        max_lon=bounds[1][1]
-    )
-    
-    # Add tiles only for Jawa Timur area using TileLayer with bounds
-    folium.TileLayer(
-        tiles='CartoDB positron',
-        attr='CartoDB',
-        name='Base Map',
-        overlay=False,
-        control=False,
-        bounds=bounds
-    ).add_to(m)
-    
-    # Don't use fit_bounds here - it will override zoom_start
-    # Instead, we set zoom_start=9 above and let JavaScript handle bounds
-
-    # Create choropleth layer
-    choropleth = folium.Choropleth(
-        geo_data=geojson_data,
-        name='Legal Case Heatmap',
-        data={f['properties']['name']: f['properties']['metric'] for f in geojson_data['features']},
-        columns=['name', 'metric'],
-        key_on='feature.properties.name',
-        fill_color='OrRd',
-        fill_opacity=0.8,
-        line_opacity=0.5,
-        line_weight=1.5,
-        legend_name='Number of Cases',
-        highlight=True,
-    ).add_to(m)
-
-    # Add interactive tooltips and popups with click-to-zoom
-    for feature in geojson_data['features']:
-        props = feature['properties']
-        name = props.get('name', 'Unknown')
-        total = props.get('total_cases', props.get('metric', 0))
-        cases = props.get('cases', {})
-        
-        # Get centroid for marker
-        lat = props.get('centroid_lat')
-        lon = props.get('centroid_lon')
-        
-        # Create detailed popup content
-        case_list = '<br>'.join([f'<strong>{k}:</strong> {v} case' for k, v in cases.items() if v > 0])
-        
-        popup_html = f'''
-        <div style="font-family: Arial, sans-serif; width: 280px;">
-            <h3 style="margin: 0 0 10px 0; 
-                       color: #2C5F8D; 
-                       border-bottom: 2px solid #2C5F8D; 
-                       padding-bottom: 5px;">
-                {name}
-            </h3>
-            <div style="margin-bottom: 10px;">
-                <strong style="font-size: 16px; color: #d32f2f;">
-                    Number of Cases: {total}
-                </strong>
-            </div>
-            <div style="margin-top: 10px;">
-                <strong>Detailed Information:</strong><br>
-                <div style="margin-top: 8px; 
-                           font-size: 13px; 
-                           line-height: 1.6;
-                           background: #f5f5f5;
-                           padding: 10px;
-                           border-radius: 5px;">
-                    {case_list if case_list else '<em>No data</em>'}
-                </div>
-            </div>
-            <div style="margin-top: 12px; 
-                       padding-top: 10px; 
-                       border-top: 1px solid #ddd; 
-                       font-size: 11px; 
-                       color: #666;">
-                <em>Click for zoom in</em>
-            </div>
-        </div>
-        '''
-        
-        # Compact tooltip for hover - stays close to cursor
-        tooltip_html = f'''
-        <div style="font-family: Arial, sans-serif; 
-                    padding: 8px 12px;
-                    background: rgba(44, 95, 141, 0.95);
-                    color: white;
-                    border-radius: 5px;
-                    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-                    font-size: 13px;
-                    white-space: nowrap;
-                    border: 2px solid white;">
-            <strong style="font-size: 14px;">{name}</strong><br>
-            <span style="font-size: 12px;">📊 Total: {total} case</span>
-        </div>
-        '''
-        
-        # Add GeoJson layer with popup for each feature
-        geo_json = folium.GeoJson(
-            feature,
-            name=name,
-            style_function=lambda x: {
-                'fillColor': 'transparent',
-                'color': 'transparent',
-                'weight': 0,
-                'fillOpacity': 0
-            },
-            highlight_function=lambda x: {
-                'fillColor': '#ffeb3b',
-                'color': '#ff5722',
-                'weight': 3,
-                'fillOpacity': 0.7
-            },
-            tooltip=folium.Tooltip(
-                tooltip_html, 
-                sticky=True,  # Tooltip follows cursor closely
-                style="""
-                    background-color: transparent;
-                    border: none;
-                    box-shadow: none;
-                    padding: 0;
-                    margin: 0;
-                """
-            ),
-            popup=folium.Popup(popup_html, max_width=300)
-        )
-        
-        geo_json.add_to(m)
-        
-        # Add click event to zoom to feature bounds
-        if lat and lon:
-            # Calculate bounds from geometry
-            geom = feature['geometry']
-            bounds = []
-            
-            if geom['type'] == 'Polygon':
-                for coord in geom['coordinates'][0]:
-                    bounds.append([coord[1], coord[0]])
-            elif geom['type'] == 'MultiPolygon':
-                for poly in geom['coordinates']:
-                    for coord in poly[0]:
-                        bounds.append([coord[1], coord[0]])
-            
-            if bounds:
-                # Add invisible marker for click-to-zoom functionality
-                marker = folium.Marker(
-                    location=[lat, lon],
-                    icon=folium.DivIcon(html=''),
-                    tooltip=None,
-                    popup=None
-                )
-                
-                # Add JavaScript for zoom on click
-                bounds_str = str(bounds).replace("'", '"')
-                marker_html = f'''
-                <script>
-                    var bounds_{name.replace(" ", "_").replace(".", "")} = {bounds_str};
-                </script>
-                '''
-                m.get_root().html.add_child(folium.Element(marker_html))
-
-    # # Add legend
-    # legend_html = '''
-    # <div style="position: fixed; 
-    #             bottom: 50px; left: 50px; width: 300px; 
-    #             background-color: white; z-index:9999;
-    #             border:2px solid #2C5F8D; border-radius: 8px;
-    #             padding: 15px;
-    #             box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-    #             font-family: Arial, sans-serif;">
-        
-        
-       
-    # </div>
-    # '''
-    
-    # m.get_root().html.add_child(folium.Element(legend_html))
-
-    # Add custom CSS for better interactivity and sticky tooltip
-    custom_css = '''
-    <style>
-        .leaflet-container {
-            background-color: #e0e0e0 !important;
-            cursor: pointer !important;
-        }
-        /* Tooltip styling - stays very close to cursor */
-        .leaflet-tooltip {
-            background-color: transparent !important;
-            border: none !important;
-            box-shadow: none !important;
-            padding: 0 !important;
-            margin: 0 !important;
-            pointer-events: none !important;
-        }
-        .leaflet-tooltip-top {
-            margin-top: -5px !important;
-        }
-        .leaflet-tooltip-left {
-            margin-left: -5px !important;
-        }
-        .leaflet-tooltip-right {
-            margin-left: 5px !important;
-        }
-        .leaflet-tooltip-bottom {
-            margin-top: 5px !important;
-        }
-        /* Hide default tooltip pointer */
-        .leaflet-tooltip-top:before,
-        .leaflet-tooltip-bottom:before,
-        .leaflet-tooltip-left:before,
-        .leaflet-tooltip-right:before {
-            display: none !important;
-        }
-        /* Hide tiles outside bounds */
-        .leaflet-tile-container {
-            clip-path: inset(0);
-        }
-        .leaflet-interactive:hover {
-            stroke: #ff5722 !important;
-            stroke-width: 2px !important;
-            stroke-opacity: 1 !important;
-        }
-        .leaflet-popup-content-wrapper {
-            border-radius: 8px !important;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
-        }
-        .leaflet-popup-tip {
-            display: none !important;
-        }
-        /* Add border around Jawa Timur */
-        .leaflet-overlay-pane svg {
-            filter: drop-shadow(0 0 3px rgba(0,0,0,0.3));
-        }
-    </style>
-    '''
-    m.get_root().html.add_child(folium.Element(custom_css))
-
-    map_name = m.get_name()
-
-    # Add JavaScript to restrict panning to Jawa Timur bounds
-    restrict_bounds_script = f'''
-    <script>
-        // Restrict map to Jawa Timur bounds only
-        document.addEventListener('DOMContentLoaded', function() {{
-            setTimeout(function() {{
-                // Get the Leaflet map instance
-                var mapElement = window.{map_name};
-                if (mapElement && mapElement._leaflet_id) {{
-                    var map = mapElement;
-                    
-                    // Set max bounds for Jawa Timur
-                    var bounds = L.latLngBounds(
-                        L.latLng({bounds[0][0]}, {bounds[0][1]}),  // Southwest
-                        L.latLng({bounds[1][0]}, {bounds[1][1]})   // Northeast
-                    );
-                    
-                    // Strict bounds - cannot pan outside
-                    //map.setMaxBounds(bounds);
-                    //map.options.maxBoundsViscosity = 0.6; // Make bounds completely rigid
-                    
-                    
-                    // Set zoom constraints directly on map options
-                    map.options.minZoom = 8;
-                    map.options.maxZoom = 13;
-                    
-                    // Remove existing zoom control and add new one with correct limits
-                    if (map.zoomControl) {{
-                        map.removeControl(map.zoomControl);
-                    }}
-                    L.control.zoom({{ position: 'topleft' }}).addTo(map);
-                    
-                    // Enforce zoom limits on all zoom events
-                    map.on('zoom', function() {{
-                        var currentZoom = map.getZoom();
-                        if (currentZoom < 8) {{
-                            map.setZoom(8, {{ animate: false }});
-                            return false;
-                        }} else if (currentZoom > 13) {{
-                            map.setZoom(13, {{ animate: false }});
-                            return false;
-                        }}
-                    }});
-                    
-                    // Also on zoomend to catch any missed events
-                    map.on('zoomend', function() {{
-                        var currentZoom = map.getZoom();
-                        if (currentZoom < 8) {{
-                            map.setZoom(8, {{ animate: false }});
-                        }} else if (currentZoom > 13) {{
-                            map.setZoom(13, {{ animate: false }});
-                        }}
-                        updateZoomControl();
-                    }});
-                    
-                    // Update zoom control state
-                    function updateZoomControl() {{
-                        var zoom = map.getZoom();
-                        var zoomInButton = document.querySelector('.leaflet-control-zoom-in');
-                        var zoomOutButton = document.querySelector('.leaflet-control-zoom-out');
-                        
-                        if (zoomInButton) {{
-                            if (zoom >= 13) {{
-                                zoomInButton.classList.add('leaflet-disabled');
-                                zoomInButton.style.cursor = 'not-allowed';
-                                zoomInButton.style.opacity = '0.4';
-                                zoomInButton.style.pointerEvents = 'none';
-                                zoomInButton.setAttribute('disabled', 'disabled');
-                            }} else {{
-                                zoomInButton.classList.remove('leaflet-disabled');
-                                zoomInButton.style.cursor = 'pointer';
-                                zoomInButton.style.opacity = '1';
-                                zoomInButton.style.pointerEvents = 'auto';
-                                zoomInButton.removeAttribute('disabled');
-                            }}
-                        }}
-                        
-                        if (zoomOutButton) {{
-                            if (zoom <= 8) {{
-                                zoomOutButton.classList.add('leaflet-disabled');
-                                zoomOutButton.style.cursor = 'not-allowed';
-                                zoomOutButton.style.opacity = '0.4';
-                                zoomOutButton.style.pointerEvents = 'none';
-                                zoomOutButton.setAttribute('disabled', 'disabled');
-                            }} else {{
-                                zoomOutButton.classList.remove('leaflet-disabled');
-                                zoomOutButton.style.cursor = 'pointer';
-                                zoomOutButton.style.opacity = '1';
-                                zoomOutButton.style.pointerEvents = 'auto';
-                                zoomOutButton.removeAttribute('disabled');
-                            }}
-                        }}
-                    }}
-                    
-                    // Call on every zoom change
-                    map.on('zoom', updateZoomControl);
-                    map.on('zoomend', updateZoomControl);
-                    updateZoomControl(); // Call immediately
-                    
-                    // Hide tiles outside bounds by clipping
-                    var tileLayer = document.querySelector('.leaflet-tile-pane');
-                    if (tileLayer) {{
-                        // Calculate pixel bounds
-                        var southWest = map.latLngToLayerPoint(bounds.getSouthWest());
-                        var northEast = map.latLngToLayerPoint(bounds.getNorthEast());
-                        
-                        // Create clip path
-                        var clipPath = 'rect(' + 
-                            northEast.y + 'px, ' + 
-                            northEast.x + 'px, ' + 
-                            southWest.y + 'px, ' + 
-                            southWest.x + 'px)';
-                        
-                        // Note: Modern browsers use clip-path instead of clip
-                    }}
-                }}
-                
-                // Add click cursor to paths
-                var paths = document.querySelectorAll('.leaflet-interactive');
-                paths.forEach(function(path) {{
-                    path.style.cursor = 'pointer';
-                }});
-            }}, 1000);
-        }});
-    </script>
-    '''
-    m.get_root().html.add_child(folium.Element(restrict_bounds_script))
-
-    return m._repr_html_()
+import folium
+from folium import plugins
+import json
+import os
+import pandas as pd
+from collections import Counter
+
+
+import folium
+from folium import plugins
+import json
+import os
+import pandas as pd
+from collections import Counter
+
+
+def load_case_data_from_csv(filter_year='all', filter_crime='all', filter_city='all'):
+    """Load case data from a single cleaned CSV file."""
+
+    cleaned_csv_path = "/app/cleaned_data.csv"
+    if not os.path.exists(cleaned_csv_path):
+        raise FileNotFoundError(f"{cleaned_csv_path} not found.")
+
+    # load 1 file saja
+    data = pd.read_csv(cleaned_csv_path, on_bad_lines='skip')
+
+    # normalisasi ke lowercase
+    data_lower = data.map(
+        lambda x: x.lower().strip() if isinstance(x, str) and x.strip() != "" else x
+    )
+
+    # normalisasi nama pengadilan → ambil kota-nya saja
+    if 'lembaga_peradilan' in data_lower.columns:
+        data_lower['kota'] = (
+            data_lower['lembaga_peradilan']
+            .str.replace(r'^pn\s+', '', regex=True)
+            .str.strip()
+            .str.title()
+        )
+    else:
+        data_lower['kota'] = None
+
+    # parsing tanggal
+    if 'tanggal_musyawarah' in data_lower.columns:
+        data_lower['tanggal'] = pd.to_datetime(
+            data_lower['tanggal_musyawarah'], errors='coerce'
+        )
+        data_lower['tahun_putusan'] = data_lower['tanggal'].dt.year.astype('Int64')
+
+    df = data_lower.copy()
+
+    # filter year
+    if filter_year != 'all':
+        try:
+            year_val = int(filter_year)
+            df = df[df['tahun_putusan'] == year_val]
+        except:
+            pass
+
+    # filter crime
+    if filter_crime != 'all' and 'kata_kunci' in df.columns:
+        df = df[df['kata_kunci'] == filter_crime.lower()]
+
+    # filter city
+    if filter_city != 'all':
+        df = df[df['kota'].str.lower() == filter_city.lower()]
+
+    if df.empty:
+        return {}
+
+    # agregasi
+    case_data = {}
+
+    # group by kota
+    grouped = df.groupby('kota')
+
+    for kota, group in grouped:
+        total_cases = len(group)
+
+        # ambil top 10 kejahatan
+        if 'kata_kunci' in group.columns:
+            crime_counts = group['kata_kunci'].value_counts().head(10)
+        else:
+            crime_counts = {}
+
+        cases = {crime.title(): int(count) for crime, count in crime_counts.items()}
+
+        case_data[kota] = {
+            'total': total_cases,
+            'cases': cases,
+        }
+
+    return case_data
+
+
+
+def create_heatmap_interactive(filter_year='all', filter_crime='all', filter_city='all'):
+    """Create an interactive Folium choropleth heatmap with click-to-zoom and case information.
+    
+    Args:
+        filter_year: Filter by specific year or 'all' for all years
+        filter_crime: Filter by specific crime type or 'all' for all crimes
+        filter_city: Filter by specific city/kabupaten or 'all' for all cities
+
+    Returns:
+        str: HTML string for embedding the Folium map.
+    """
+    # Load real case data from CSV with filters
+    real_case_data = load_case_data_from_csv(filter_year=filter_year, filter_crime=filter_crime, filter_city=filter_city)
+    
+    # Load GeoJSON data with metric
+    try:
+        with open('app/static/geojson/jatim_kabkota_metric.geojson', encoding='utf-8') as f:
+            geojson_data = json.load(f)
+    except:
+        # Fallback to original if metric version doesn't exist
+        with open('data/geojson/jatim_kabkota.geojson', encoding='utf-8') as f:
+            geojson_data = json.load(f)
+    
+    # Update features with real case data
+    for feature in geojson_data['features']:
+        kabupaten_name = feature['properties'].get('name', feature['properties'].get('NAMOBJ', ''))
+        
+        if kabupaten_name in real_case_data:
+            # Use real data
+            data = real_case_data[kabupaten_name]
+            feature['properties']['metric'] = data['total']
+            feature['properties']['cases'] = data['cases']
+            feature['properties']['total_cases'] = data['total']
+        else:
+            # Fallback jika tidak ada data
+            feature['properties']['metric'] = 0
+            feature['properties']['cases'] = {}
+            feature['properties']['total_cases'] = 0
+
+    # Calculate bounds from all features for Jawa Timur only
+    all_bounds = []
+    for feature in geojson_data['features']:
+        geom = feature['geometry']
+        if geom['type'] == 'Polygon':
+            for coord in geom['coordinates'][0]:
+                all_bounds.append([coord[1], coord[0]])
+        elif geom['type'] == 'MultiPolygon':
+            for poly in geom['coordinates']:
+                for coord in poly[0]:
+                    all_bounds.append([coord[1], coord[0]])
+    
+    # Get min/max bounds for Jawa Timur
+    if all_bounds:
+        lats = [b[0] for b in all_bounds]
+        lons = [b[1] for b in all_bounds]
+        min_lat, max_lat = min(lats), max(lats)
+        min_lon, max_lon = min(lons), max(lons)
+        
+        # Add small buffer (0.1 degrees)
+        buffer = 0.1
+        bounds = [
+            [min_lat - buffer, min_lon - buffer],  # Southwest
+            [max_lat + buffer, max_lon + buffer]   # Northeast
+        ]
+    else:
+        # Fallback bounds for Jawa Timur
+        bounds = [[-8.8, 111.0], [-6.0, 114.5]]
+
+    # Create Folium map with restricted bounds
+    m = folium.Map(
+        location=[-7.5, 112.5], 
+        zoom_start=9,        # Start zoom level 9 - nyaman lihat seluruh Jatim
+        min_zoom=8,          # Min zoom 8 - bisa lihat peta lebih luas sedikit
+        max_zoom=13,         # Max zoom 13 - cukup untuk detail
+        tiles=None,  # No tiles initially
+        zoom_control=True,   # Tampilkan tombol zoom
+        scrollWheelZoom=False,  # Matikan scroll wheel zoom - hanya pakai tombol
+        prefer_canvas=True,
+        max_bounds=True,
+        min_lat=bounds[0][0],
+        max_lat=bounds[1][0],
+        min_lon=bounds[0][1],
+        max_lon=bounds[1][1]
+    )
+    
+    # Add tiles only for Jawa Timur area using TileLayer with bounds
+    folium.TileLayer(
+        tiles='CartoDB positron',
+        attr='CartoDB',
+        name='Base Map',
+        overlay=False,
+        control=False,
+        bounds=bounds
+    ).add_to(m)
+    
+    # Don't use fit_bounds here - it will override zoom_start
+    # Instead, we set zoom_start=9 above and let JavaScript handle bounds
+
+    # Create choropleth layer
+    choropleth = folium.Choropleth(
+        geo_data=geojson_data,
+        name='Legal Case Heatmap',
+        data={f['properties']['name']: f['properties']['metric'] for f in geojson_data['features']},
+        columns=['name', 'metric'],
+        key_on='feature.properties.name',
+        fill_color='OrRd',
+        fill_opacity=0.8,
+        line_opacity=0.5,
+        line_weight=1.5,
+        legend_name='Number of Cases',
+        highlight=True,
+    ).add_to(m)
+
+    # Add interactive tooltips and popups with click-to-zoom
+    for feature in geojson_data['features']:
+        props = feature['properties']
+        name = props.get('name', 'Unknown')
+        total = props.get('total_cases', props.get('metric', 0))
+        cases = props.get('cases', {})
+        
+        # Get centroid for marker
+        lat = props.get('centroid_lat')
+        lon = props.get('centroid_lon')
+        
+        # Create detailed popup content
+        case_list = '<br>'.join([f'<strong>{k}:</strong> {v} case' for k, v in cases.items() if v > 0])
+        
+        popup_html = f'''
+        <div style="font-family: Arial, sans-serif; width: 280px;">
+            <h3 style="margin: 0 0 10px 0; 
+                       color: #2C5F8D; 
+                       border-bottom: 2px solid #2C5F8D; 
+                       padding-bottom: 5px;">
+                {name}
+            </h3>
+            <div style="margin-bottom: 10px;">
+                <strong style="font-size: 16px; color: #d32f2f;">
+                    Number of Cases: {total}
+                </strong>
+            </div>
+            <div style="margin-top: 10px;">
+                <strong>Detailed Information:</strong><br>
+                <div style="margin-top: 8px; 
+                           font-size: 13px; 
+                           line-height: 1.6;
+                           background: #f5f5f5;
+                           padding: 10px;
+                           border-radius: 5px;">
+                    {case_list if case_list else '<em>No data</em>'}
+                </div>
+            </div>
+            <div style="margin-top: 12px; 
+                       padding-top: 10px; 
+                       border-top: 1px solid #ddd; 
+                       font-size: 11px; 
+                       color: #666;">
+                <em>Click for zoom in</em>
+            </div>
+        </div>
+        '''
+        
+        # Compact tooltip for hover - stays close to cursor
+        tooltip_html = f'''
+        <div style="font-family: Arial, sans-serif; 
+                    padding: 8px 12px;
+                    background: rgba(44, 95, 141, 0.95);
+                    color: white;
+                    border-radius: 5px;
+                    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+                    font-size: 13px;
+                    white-space: nowrap;
+                    border: 2px solid white;">
+            <strong style="font-size: 14px;">{name}</strong><br>
+            <span style="font-size: 12px;">📊 Total: {total} case</span>
+        </div>
+        '''
+        
+        # Add GeoJson layer with popup for each feature
+        geo_json = folium.GeoJson(
+            feature,
+            name=name,
+            style_function=lambda x: {
+                'fillColor': 'transparent',
+                'color': 'transparent',
+                'weight': 0,
+                'fillOpacity': 0
+            },
+            highlight_function=lambda x: {
+                'fillColor': '#ffeb3b',
+                'color': '#ff5722',
+                'weight': 3,
+                'fillOpacity': 0.7
+            },
+            tooltip=folium.Tooltip(
+                tooltip_html, 
+                sticky=True,  # Tooltip follows cursor closely
+                style="""
+                    background-color: transparent;
+                    border: none;
+                    box-shadow: none;
+                    padding: 0;
+                    margin: 0;
+                """
+            ),
+            popup=folium.Popup(popup_html, max_width=300)
+        )
+        
+        geo_json.add_to(m)
+        
+        # Add click event to zoom to feature bounds
+        if lat and lon:
+            # Calculate bounds from geometry
+            geom = feature['geometry']
+            bounds = []
+            
+            if geom['type'] == 'Polygon':
+                for coord in geom['coordinates'][0]:
+                    bounds.append([coord[1], coord[0]])
+            elif geom['type'] == 'MultiPolygon':
+                for poly in geom['coordinates']:
+                    for coord in poly[0]:
+                        bounds.append([coord[1], coord[0]])
+            
+            if bounds:
+                # Add invisible marker for click-to-zoom functionality
+                marker = folium.Marker(
+                    location=[lat, lon],
+                    icon=folium.DivIcon(html=''),
+                    tooltip=None,
+                    popup=None
+                )
+                
+                # Add JavaScript for zoom on click
+                bounds_str = str(bounds).replace("'", '"')
+                marker_html = f'''
+                <script>
+                    var bounds_{name.replace(" ", "_").replace(".", "")} = {bounds_str};
+                </script>
+                '''
+                m.get_root().html.add_child(folium.Element(marker_html))
+
+    # # Add legend
+    # legend_html = '''
+    # <div style="position: fixed; 
+    #             bottom: 50px; left: 50px; width: 300px; 
+    #             background-color: white; z-index:9999;
+    #             border:2px solid #2C5F8D; border-radius: 8px;
+    #             padding: 15px;
+    #             box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+    #             font-family: Arial, sans-serif;">
+        
+        
+       
+    # </div>
+    # '''
+    
+    # m.get_root().html.add_child(folium.Element(legend_html))
+
+    # Add custom CSS for better interactivity and sticky tooltip
+    custom_css = '''
+    <style>
+        .leaflet-container {
+            background-color: #e0e0e0 !important;
+            cursor: pointer !important;
+        }
+        /* Tooltip styling - stays very close to cursor */
+        .leaflet-tooltip {
+            background-color: transparent !important;
+            border: none !important;
+            box-shadow: none !important;
+            padding: 0 !important;
+            margin: 0 !important;
+            pointer-events: none !important;
+        }
+        .leaflet-tooltip-top {
+            margin-top: -5px !important;
+        }
+        .leaflet-tooltip-left {
+            margin-left: -5px !important;
+        }
+        .leaflet-tooltip-right {
+            margin-left: 5px !important;
+        }
+        .leaflet-tooltip-bottom {
+            margin-top: 5px !important;
+        }
+        /* Hide default tooltip pointer */
+        .leaflet-tooltip-top:before,
+        .leaflet-tooltip-bottom:before,
+        .leaflet-tooltip-left:before,
+        .leaflet-tooltip-right:before {
+            display: none !important;
+        }
+        /* Hide tiles outside bounds */
+        .leaflet-tile-container {
+            clip-path: inset(0);
+        }
+        .leaflet-interactive:hover {
+            stroke: #ff5722 !important;
+            stroke-width: 2px !important;
+            stroke-opacity: 1 !important;
+        }
+        .leaflet-popup-content-wrapper {
+            border-radius: 8px !important;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
+        }
+        .leaflet-popup-tip {
+            display: none !important;
+        }
+        /* Add border around Jawa Timur */
+        .leaflet-overlay-pane svg {
+            filter: drop-shadow(0 0 3px rgba(0,0,0,0.3));
+        }
+    </style>
+    '''
+    m.get_root().html.add_child(folium.Element(custom_css))
+
+    map_name = m.get_name()
+
+    # Add JavaScript to restrict panning to Jawa Timur bounds
+    restrict_bounds_script = f'''
+    <script>
+        // Restrict map to Jawa Timur bounds only
+        document.addEventListener('DOMContentLoaded', function() {{
+            setTimeout(function() {{
+                // Get the Leaflet map instance
+                var mapElement = window.{map_name};
+                if (mapElement && mapElement._leaflet_id) {{
+                    var map = mapElement;
+                    
+                    // Set max bounds for Jawa Timur
+                    var bounds = L.latLngBounds(
+                        L.latLng({bounds[0][0]}, {bounds[0][1]}),  // Southwest
+                        L.latLng({bounds[1][0]}, {bounds[1][1]})   // Northeast
+                    );
+                    
+                    // Strict bounds - cannot pan outside
+                    //map.setMaxBounds(bounds);
+                    //map.options.maxBoundsViscosity = 0.6; // Make bounds completely rigid
+                    
+                    
+                    // Set zoom constraints directly on map options
+                    map.options.minZoom = 8;
+                    map.options.maxZoom = 13;
+                    
+                    // Remove existing zoom control and add new one with correct limits
+                    if (map.zoomControl) {{
+                        map.removeControl(map.zoomControl);
+                    }}
+                    L.control.zoom({{ position: 'topleft' }}).addTo(map);
+                    
+                    // Enforce zoom limits on all zoom events
+                    map.on('zoom', function() {{
+                        var currentZoom = map.getZoom();
+                        if (currentZoom < 8) {{
+                            map.setZoom(8, {{ animate: false }});
+                            return false;
+                        }} else if (currentZoom > 13) {{
+                            map.setZoom(13, {{ animate: false }});
+                            return false;
+                        }}
+                    }});
+                    
+                    // Also on zoomend to catch any missed events
+                    map.on('zoomend', function() {{
+                        var currentZoom = map.getZoom();
+                        if (currentZoom < 8) {{
+                            map.setZoom(8, {{ animate: false }});
+                        }} else if (currentZoom > 13) {{
+                            map.setZoom(13, {{ animate: false }});
+                        }}
+                        updateZoomControl();
+                    }});
+                    
+                    // Update zoom control state
+                    function updateZoomControl() {{
+                        var zoom = map.getZoom();
+                        var zoomInButton = document.querySelector('.leaflet-control-zoom-in');
+                        var zoomOutButton = document.querySelector('.leaflet-control-zoom-out');
+                        
+                        if (zoomInButton) {{
+                            if (zoom >= 13) {{
+                                zoomInButton.classList.add('leaflet-disabled');
+                                zoomInButton.style.cursor = 'not-allowed';
+                                zoomInButton.style.opacity = '0.4';
+                                zoomInButton.style.pointerEvents = 'none';
+                                zoomInButton.setAttribute('disabled', 'disabled');
+                            }} else {{
+                                zoomInButton.classList.remove('leaflet-disabled');
+                                zoomInButton.style.cursor = 'pointer';
+                                zoomInButton.style.opacity = '1';
+                                zoomInButton.style.pointerEvents = 'auto';
+                                zoomInButton.removeAttribute('disabled');
+                            }}
+                        }}
+                        
+                        if (zoomOutButton) {{
+                            if (zoom <= 8) {{
+                                zoomOutButton.classList.add('leaflet-disabled');
+                                zoomOutButton.style.cursor = 'not-allowed';
+                                zoomOutButton.style.opacity = '0.4';
+                                zoomOutButton.style.pointerEvents = 'none';
+                                zoomOutButton.setAttribute('disabled', 'disabled');
+                            }} else {{
+                                zoomOutButton.classList.remove('leaflet-disabled');
+                                zoomOutButton.style.cursor = 'pointer';
+                                zoomOutButton.style.opacity = '1';
+                                zoomOutButton.style.pointerEvents = 'auto';
+                                zoomOutButton.removeAttribute('disabled');
+                            }}
+                        }}
+                    }}
+                    
+                    // Call on every zoom change
+                    map.on('zoom', updateZoomControl);
+                    map.on('zoomend', updateZoomControl);
+                    updateZoomControl(); // Call immediately
+                    
+                    // Hide tiles outside bounds by clipping
+                    var tileLayer = document.querySelector('.leaflet-tile-pane');
+                    if (tileLayer) {{
+                        // Calculate pixel bounds
+                        var southWest = map.latLngToLayerPoint(bounds.getSouthWest());
+                        var northEast = map.latLngToLayerPoint(bounds.getNorthEast());
+                        
+                        // Create clip path
+                        var clipPath = 'rect(' + 
+                            northEast.y + 'px, ' + 
+                            northEast.x + 'px, ' + 
+                            southWest.y + 'px, ' + 
+                            southWest.x + 'px)';
+                        
+                        // Note: Modern browsers use clip-path instead of clip
+                    }}
+                }}
+                
+                // Add click cursor to paths
+                var paths = document.querySelectorAll('.leaflet-interactive');
+                paths.forEach(function(path) {{
+                    path.style.cursor = 'pointer';
+                }});
+            }}, 1000);
+        }});
+    </script>
+    '''
+    m.get_root().html.add_child(folium.Element(restrict_bounds_script))
+
+    return m._repr_html_()