Skip to content

MESQUAL Folium Area Visualization System

viz_arrow_icon

ResolvedArrowIconFeature dataclass

Bases: ResolvedFeature

Resolved visual properties for animated arrow icon elements.

Container for all computed styling properties of arrow icon visualizations, including position, orientation, colors, animation settings, and size. Used by ArrowIconGenerator to create folium markers with SVG arrow icons.

Source code in submodules/mesqual/mesqual/visualizations/folium_viz_system/viz_arrow_icon.py 
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
@dataclass
class ResolvedArrowIconFeature(ResolvedFeature):
    """
    Resolved visual properties for animated arrow icon elements.

    Container for all computed styling properties of arrow icon visualizations,
    including position, orientation, colors, animation settings, and size.
    Used by ArrowIconGenerator to create folium markers with SVG arrow icons.
    """
    @property
    def location(self) -> Point:
        return self.get('location')

    @property
    def offset(self) -> tuple[float, float]:
        return self.get('offset')

    @property
    def azimuth_angle(self) -> float:
        return self.get('azimuth_angle')

    @property
    def arrow_type(self) -> 'ArrowTypeEnum':
        return self.get('arrow_type')

    @property
    def color(self) -> str:
        return self.get('color')

    @property
    def stroke_width(self) -> int:
        return self.get('stroke_width')

    @property
    def width(self) -> int:
        return self.get('width')

    @property
    def height(self) -> int:
        return self.get('height')

    @property
    def speed_in_px_per_second(self) -> float:
        return self.get('speed_in_px_per_second')

    @property
    def speed_in_duration_seconds(self) -> float:
        return self.get('speed_in_duration_seconds')

    @property
    def num_arrows(self) -> int:
        return self.get('num_arrows')

    @property
    def opacity(self) -> float:
        return self.get('opacity')

    @property
    def reverse_direction(self) -> bool:
        return self.get('reverse_direction')

ArrowIconFeatureResolver

Bases: FeatureResolver[ResolvedArrowIconFeature]

Resolves visual properties for animated arrow icon elements.

Specialized feature resolver for arrow icon visualizations that handles point locations, arrow styling, animation parameters, and directional indicators. Commonly used for visualizing directional flows, network connections, or any point-based data with directional significance.

Integrates with the captain_arro library to provide various arrow types and animation effects for dynamic flow visualization.

Parameters:

Name Type Description Default
arrow_type Union[PropertyMapper, ArrowTypeEnum]

Type of arrow from ArrowTypeEnum (static value or PropertyMapper)

 None
color PropertyMapper | str

Arrow color (static value or PropertyMapper)

 '#2563eb'
stroke_width PropertyMapper | int

Arrow stroke width in pixels (static value or PropertyMapper)

 8
width PropertyMapper | int

Arrow icon width in pixels (static value or PropertyMapper)

 60
height PropertyMapper | int

Arrow icon height in pixels (static value or PropertyMapper)

 60
speed_in_px_per_second PropertyMapper | float | None

Animation speed in pixels/second (static value or PropertyMapper)

 20.0
speed_in_duration_seconds PropertyMapper | float | None

Animation duration in seconds (static value or PropertyMapper)

 None
num_arrows PropertyMapper | int

Number of animated arrows (static value or PropertyMapper)

 3
opacity PropertyMapper | float

Icon opacity 0-1 (static value or PropertyMapper)

 0.8
reverse_direction PropertyMapper | bool

Reverse arrow direction (static value or PropertyMapper)

 False
tooltip PropertyMapper | str | bool

Tooltip content (True for auto-generated, False for none)

 True
popup PropertyMapper | Popup | bool

Popup content (True/False/PropertyMapper)

 False
location PropertyMapper | Point

Point location (defaults to smart location detection)

 None
rotation_angle

Arrow rotation angle in degrees (static value or PropertyMapper)

 required
**property_mappers PropertyMapper | Any

Additional custom property mappings

 {}

Examples:

Basic directional flow arrows:

>>> from captain_arro import ArrowTypeEnum
>>> resolver = ArrowIconFeatureResolver(
...     arrow_type=ArrowTypeEnum.MOVING_FLOW_ARROW,
...     color='#FF0000',
...     width=50,
...     height=30
... )

Data-driven flow visualization:

>>> flow_color_scale = SegmentedContinuousColorscale(...)
>>> size_scale = SegmentedContinuousInputToContinuousOutputMapping(...)
>>> resolver = ArrowIconFeatureResolver(
...     arrow_type=PropertyMapper.from_kpi_value(
...         lambda v: ArrowTypeEnum.SPOTLIGHT_FLOW_ARROW if abs(v) > 100 
...                   else ArrowTypeEnum.BOUNCING_SPREAD_ARROW
...     ),
...     color=PropertyMapper.from_kpi_value(flow_color_scale),
...     width=PropertyMapper.from_kpi_value(size_scale),
...     reverse_direction=PropertyMapper.from_kpi_value(lambda v: v < 0),
...     rotation_angle=PropertyMapper.from_item_attr('azimuth_angle')
... )
Source code in submodules/mesqual/mesqual/visualizations/folium_viz_system/viz_arrow_icon.py 
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
class ArrowIconFeatureResolver(FeatureResolver[ResolvedArrowIconFeature]):
    """
    Resolves visual properties for animated arrow icon elements.

    Specialized feature resolver for arrow icon visualizations that handles point
    locations, arrow styling, animation parameters, and directional indicators.
    Commonly used for visualizing directional flows, network connections, or
    any point-based data with directional significance.

    Integrates with the captain_arro library to provide various arrow types
    and animation effects for dynamic flow visualization.

    Args:
        arrow_type: Type of arrow from ArrowTypeEnum (static value or PropertyMapper)
        color: Arrow color (static value or PropertyMapper)
        stroke_width: Arrow stroke width in pixels (static value or PropertyMapper)
        width: Arrow icon width in pixels (static value or PropertyMapper)
        height: Arrow icon height in pixels (static value or PropertyMapper)
        speed_in_px_per_second: Animation speed in pixels/second (static value or PropertyMapper)
        speed_in_duration_seconds: Animation duration in seconds (static value or PropertyMapper)
        num_arrows: Number of animated arrows (static value or PropertyMapper)
        opacity: Icon opacity 0-1 (static value or PropertyMapper)
        reverse_direction: Reverse arrow direction (static value or PropertyMapper)
        tooltip: Tooltip content (True for auto-generated, False for none)
        popup: Popup content (True/False/PropertyMapper)
        location: Point location (defaults to smart location detection)
        rotation_angle: Arrow rotation angle in degrees (static value or PropertyMapper)
        **property_mappers: Additional custom property mappings

    Examples:
        Basic directional flow arrows:
        >>> from captain_arro import ArrowTypeEnum
        >>> resolver = ArrowIconFeatureResolver(
        ...     arrow_type=ArrowTypeEnum.MOVING_FLOW_ARROW,
        ...     color='#FF0000',
        ...     width=50,
        ...     height=30
        ... )

        Data-driven flow visualization:
        >>> flow_color_scale = SegmentedContinuousColorscale(...)
        >>> size_scale = SegmentedContinuousInputToContinuousOutputMapping(...)
        >>> resolver = ArrowIconFeatureResolver(
        ...     arrow_type=PropertyMapper.from_kpi_value(
        ...         lambda v: ArrowTypeEnum.SPOTLIGHT_FLOW_ARROW if abs(v) > 100 
        ...                   else ArrowTypeEnum.BOUNCING_SPREAD_ARROW
        ...     ),
        ...     color=PropertyMapper.from_kpi_value(flow_color_scale),
        ...     width=PropertyMapper.from_kpi_value(size_scale),
        ...     reverse_direction=PropertyMapper.from_kpi_value(lambda v: v < 0),
        ...     rotation_angle=PropertyMapper.from_item_attr('azimuth_angle')
        ... )
    """
    def __init__(
            self,
            arrow_type: Union[PropertyMapper, 'ArrowTypeEnum'] = None,
            color: PropertyMapper | str = '#2563eb',
            stroke_width: PropertyMapper | int = 8,
            width: PropertyMapper | int = 60,
            height: PropertyMapper | int = 60,
            speed_in_px_per_second: PropertyMapper | float | None = 20.0,
            speed_in_duration_seconds: PropertyMapper | float | None = None,
            num_arrows: PropertyMapper | int = 3,
            opacity: PropertyMapper | float = 0.8,
            reverse_direction: PropertyMapper | bool = False,
            tooltip: PropertyMapper | str | bool = True,
            popup: PropertyMapper | folium.Popup | bool = False,
            location: PropertyMapper | Point = None,
            offset: PropertyMapper | tuple[float, float] = (0, 0),
            azimuth_angle: PropertyMapper | float = None,
            **property_mappers: PropertyMapper | Any,
    ):
        from captain_arro import ArrowTypeEnum
        mappers = dict(
            arrow_type=arrow_type or ArrowTypeEnum.MOVING_FLOW_ARROW,
            color=color,
            stroke_width=stroke_width,
            width=width,
            height=height,
            speed_in_px_per_second=speed_in_px_per_second,
            speed_in_duration_seconds=speed_in_duration_seconds,
            num_arrows=num_arrows,
            opacity=opacity,
            reverse_direction=reverse_direction,
            tooltip=tooltip,
            popup=popup,
            location=self._explicit_or_fallback(location, self._default_location_mapper()),
            offset=offset,
            azimuth_angle=self._explicit_or_fallback(azimuth_angle, self._default_rotation_angle_mapper()),
            **property_mappers
        )
        super().__init__(feature_type=ResolvedArrowIconFeature, **mappers)

    @staticmethod
    def _default_rotation_angle_mapper() -> PropertyMapper:

        def get_rotation_angle(data_item: VisualizableDataItem) -> float | None:
            for k in ['azimuth_angle', 'rotation_angle', 'projection_angle']:
                if data_item.object_has_attribute(k):
                    angle = data_item.get_object_attribute(k)
                    return angle
            return None

        return PropertyMapper(get_rotation_angle)

ArrowIconGenerator

Bases: FoliumObjectGenerator[ArrowIconFeatureResolver]

Generates folium Marker objects with animated SVG arrow icons.

Creates interactive map markers featuring animated arrow icons from the captain_arro library. Handles SVG generation, base64 encoding, rotation, and integration with folium's marker system.

Commonly used for visualizing: - Directional border flow directions with magnitude-based styling - Border price-spread with magnitude-based styling - Any point-based directional data with animation needs

Examples:

Power flow visualization:

>>> from captain_arro import ArrowTypeEnum
>>> flow_color_scale = SegmentedContinuousColorscale(...)
>>> size_mapping = SegmentedContinuousInputToContinuousOutputMapping(...)
>>> 
>>> generator = ArrowIconGenerator(
...     ArrowIconFeatureResolver(
...         arrow_type=PropertyMapper.from_kpi_value(
...             lambda v: ArrowTypeEnum.MOVING_FLOW_ARROW if abs(v) > 50
...                       else ArrowTypeEnum.BOUNCING_SPREAD_ARROW
...         ),
...         color=PropertyMapper.from_kpi_value(lambda v: flow_color_scale(abs(v))),
...         width=PropertyMapper.from_kpi_value(lambda v: size_mapping(abs(v))),
...         reverse_direction=PropertyMapper.from_kpi_value(lambda v: v < 0),
...         rotation_angle=PropertyMapper.from_item_attr('azimuth_angle'),
...         speed_in_duration_seconds=4
...     )
... )
>>> 
>>> fg = folium.FeatureGroup('Flow Arrows')
>>> generator.generate_objects_for_kpi_collection(flow_kpis, fg)
>>> fg.add_to(map)

Border flow indicators:

>>> generator.generate_objects_for_model_df(border_df, feature_group)
Source code in submodules/mesqual/mesqual/visualizations/folium_viz_system/viz_arrow_icon.py 
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
class ArrowIconGenerator(FoliumObjectGenerator[ArrowIconFeatureResolver]):
    """
    Generates folium Marker objects with animated SVG arrow icons.

    Creates interactive map markers featuring animated arrow icons from the
    captain_arro library. Handles SVG generation, base64 encoding, rotation,
    and integration with folium's marker system.

    Commonly used for visualizing:
    - Directional border flow directions with magnitude-based styling
    - Border price-spread with magnitude-based styling
    - Any point-based directional data with animation needs

    Examples:
        Power flow visualization:
        >>> from captain_arro import ArrowTypeEnum
        >>> flow_color_scale = SegmentedContinuousColorscale(...)
        >>> size_mapping = SegmentedContinuousInputToContinuousOutputMapping(...)
        >>> 
        >>> generator = ArrowIconGenerator(
        ...     ArrowIconFeatureResolver(
        ...         arrow_type=PropertyMapper.from_kpi_value(
        ...             lambda v: ArrowTypeEnum.MOVING_FLOW_ARROW if abs(v) > 50
        ...                       else ArrowTypeEnum.BOUNCING_SPREAD_ARROW
        ...         ),
        ...         color=PropertyMapper.from_kpi_value(lambda v: flow_color_scale(abs(v))),
        ...         width=PropertyMapper.from_kpi_value(lambda v: size_mapping(abs(v))),
        ...         reverse_direction=PropertyMapper.from_kpi_value(lambda v: v < 0),
        ...         rotation_angle=PropertyMapper.from_item_attr('azimuth_angle'),
        ...         speed_in_duration_seconds=4
        ...     )
        ... )
        >>> 
        >>> fg = folium.FeatureGroup('Flow Arrows')
        >>> generator.generate_objects_for_kpi_collection(flow_kpis, fg)
        >>> fg.add_to(map)

        Border flow indicators:
        >>> generator.generate_objects_for_model_df(border_df, feature_group)
    """
    def _feature_resolver_type(self) -> Type[ArrowIconFeatureResolver]:
        return ArrowIconFeatureResolver

    def generate(self, data_item: VisualizableDataItem, feature_group: folium.FeatureGroup) -> None:
        """
        Generate and add a folium Marker with animated SVG arrow icon.

        Args:
            data_item: Data item containing point location and associated data
            feature_group: Folium feature group to add the arrow marker to
        """
        style = self.feature_resolver.resolve_feature(data_item)
        if style.location is None:
            return

        svg_content = self._generate_arrow_svg(style, data_item)
        encoded_svg = base64.b64encode(svg_content.encode()).decode()

        angle = float(style.azimuth_angle) - 90  # Folium counts clockwise from right-pointing direction; normal convention is CCW
        x_offset, y_offset = style.offset

        icon_html = f'''
            <div style="
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%) translate({x_offset}px, {-y_offset}px) rotate({angle}deg);
                opacity: {style.opacity};
            ">
                <img src="data:image/svg+xml;base64,{encoded_svg}" 
                     width="{style.width}" 
                     height="{style.height}">
                </img>
            </div>
        '''

        icon = folium.DivIcon(
            html=icon_html,
            icon_size=(style.width, style.height),
            icon_anchor=(style.width // 2, style.height // 2)
        )
        folium.Marker(
            location=(style.location.y, style.location.x),
            icon=icon,
            tooltip=style.tooltip,
            popup=style.popup
        ).add_to(feature_group)

    def _generate_arrow_svg(self, style: ResolvedArrowIconFeature, data_item: VisualizableDataItem) -> str:
        from inspect import signature
        from captain_arro import get_generator_for_arrow_type

        def safe_init(cls: type, kwargs: dict):
            init_params = signature(cls.__init__).parameters
            accepted_keys = {
                k for k in init_params
                if k != 'self' and init_params[k].kind in (
                init_params[k].POSITIONAL_OR_KEYWORD, init_params[k].KEYWORD_ONLY)
            }
            filtered_kwargs = {k: v for k, v in kwargs.items() if k in accepted_keys}
            return cls(**filtered_kwargs)

        arrow_type = style.arrow_type
        generator_class = get_generator_for_arrow_type(arrow_type)
        arrow_style_kwargs = style.to_dict()
        if 'direction' not in arrow_style_kwargs:
            arrow_style_kwargs['direction'] = 'left' if style.reverse_direction else 'right'
        return safe_init(generator_class, arrow_style_kwargs).generate_svg(unique_id=True)

generate 

generate(data_item: VisualizableDataItem, feature_group: FeatureGroup) -> None

Generate and add a folium Marker with animated SVG arrow icon.

Parameters:

Name Type Description Default
data_item VisualizableDataItem

Data item containing point location and associated data

 required
feature_group FeatureGroup

Folium feature group to add the arrow marker to

 required
Source code in submodules/mesqual/mesqual/visualizations/folium_viz_system/viz_arrow_icon.py 
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
def generate(self, data_item: VisualizableDataItem, feature_group: folium.FeatureGroup) -> None:
    """
    Generate and add a folium Marker with animated SVG arrow icon.

    Args:
        data_item: Data item containing point location and associated data
        feature_group: Folium feature group to add the arrow marker to
    """
    style = self.feature_resolver.resolve_feature(data_item)
    if style.location is None:
        return

    svg_content = self._generate_arrow_svg(style, data_item)
    encoded_svg = base64.b64encode(svg_content.encode()).decode()

    angle = float(style.azimuth_angle) - 90  # Folium counts clockwise from right-pointing direction; normal convention is CCW
    x_offset, y_offset = style.offset

    icon_html = f'''
        <div style="
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) translate({x_offset}px, {-y_offset}px) rotate({angle}deg);
            opacity: {style.opacity};
        ">
            <img src="data:image/svg+xml;base64,{encoded_svg}" 
                 width="{style.width}" 
                 height="{style.height}">
            </img>
        </div>
    '''

    icon = folium.DivIcon(
        html=icon_html,
        icon_size=(style.width, style.height),
        icon_anchor=(style.width // 2, style.height // 2)
    )
    folium.Marker(
        location=(style.location.y, style.location.x),
        icon=icon,
        tooltip=style.tooltip,
        popup=style.popup
    ).add_to(feature_group)