leptos_leaflet/components/
map_container.rs

1use leaflet::Map;
2use leptos::{html::Div, prelude::*};
3use wasm_bindgen::prelude::*;
4use web_sys::HtmlDivElement;
5
6use leaflet::LocateOptions;
7
8use crate::core::JsWriteSignal;
9
10use super::{provide_leaflet_context, MapEvents, PopupEvents, Position, TooltipEvents};
11
12/// A container for the Leaflet map.
13/// 
14/// This is the main container for the Leaflet map. It provides a way to add child nodes to the map.
15/// It also provides a signal to access the map instance, allowing to interact with the map from other components.
16#[component]
17pub fn MapContainer(
18    #[prop(into, optional)] class: Signal<String>,
19    #[prop(into, optional)] style: Signal<String>,
20    /// Centers the map on the given location
21    #[prop(into, optional)]
22    center: Option<Position>,
23    /// Zoom level of the map. Defaults to 10.0
24    #[prop(optional, default = 10.0)]
25    zoom: f64,
26    /// Wether zoom controls should be added to the map.
27    #[prop(optional, default = true)]
28    zoom_control: bool,
29    /// Wether mouse wheel zoom controls is enabled or disabled.
30    #[prop(optional, default = true)]
31    scroll_wheel_zoom: bool,
32    /// Zoom snap of the map. Defaults to 1.0
33    #[prop(optional, default = 1.0)]
34    zoom_snap: f64,
35    /// Zoom delta of the map. Defaults to 1.0
36    #[prop(optional, default = 1.0)]
37    zoom_delta: f64,
38    /// Allow zoom on double_click
39    #[prop(optional, default = true)]
40    double_click_zoom: bool,
41    /// Sets the minimum zoom level
42    #[prop(optional, default = 0.0)]
43    min_zoom: f64,
44    /// Use geolocation from the browser to track the user
45    #[prop(optional)]
46    locate: bool,
47    /// Tracks position of the user on the map
48    #[prop(optional)]
49    watch: bool,
50    /// Enables high-accuracy tracking
51    #[prop(optional)]
52    enable_high_accuracy: bool,
53    /// Sets the view of the map if geolocation is available
54    #[prop(optional)]
55    set_view: bool,
56    #[prop(optional)] map: Option<JsWriteSignal<Option<Map>>>,
57    #[prop(optional)] events: MapEvents,
58    #[prop(optional)] popup_events: PopupEvents,
59    #[prop(optional)] tooltip_events: TooltipEvents,
60    /// An optional node ref for the map `div` container element.
61    #[prop(optional)]
62    node_ref: Option<NodeRef<Div>>,
63    /// Wether the map should prefer canvas renderer.
64    #[prop(optional)]
65    prefer_canvas: bool,
66    /// Inner map child nodes
67    #[prop(optional)]
68    children: Option<Children>,
69) -> impl IntoView {
70    let map_ref = node_ref.unwrap_or_default();
71    let map_context = provide_leaflet_context();
72
73    let map_load = map_ref;
74    Effect::new(move |_| {
75        if let Some(map_div) = map_load.get() {
76            let html_node = map_div.unchecked_ref::<HtmlDivElement>();
77            // Randomize the id of the map
78            if html_node.id().is_empty() {
79                let id = format!("map-{}", (js_sys::Math::random() * 1000.0) as u32);
80                map_div.set_id(&id);
81            }
82            let events = events.clone();
83            let popup_events = popup_events.clone();
84            let tooltip_events = tooltip_events.clone();
85
86            let options = leaflet::MapOptions::new();
87            options.set_prefer_canvas(prefer_canvas);
88            options.set_zoom_control(zoom_control);
89            options.set_scroll_wheel_zoom(scroll_wheel_zoom);
90            options.set_zoom(zoom);
91            options.set_zoom_snap(zoom_snap);
92            options.set_zoom_delta(zoom_delta);
93            options.set_double_click_zoom(JsValue::from_bool(double_click_zoom));
94            options.set_min_zoom(min_zoom);
95            if let Some(center) = center {
96                options.set_center(center.as_lat_lng());
97            }
98            let leaflet_map = Map::new(&html_node.id(), &options);
99
100            // Setup events
101            events.setup(&leaflet_map);
102            popup_events.setup(&leaflet_map);
103            tooltip_events.setup(&leaflet_map);
104
105            if locate {
106                let mut locate_options = LocateOptions::new();
107                locate_options.enable_high_accuracy(enable_high_accuracy);
108                locate_options.set_view(set_view);
109                locate_options.watch(watch);
110                leaflet_map.locate_with_options(&locate_options);
111            }
112
113            map_context.set_map(&leaflet_map);
114            if let Some(map) = map {
115                map.set(Some(leaflet_map));
116            }
117        };
118    });
119
120    on_cleanup(move || {
121        if let Some(map) = map_context.map_untracked().as_ref() {
122            map.remove();
123        };
124    });
125
126    view! { <div class=move || class.get() node_ref=map_ref style=move || style.get()>{children.map(|child|child())}</div>}
127}
128
129#[derive(Debug, Default, Clone)]
130pub struct LeafletMap {
131    #[cfg(not(feature = "ssr"))]
132    pub map: Option<leaflet::Map>,
133}
134
135impl LeafletMap {
136    pub fn new() -> Self {
137        Self {
138            #[cfg(not(feature = "ssr"))]
139            map: None,
140        }
141    }
142}
leptos_leaflet/components/map_container.rs

leptos_leaflet/components/
map_container.rs
