leptos-leaflet 0.10.2

Leaflet components to use in Leptos.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
80
81

use super::{use_pane_context, Bounds, LeafletMapContext};
use crate::core::IntoThreadSafeJsValue;
use leptos::logging::log;
use leptos::prelude::*;

/// An image overlay component.
#[component(transparent)]
pub fn ImageOverlay(
    #[prop(into)] url: String,
    #[prop(into)] bounds: Bounds,
    #[prop(into, optional)] opacity: Option<Signal<f64>>,
    #[prop(into, optional)] alt: Option<Signal<String>>,
    #[prop(into, optional)] interactive: Option<Signal<bool>>,
    #[prop(into, optional)] cross_origin: Option<Signal<String>>,
    #[prop(into, optional)] cross_origin_toggle: Option<Signal<bool>>,
    #[prop(into, optional)] error_overlay_url: Option<Signal<String>>,
    #[prop(into, optional)] z_index: Option<Signal<f64>>,
    #[prop(into, optional)] class_name: Option<Signal<String>>,
    #[prop(into, optional)] bubbling_mouse_events: Option<Signal<bool>>,
    #[prop(into, optional)] pane: Option<Signal<String>>,
    #[prop(into, optional)] attribution: Option<Signal<String>>,
) -> impl IntoView {
    let map_context = use_context::<LeafletMapContext>().expect("map context not found");
    Effect::new(move |_| {
        if let Some(map) = map_context.map() {
            log!("Adding image layer: {}", url);
            let options = leaflet::ImageOverlayOptions::new();
            if let Some(opacity) = opacity {
                options.set_opacity(opacity.get_untracked());
            }
            if let Some(alt) = &alt {
                options.set_alt(alt.get_untracked());
            }
            if let Some(interactive) = interactive {
                options.set_interactive(interactive.get_untracked());
            }
            if let Some(cross_origin) = &cross_origin {
                options.set_cross_origin(cross_origin.get_untracked());
            }
            if let Some(cross_origin_toggle) = cross_origin_toggle {
                options.set_cross_origin_toggle(cross_origin_toggle.get_untracked());
            }
            if let Some(error_overlay_url) = &error_overlay_url {
                options.set_error_overlay_url(error_overlay_url.get_untracked());
            }
            if let Some(z_index) = z_index {
                options.set_z_index(z_index.get_untracked());
            }
            if let Some(class_name) = &class_name {
                options.set_class_name(class_name.get_untracked());
            }
            if let Some(bubbling_mouse_events) = &bubbling_mouse_events {
                options.set_bubbling_mouse_events(bubbling_mouse_events.get_untracked());
            }

            // Use explicit pane if provided, otherwise use pane context if available
            if let Some(pane) = &pane {
                let pane_value = pane.get_untracked();
                if !pane_value.is_empty() {
                    options.set_pane(pane_value);
                }
            } else if let Some(pane_context) = use_pane_context() {
                options.set_pane(pane_context.name().to_string());
            }
            if let Some(attribution) = &attribution {
                options.set_attribution(attribution.get_untracked());
            }

            let map_layer = leaflet::ImageOverlay::new_with_options(
                &url,
                &bounds.as_lat_lng_bounds(),
                &options,
            )
            .into_thread_safe_js_value();
            map_layer.add_to(&map);
            on_cleanup(move || {
                map_layer.remove();
            });
        }
    });
}