dioxus-leaflet 0.5.0

A general-purpose Leaflet map component for Dioxus applications
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
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

use crate::{LatLng, MapOptions, MapPosition, interop, types::Id};
use dioxus::{
    core::{spawn_forever, use_drop},
    prelude::*,
};
use std::rc::Rc;

const MAP_CSS: Asset = asset!("/assets/dioxus_leaflet.scss");

/// Main map component using Leaflet
#[component]
pub fn Map(
    /// Initial position of the map
    #[props(default = MapPosition::default())]
    initial_position: MapPosition,

    /// Height of the map container
    #[props(into)]
    height: Option<String>,

    /// Width of the map container
    #[props(into)]
    width: Option<String>,

    /// Map configuration options
    options: Option<MapOptions>,

    /// Custom CSS class for the map container
    #[props(into)]
    class: Option<String>,

    /// Custom CSS styles for the map container
    #[props(into)]
    style: Option<String>,

    /// Callback when map is clicked
    on_click: Option<EventHandler<LatLng>>,

    /// Callback when map is moved
    on_move: Option<EventHandler<MapPosition>>,

    children: Element,
) -> Element {
    let id = use_context_provider(|| Rc::new(Id::map(dioxus_core::current_scope_id().0)));
    let options = options.unwrap_or(MapOptions::default());
    let leaflet_css = options.leaflet_resources.css_url();
    let leaflet_js = options.leaflet_resources.js_url();
    let height = height.unwrap_or_else(|| "400px".to_string());
    let width = width.unwrap_or_else(|| "100%".to_string());
    let style = style.unwrap_or_default();
    let class = class.unwrap_or_default();

    let id2 = id.clone();
    let load_error = use_resource(move || {
        let id = id2.clone();
        let pos = initial_position;
        let opts = options.clone();
        async move {
            interop::update_map(&id, &pos, &opts)
                .await
                .map_err(|e| e.to_string())
        }
    });

    let id2 = id.clone();
    let _click_handle = use_resource(move || {
        let id = id2.clone();
        async move {
            if let Some(on_click) = on_click {
                interop::on_map_click(&id, on_click).await
            } else {
                Ok(())
            }
        }
    });

    let id2 = id.clone();
    let _move_handle = use_resource(move || {
        let id = id2.clone();
        async move {
            if let Some(on_move) = on_move {
                interop::on_map_move(&id, on_move).await
            } else {
                Ok(())
            }
        }
    });

    let id2 = id.clone();
    use_drop(move || {
        let id = id2.clone();
        spawn_forever(async move {
            _ = interop::delete_map(&id).await;
        });
    });

    rsx! {
        // Leaflet CSS
        document::Style { href: leaflet_css }

        document::Style { href: MAP_CSS }

        // Leaflet JavaScript
        document::Script { src: leaflet_js }

        // boot logic
        document::Script { src: interop::DL_JS, r#type: "module" }

        if let Some(Err(err)) = load_error() {
            p { "{err}" }
        } else {
            // Keep size/style on the wrapping container so Leaflet can mount reliably.
            div {
                class: "dioxus-leaflet-container {class}",
                style: "height: {height}; width: {width}; {style}",

                // Element taken over by leaflet
                div {
                    id: "dioxus-leaflet-map-{id.id()}",
                    class: "dioxus-leaflet-map",
                    {children}
                }
            }
        }
    }
}