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

//! Circle Layer component for MapLibre

use dioxus::prelude::*;

use crate::context::MapContext;

/// Props for the CircleLayer component
#[derive(Props, Clone, PartialEq, Eq)]
pub struct CircleLayerProps {
    /// Unique layer ID
    pub id: String,

    /// Source ID to get data from
    pub source: String,

    /// Paint properties (circle-radius, circle-color, circle-stroke-width, etc.)
    /// See: https://maplibre.org/maplibre-style-spec/layers/#circle
    #[props(default)]
    pub paint: Option<serde_json::Value>,

    /// Layout properties (visibility, etc.)
    #[props(default)]
    pub layout: Option<serde_json::Value>,
}

/// A circle layer that renders points from a GeoJSON source as circles
///
/// # Example
/// ```rust,ignore
/// CircleLayer {
///     id: "cameras-circles",
///     source: "cameras",
///     paint: serde_json::json!({
///         "circle-radius": 6,
///         "circle-color": "#3b82f6",
///         "circle-stroke-width": 2,
///         "circle-stroke-color": "#000000"
///     }),
/// }
/// ```
#[component]
#[allow(unused_variables)] // props only used on wasm32
pub fn CircleLayer(props: CircleLayerProps) -> Element {
    // Get map context from parent
    #[allow(unused_variables)] // only used on wasm32
    let ctx = use_context::<MapContext>();

    // Track whether layer has been added
    #[allow(unused_variables, unused_mut)] // only used on wasm32
    let mut layer_added = use_signal(|| false);

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

        let layer_id = props.id.clone();
        let source_id = props.source.clone();

        // Default paint properties for circles
        let paint = props.paint.clone().unwrap_or(serde_json::json!({
            "circle-radius": 6,
            "circle-color": "#3b82f6",
            "circle-stroke-width": 2,
            "circle-stroke-color": "#000000"
        }));

        let layout = props.layout.clone().unwrap_or(serde_json::json!({}));

        // Add layer when map is ready
        {
            let map_id = ctx.map_id.clone();
            let layer_id = layer_id.clone();
            let source_id = source_id.clone();
            let paint = paint.clone();
            let layout = layout.clone();
            let is_ready = ctx.is_ready;

            use_effect(move || {
                let map_id = map_id.clone();
                let layer_id = layer_id.clone();
                let source_id = source_id.clone();
                let paint = paint.clone();
                let layout = layout.clone();

                if is_ready() && !layer_added() {
                    debug!("Adding circle layer: {}", layer_id);
                    layer_added.set(true);

                    let js = add_layer_js(
                        &map_id,
                        &layer_id,
                        "circle",
                        &source_id,
                        &paint.to_string(),
                        &layout.to_string(),
                    );
                    spawn(async move {
                        let _ = document::eval(&js).await;
                    });
                }
            });
        }

        // Remove layer on unmount
        {
            let map_id = ctx.map_id.clone();
            let layer_id = layer_id.clone();

            use_drop(move || {
                debug!("Removing circle layer: {}", layer_id);
                let js = remove_layer_js(&map_id, &layer_id);
                spawn(async move {
                    let _ = document::eval(&js).await;
                });
            });
        }
    }

    // Layer doesn't render DOM - it's purely JS-side
    rsx! {}
}