dioxus-maplibre

A MapLibre GL JS wrapper for Dioxus 0.7+.

Installation

cargo add dioxus-maplibre

You also need to include the MapLibre GL JS library 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

use dioxus::prelude::*;
use dioxus_maplibre::{Map, Marker, Popup, LatLng};

fn App() -> Element {
    rsx! {
        Map {
            style: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
            center: LatLng::new(60.17, 24.94),
            zoom: 10.0,

            Marker {
                position: LatLng::new(60.17, 24.94),
                Popup { content: "Hello!" }
            }
        }
    }
}

Components

• Map - The main map container
• Marker - Add markers to the map
• Popup - Attach popups to markers

Types

• LatLng - Geographic coordinates (latitude/longitude)
• MapPosition - Map center + zoom level
• Bounds - Bounding box (southwest/northeast corners)
• Point - Screen pixel coordinates

Events

• MapClickEvent - Fired when the map is clicked
• MarkerClickEvent - Fired when a marker is clicked
• MarkerHoverEvent - Fired when hovering over a marker
• MapMoveEvent - Fired when the map moves

Functions

• fly_to(map_id, latlng, zoom) - Animate the map to a location
• pan_by(x, y) - Pan the map by pixel offset

Development

# Run tests
cargo test

# Run showcase app
cd examples/showcase && dx serve --port 8080

See CONTRIBUTING.md for full development setup and testing instructions.

License

Licensed under either of:

• Apache License, Version 2.0 (LICENSE-APACHE or http://www.apache.org/licenses/LICENSE-2.0)
• MIT license (LICENSE-MIT or http://opensource.org/licenses/MIT)

at your option.