Crate leptos_leaflet

leptos-leaflet

This crate provides a set of components and utilities to work with the Leaflet library in Leptos.

Components

• MapContainer: A container for the Leaflet map. Where all the other components are added.
• Circle: A circle overlay that represents a circle on the map.
• Control: A control that represents a control on the map.
• ImageOverlay: An image overlay that represents an image on the map.
• Marker: A marker overlay that represents a marker on the map.
• Polygon: A polygon overlay that represents a polygon on the map.
• Polyline: A polyline overlay that represents a polyline on the map.
• Popup: A popup overlay that represents a popup on the map.
• QuadTileLayer: A tile layer that uses quadkey-based URLs instead of x/y/z coordinates.
• TileLayer: A tile layer that represents a tile layer on the map.
• TileLayerWms: A tile layer that represents a tile layer on the map.
• Tooltip: A tooltip overlay that represents a tooltip on the map.
• VideoOverlay: A video overlay that represents a video on the map.
• Zoom: A zoom control that represents a zoom control on the map.

Utilities

• IntoLatLng: A trait to convert types into leaflet::LatLng instances.
• LeafletMapContext: A context struct for the Leaflet map.
• Position: A struct to represent a position on the map.

Example

use std::time::Duration;
 
use leptos::prelude::*;
use leptos_leaflet::prelude::*;
 
#[component]
pub fn App() -> impl IntoView {
    let (marker_position, set_marker_position) = create_signal(Position::new(51.49, -0.08));
 
    create_effect(move |_| {
        set_interval_with_handle(
            move || {
                set_marker_position.update(|pos| {
                    pos.lat += 0.001;
                    pos.lng += 0.001;
                });
            },
            Duration::from_millis(200),
        )
        .ok()
    });
 
    view! {
          <MapContainer style="height: 400px" center=Position::new(51.505, -0.09) zoom=13.0 set_view=true>
              <TileLayer url="https://tile.openstreetmap.org/{z}/{x}/{y}.png" attribution="&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"/>
              <Marker position=marker_position >
                  <Popup>
                      <strong>{"A pretty CSS3 popup"}</strong>
                  </Popup>
              </Marker>
                <Marker position=(51.5, -0.065) draggable=true >
                  <Popup>
                      <strong>{"A pretty CSS3 popup"}</strong>
                  </Popup>
              </Marker>
              <Tooltip position=(51.5, -0.06) permanent=true direction="top">
                  <strong>{"And a tooltip"}</strong>
              </Tooltip>
              <Polyline positions=positions(&[(51.505, -0.09), (51.51, -0.1), (51.51, -0.12)])/>
              <Polygon color="purple" positions=positions(&[ (51.515, -0.09), (51.52, -0.1), (51.52, -0.12)]) >
                <Tooltip sticky=true direction="top">
                    <strong>{"I'm a polygon"}</strong>
                </Tooltip>
            </Polygon>
            <Circle center=(51.505, -0.09) color="blue" radius=200.0>
                <Tooltip sticky=true>{"I'm a circle"}</Tooltip>
            </Circle>
        </MapContainer>
    }
}

Re-exports

pub use leaflet;

Modules

prelude

Macros

effect_update_on_change

effect_update_on_change_ref

impl_thread_safe_js_value

This is a helper macro to implement the From trait for ThreadSafeJsValue.

leaflet_event

position

setup_layer_leaflet_option

setup_layer_leaflet_option_ref

setup_layer_leaflet_string

setup_layer_option

setup_layer_option_ref

setup_layer_option_str