How to remove blank frame from the tooltip

Dash Python
2

add this to your css file:

.leaflet-tooltip {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

now… if you could find a solution to my leaflet project problem I’d be much appreciative:

mostly joking… lol but you should also consider using dl.GeoJSON cluster seems kinda dense. You could set it up with:

import geopandas as gpd

gdf = gpd.GeoDataFrame(
    df, geometry=gpd.points_from_xy(df.lon, df.lat))

geojson = gdf.to_json()

geojson_dict = json.loads(geojson)

point_to_layer_js = assign("""
function(feature, latlng){
    const iconData = feature.properties.icon_data;
    const flag = L.icon({
        iconUrl: 'https://cdn-icons-png.flaticon.com/128/7015/7015198.png', 
        iconSize: [35, 35],
        tooltipAnchor: [20, 0]  // Adjusts the tooltip 10px to the right
    });
    const marker = L.marker(latlng, {icon: flag});
    marker.bindTooltip(''); // setup custom tooltip here
    return marker;
}
""")

dl.Map(

                    [
                        dl.TileLayer(
                            url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
                        ),
                        dl.GeoJSON(
                            data=geojson_dict,
                            id="locations_layer",
                            cluster=True,
                            zoomToBoundsOnClick=True,
                            superClusterOptions=dict(radius=40),
                            pointToLayer=point_to_layer_js,              
                        ), 
])

that will give you the cluster effect with a custom icon and hover price on icon if setup correctly.

Icon I chose was:

image
image512×512 18.9 KB

but you can look through: Search results for Gas station - Flaticon
and pick a better icon or setup a way to match brands with specific icons

1 Like