7 unstable releases (3 breaking)

0.9.0-rc1 Nov 10, 2024
0.8.2 Nov 10, 2024
0.8.1 May 9, 2024
0.8.0 Apr 15, 2024
0.6.1 Nov 16, 2023

#1209 in Web programming

Download history 44/week @ 2024-08-05 1/week @ 2024-08-12 29/week @ 2024-08-19 15/week @ 2024-08-26 11/week @ 2024-09-02 19/week @ 2024-09-16 26/week @ 2024-09-23 7/week @ 2024-09-30 43/week @ 2024-10-07 19/week @ 2024-10-14 3/week @ 2024-10-28 111/week @ 2024-11-04 111/week @ 2024-11-11 61/week @ 2024-11-18

286 downloads per month

MIT license

120KB
2.5K SLoC

leptos-leaflet

crates.io license: MIT

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

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>
    }
}

Dependencies

~22–34MB
~534K SLoC