dioxus-maplibre 0.0.7

MapLibre GL JS wrapper for Dioxus 0.7
Documentation

dioxus-maplibre

Crates.io License

A MapLibre GL JS wrapper for Dioxus 0.7+.

Installation

cargo add dioxus-maplibre

Include MapLibre assets in your HTML:

<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>

Usage

Imperative (MapHandle)

use dioxus::prelude::*;
use dioxus_maplibre::{FlyToOptions, LatLng, Map, MapHandle};

fn App() -> Element {
    let mut map = use_signal(|| None::<MapHandle>);

    rsx! {
        Map {
            style: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
            center: LatLng::new(60.17, 24.94),
            zoom: 10.0,
            on_ready: move |handle| map.set(Some(handle)),
        }
        button {
            onclick: move |_| {
                if let Some(handle) = map() {
                    handle.fly_to(FlyToOptions {
                        center: Some(LatLng::new(60.17, 24.94)),
                        zoom: Some(12.0),
                        ..Default::default()
                    });
                }
            },
            "Fly"
        }
    }
}

Declarative Components

use dioxus::prelude::*;
use dioxus_maplibre::{
    LatLng, LayerOptions, Map, MapLayer, MapMarker, MapSource, MapSourceKind,
    GeoJsonSourceOptions,
};
use serde_json::json;

fn App() -> Element {
    rsx! {
        Map {
            MapSource {
                id: "points",
                source: MapSourceKind::GeoJson(GeoJsonSourceOptions {
                    data: json!({"type": "FeatureCollection", "features": []}),
                    ..Default::default()
                }),
                MapLayer {
                    options: LayerOptions::circle("point-layer", "points")
                        .paint(json!({"circle-radius": 5, "circle-color": "#3b82f6"})),
                }
            }

            MapMarker {
                id: "helsinki",
                position: LatLng::new(60.17, 24.94),
            }
        }
    }
}

Public API

  • Map root component
  • Event callbacks including on_ready and on_error
  • MapHandle imperative API
  • use_map_handle() context hook
  • Declarative helpers: MapSource, MapLayer, MapMarker, MapPopup, MapControl
  • Options/types/events exported from crate root

Development

cargo test
cargo check

Run showcase app:

cd examples/showcase
dx serve --port 8080

See CONTRIBUTING.md for full setup and e2e workflow.

License

Licensed under either of:

at your option.