dioxus-maplibre 0.0.4

MapLibre GL JS wrapper for Dioxus 0.7
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
127
128
129
130

//! Marker component

use dioxus::prelude::*;

use crate::context::MapContext;
use crate::types::LatLng;

/// Props for the Marker component
#[derive(Props, Clone, PartialEq)]
pub struct MarkerProps {
    /// Geographic position of the marker
    pub position: LatLng,

    /// Unique marker ID (auto-generated if not provided)
    #[props(optional)]
    pub id: Option<String>,

    /// Emoji to display instead of default pin (e.g., "📷")
    #[props(optional)]
    pub emoji: Option<String>,

    /// Popup content (HTML string)
    #[props(optional)]
    pub popup: Option<String>,

    /// Child Popup component
    pub children: Element,
}

/// A marker on the map
#[component]
pub fn Marker(props: MarkerProps) -> Element {
    // Get map context from parent
    #[allow(unused_variables)] // only used on wasm32
    let ctx = use_context::<MapContext>();

    // Generate marker ID if not provided
    #[allow(unused_variables)] // only used on wasm32
    let marker_id = use_hook(|| {
        props.id.clone().unwrap_or_else(|| {
            format!("marker_{}", uuid::Uuid::new_v4().to_string().replace('-', ""))
        })
    });

    // Only do JS interop on wasm targets
    #[cfg(target_arch = "wasm32")]
    {
        use crate::interop::{add_marker_js, remove_marker_js, update_marker_position_js};
        use tracing::debug;

        let position = props.position;
        let popup = props.popup.clone();
        let emoji = props.emoji.clone();

        // Add marker when map is ready
        {
            let map_id = ctx.map_id.clone();
            let marker_id = marker_id.clone();
            let is_ready = ctx.is_ready;

            use_effect(move || {
                // Clone for async block
                let map_id = map_id.clone();
                let marker_id = marker_id.clone();
                let popup = popup.clone();
                let emoji = emoji.clone();

                if is_ready() {
                    debug!("Adding marker: {}", marker_id);
                    let js = add_marker_js(
                        &map_id,
                        &marker_id,
                        position.lat,
                        position.lng,
                        popup.as_deref(),
                        emoji.as_deref(),
                    );
                    spawn(async move {
                        let _ = document::eval(&js).await;
                    });
                }
            });
        }

        // Update position when it changes
        {
            let map_id = ctx.map_id.clone();
            let marker_id = marker_id.clone();
            let is_ready = ctx.is_ready;
            let mut prev_position = use_signal(|| position);

            use_effect(move || {
                let map_id = map_id.clone();
                let marker_id = marker_id.clone();

                if is_ready() && prev_position() != position {
                    debug!("Updating marker position: {}", marker_id);
                    let js = update_marker_position_js(
                        &map_id,
                        &marker_id,
                        position.lat,
                        position.lng,
                    );
                    spawn(async move {
                        let _ = document::eval(&js).await;
                    });
                    prev_position.set(position);
                }
            });
        }

        // Remove marker on unmount
        {
            let map_id = ctx.map_id.clone();
            let marker_id = marker_id.clone();

            use_drop(move || {
                debug!("Removing marker: {}", marker_id);
                let js = remove_marker_js(&map_id, &marker_id);
                spawn(async move {
                    let _ = document::eval(&js).await;
                });
            });
        }
    }

    // Marker doesn't render DOM - it's purely JS-side
    // Children (Popup) are handled via props
    rsx! {}
}