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
286 downloads per month
120KB
2.5K
SLoC
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
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 intoleaflet::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="© <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