bpressure/mapbox-gl-rs

Unofficial Rust/WASM binding for mapbox-gl-js

mapbox-gl-rs

Unofficial Rust binding for mapbox-gl-js

What's this?

mapbox-gl-js is an open source library for rendering a beautiful vector-based maps in web browser, built with Mapbox and OSS community. The goal of this project is to create a rust binding for mapbox-gl-js via WebAssembly so that Rustacean can build webapps with beautiful Mapbox maps only in Rust.

NOTE: mapbox-gl-rs is in super-duper infant stage. Most of the features are WIP. Please bear with that if you're interested! Also, any contributions e.g. bug reports, feature requests, sending a patch are appreciated.

How does it work?

wasm-bindgen provides a Rust library and tool to compile Rust code into WebAssembly, which allows Rust based application e.g. egui and RustPython to run on web browsers. Most of the people don't know that wasm-bindgen also allows to invoke JavaScript code from Rust. This project leverages this feature to provide a Rust binding for mapbox-gl-js.

Usage

Add mapboxgl to your Cargo.toml

mapboxgl = "0.4"

Add the following CSS and JavaScript snippet in html, so that mapboxgl JavaScript module is loaded.

<link href='https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css' rel='stylesheet' />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>

Build and run your app. If you are a Yew user, the following command will build and start a web server automatically

trunk serve

Supported features

• Map
  • Options
  • Interaction handlers
  • Controls
  • Map constraints
  • Point conversion
  • Working with events
  • Sources
  • Images
  • Layers
  • Style properties
  • Feature state
  • Lifecycle
  • Debug features
  • Camera
• Events
  • Interactions
  • Movement
  • Lifecycle
  • Data loading
• Markers and controls
  • Marker
  • AttributionControl
  • FullscreenControl
  • GeolocateControl
  • NavigationControl
  • Popup
  • ScaleControl
• Geography and Geometry
  • LngLat
  • LngLatBounds
  • LngLatBoundsLike
  • LngLatLike
  • MercatorCoordinate
  • Point
  • PointLike
• User interaction handlers
  • BoxZoomHandler
  • DoubleClickZoomHandler
  • DragPanHandler
  • DragRotateHandler
  • KeyboardHandler
  • ScrollZoomHandler
  • TouchPitchHandler
  • TouchZoomRotateHandler
• Sources
  • CanvasSource
  • CanvasSourceOptions
  • GeoJsonSource
  • ImageSource
  • VectorTileSource
  • VideoSource
• Events and event types
  • MapBoxZoomEvent
  • MapDataEvent
  • MapMouseEvent
  • MapTouchEvent
  • MapWheelEvent

Examples

• simple: Hello world
• on-load: Catch the event when the map is loaded
• popup: Show popup control
• geojson-source: Load GeoJSON source and show lines
• set-data: Update paths in realtime using set-data
• add-image: Display image on a map

License

This project is licensed under the MIT license.