GlobeMap / ChoroplethMap / BubbleMap
Partial Data VisualizationOffline SVG bubble/country maps and a draggable globe; projection and tooltips differ from Kumo.
Kumo reference: kumo-ui.com/charts/maps/
Presentation commands show demo feedback. Read the interaction guide to connect real actions.
Bubble map
Made with Natural Earth. Synthetic example data.
Show template
{% load wdj %}
{% include "wdj/components/map.html" with label="Global requests" data=audit_map_bubble only %}Country values
Made with Natural Earth. Synthetic example data.
Show template
{% load wdj %}
{% include "wdj/components/map.html" with label="Global requests" data=audit_map_choropleth only %}SVG globe
Made with Natural Earth. Synthetic example data.
Show template
{% load wdj %}
{% include "wdj/components/map.html" with label="Global requests" data=audit_map_globe only %}Interactive location details
Made with Natural Earth. Synthetic example data.
Show template
{% load wdj %}
{% include "wdj/components/map.html" with label="Global requests" data=audit_map_bubble only %}Rotating globe
Made with Natural Earth. Synthetic example data.
Show template
{% load wdj %}
{% include "wdj/components/map.html" with label="Global requests" data=audit_map_globe auto_rotate=True only %}Custom markers and details
Made with Natural Earth. Synthetic example data.
Focus or select the green marker for details. Zoom first, then drag or use arrow keys to move the map.
Show template
{% load wdj %}
{% include 'wdj/components/map.html' with id='configured-markers' data=recommendation_map label='Regional traffic' only %}
<p class='text-base text-kumo-subtle'>Focus or select the green marker for details. Zoom first, then drag or use arrow keys to move the map.</p>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| data | dict | unset | Map state produced by wdj.maps.map_data(markers, values, kind='bubble|choropleth|globe'). |
| label | string | unset | Visible accessible label. Supply an explicit aria-label via attrs when the control is bare. |
| rotation | string | unset | Globe initial longitude and latitude rotation, comma separated; default -10,-20. |
| draggable | bool | False | Draggable; pass the documented value shown in the examples. |
| auto_rotate | bool | False | Auto rotate; pass the documented value shown in the examples. |
| id | string | unset | Stable unique DOM ID; important for HTMX targets and focus restoration. |
| class | string | "" | Class; pass the documented value shown in the examples. |