leptos-leaflet

Leaflet components for Leptos. This aims to target the functionality of React-Leaflet.

For now only a few of the components are ported, and events must be set in the Signal map object set by the MapContainer when leaflet is inited.

NOTE: Current version support leptos 0.6.x, that removes all Scope usages from signals and effects.

Support for leptos 0.7.x exists in the leptos-0.7 branch. When Leptos 0.7 is released, this branch will be merged into main.

Features

• CSR/HYDRATE/SSR support

Components

• MapContainer
• Control
• TileLayer
• TileLayerWms
• ImageOverlay
• VideoOverlay
• Marker
• Polygon
• Polyline
• Circle
• Tooltip
• Popup

Compatibility

leptos 0.7.x -> leptos-leaflet 0.9.x leptos 0.6.x -> leptos-leaflet 0.8.x

lib.rs:

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.
• 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::*;
use leptos_leaflet::*;

#[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=position!(51.5, -0.065) draggable=true >
                  <Popup>
                      <strong>{"A pretty CSS3 popup"}</strong>
                  </Popup>
              </Marker>
              <Tooltip position=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=position!(51.505, -0.09) color="blue" radius=200.0>
                <Tooltip sticky=true>{"I'm a circle"}</Tooltip>
            </Circle>
        </MapContainer>
    }
}