Interactive Maps¶

to_interactive post-processes the SVG to inject hover tooltips via embedded JavaScript. The result has no external dependencies and renders directly in Jupyter or as a standalone HTML file.

from mappyng import Map, BasemapLayer, ChoroplethLayer

m = Map(gdf, width=800, height="auto")
m.add(BasemapLayer())
m.add(ChoroplethLayer(gdf, column="population", method="Quantiles"))

interactive = m.to_interactive(
    columns=["LIB_GEO", "population"],
    aliases={"LIB_GEO": "Département"},
    tooltip={
        "background": "rgba(30,30,30,0.92)",
        "text_color": "#ffffff",
        "font_size": 12,
        "border_radius": 6,
        "key_weight": "600",
        "hover": {
            "opacity": 0.8,
            "scale": 1.05,
            "stroke_width_boost": 1.5,
            "shadow": True,
            "shadow_color": "rgba(0,0,0,0.4)",
        },
    },
)
interactive.save("carte.html")

`to_interactive` parameters¶

Parameter	Description
`columns`	List of column names to include in tooltips. All non-internal columns are shown if omitted.
`aliases`	`{column: display_label}` mapping for tooltip keys.
`tooltip`	Appearance dict, fields of `TooltipStyle`.
`hover_opacity`	Convenience alias for `tooltip={"hover": {"opacity": value}}`.

TooltipStyle fields¶

Field	Default	Description
`background`	`"rgba(30,30,30,0.92)"`	Tooltip background color.
`text_color`	`"#fff"`	Tooltip text color.
`font_size`	11	Font size in px.
`font_family`	system sans-serif	Font family.
`border_radius`	4	Tooltip corner radius in px.
`border_color`	`"rgba(255,255,255,0.15)"`	Tooltip border color.
`key_weight`	`"600"`	Font weight for key labels.
`hover`	`HoverEffect()`	Hover effect config: `True` (defaults), `False` (disabled), or a dict of `HoverEffect` fields.

HoverEffect fields¶

Field	Default	Description
`enabled`	`True`	Master switch. `False` disables all hover visuals.
`transition`	`"all 0.25s ..."`	CSS transition timing string.
`opacity`	1.0	Element opacity on hover (< 1 = dim).
`scale`	1.0	Scale factor on hover (1.0 = no scaling).
`shadow`	`False`	Show a CSS drop-shadow on hover.
`shadow_color`	`"rgba(0,0,0,0.35)"`	Shadow color.
`shadow_dx` / `shadow_dy`	0.0 / 4.0	Shadow offset in SVG px.
`shadow_blur`	8.0	Shadow blur radius in SVG px.
`stroke_width_boost`	1.0	Extra stroke-width added on hover (0 = no change).
`stroke_color`	`"#333333"`	Override stroke color on hover (`None` = keep original).