Unofficial Rust binding for mapbox-gl-js

Overview

mapbox-gl-rs

Unofficial Rust binding for mapbox-gl-js

Crates.io Docs.rs GithubActions

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.1.0"

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

Examples

License

This project is licensed under the MIT license.

You might also like...
A handy calculator, based on Rust and WebAssembly.
A handy calculator, based on Rust and WebAssembly.

qubit 💥 Visit Website To Use Calculator Example 💥 Visit Website To Use Calculator 2 + 2

A simple compile-to-WebAssembly language rewritten in Rust

chasm A very simple compile-to-WebAssembly language You can play with chasm online. This is a rewrite in Rust of the compiler for the language chasm.

Stylist is a CSS-in-Rust styling solution for WebAssembly Applications.

Stylist Stylist is a CSS-in-Rust styling solution for WebAssembly Applications. This is a fork of css-in-rust. Install Add the following to your Cargo

Rust WebGL2 wrapper with a focus on making high-performance WebAssembly graphics code easier to write and maintain
Rust WebGL2 wrapper with a focus on making high-performance WebAssembly graphics code easier to write and maintain

Limelight Limelight is a WebGL2 wrapper with a focus on making high-performance WebAssembly graphics code easier to write and maintain. demo.mov live

WebAssembly serialization/deserialization in rust

parity-wasm Low-level WebAssembly format library. Documentation Rust WebAssembly format serializing/deserializing Add to Cargo.toml [dependencies] par

This is a webpack loader that loads Rust code as a WebAssembly module

rust-native-wasm-loader This is a webpack loader that loads Rust code as a WebAssembly module. It uses the native Rust support for compiling to wasm32

Jest preprocessor/transformer for Rust

rs-jest tl;dr -- see examples This is a jest transformer that loads Rust code so it can be interop with Javascript base project. Currently, the Rust c

Wasm video filter booth app written in Rust
Wasm video filter booth app written in Rust

Video effect booth written in Rust and WebAssembly Play with it here: https://mtharrison.github.io/wasmbooth/ Aim I wrote this purely to teach myself

TodoMVC in Rust from Scratch (YouTube video tutorial)

TodoMVC in Rust from Scratch (YouTube video tutorial)

Comments
  • The requested module './snippets/mapboxgl-89106e6563064742/mapbox-gl.js' does not provide an export named 'Map'

    The requested module './snippets/mapboxgl-89106e6563064742/mapbox-gl.js' does not provide an export named 'Map'

    Hi, I am trying to display a map in a perseus app. I have copied the mapbox-gl.js into my project and mapped it to ./snippets/mapboxgl-89106e6563064742/mapbox-gl.js.

    When I visit the page with the map on it I get the following error.

    Uncaught SyntaxError: The requested module './snippets/mapboxgl-89106e6563064742/mapbox-gl.js' does not provide an export named 'Map' (at bundle.js:1:10)
    

    The pages setup is as follows.

    When the page loads I run the following code (only in browser not SSR)

    let map_state = state.map_state.get().as_ref().to_owned();
    let options = MapOptions::new(
        "pk.eyJ1IjoibGlhbTczNyIsImEiOiJjbDZpdzh1cGgweDc2M2RvMndja2xlOHFzIn0.b9nPCIMzEkN6qWYsSQMoog".into(),
        "map".into(),
    ).center(LatLng {
        lat: map_state.lat,
        lng: map_state.lng,
    }).zoom(map_state.zoom);
    let mut map = MapFactory::new(options).unwrap();
    map.set_listener(MapListener);
    

    And add the following html to the page

    <div id="map" class="w-screen h-screen"></div>
    

    In the head I added the Mapbox css with the following

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

    Currently the map listener is empty, issue still occurs without a listener

    struct MapListener;
    impl MapEventListner for MapListener { }
    

    When I visit the page, the page is blank and I get this in the dev tools

    image

    And when I open bundle.js in the dev tools I see the following

    image

    I'm not sure what to do now so if someone could help me fix this it would be greatly appreciated

    opened by LiamGallagher737 2
  • Rename Listner to Listener

    Rename Listner to Listener

    Fixed a small typo and created a cargo workspace of the example repos. This should make it easier and faster to compile all of the examples at once to determine if there are any breaking changes.

    Let me know if this is an acceptable PR! I really enjoy this crate and will be making some small contributions in the future.

    opened by thebearjew 0
  • Implement LngLat and LngLatBounds

    Implement LngLat and LngLatBounds

    • Change LatLng to LngLat
    • LngLat and LngLatBoulds holds a reference to JavaScript object. It might be slower than plain Rust object. I will condier to cache value if it really matters in the future
    • Bump to v0.1.0
    opened by yukinarit 0
  • Implement PartialEq for Map or MapFactory

    Implement PartialEq for Map or MapFactory

    When using mapboxgl inside of a Yew app, it would be helpful to pass around MapFactory or Map as props to other components so they can manipulate the map in different ways. Yew requires that props implement Properties and PartialEq.

    Additionally, in order to take a map instance and pass it into a Yew context provider like use_context, the type must implement ParitalEq (docs for use_context).

    Global state management crates for Yew like bounce also require that the shared value be ParitalEq.

    This will allow the mapbox gl instance to be used outside of the context where it was initialized.

    enhancement 
    opened by thebearjew 4
Releases(v0.2.0)
  • v0.2.0(Dec 4, 2022)

    There was a silly typo in EventListener trait 😅 Thanks @thebearjew for fixing that. 👍

    What's Changed

    • Simplify "simple" example and add "on-load" by @yukinarit in https://github.com/yukinarit/mapbox-gl-rs/pull/6
    • Rename Listner to Listener by @thebearjew in https://github.com/yukinarit/mapbox-gl-rs/pull/7

    New Contributors

    • @thebearjew made their first contribution in https://github.com/yukinarit/mapbox-gl-rs/pull/7

    Full Changelog: https://github.com/yukinarit/mapbox-gl-rs/compare/v0.1.0...v0.2.0

    Source code(tar.gz)
    Source code(zip)
  • v0.1.0(Nov 21, 2022)

    What's Changed

    mapbox-gl-rs doesn't require a module bundler e.g. webpack. Please make sure to use the latest 0.1.0 and follow the usage guide. Now it should be a lot easier than before. If you are a Yew user, please take a look at examples/simple.

    • Run tests and clippy on CI by @yukinarit in https://github.com/yukinarit/mapbox-gl-rs/pull/2
    • Update README.md by @yukinarit in https://github.com/yukinarit/mapbox-gl-rs/pull/3
    • Rework by @yukinarit in https://github.com/yukinarit/mapbox-gl-rs/pull/4
    • Implement LngLat and LngLatBounds by @yukinarit in https://github.com/yukinarit/mapbox-gl-rs/pull/5

    New Contributors

    • @yukinarit made their first contribution in https://github.com/yukinarit/mapbox-gl-rs/pull/2

    Full Changelog: https://github.com/yukinarit/mapbox-gl-rs/commits/v0.1.0

    Source code(tar.gz)
    Source code(zip)
Owner
Python and Rust @mapbox
null
Sealed boxes implementation for Rust/WebAssembly.

Sealed boxes for Rust/WebAssembly This Rust crate provides libsodium sealed boxes for WebAssembly. Usage: // Recipient: create a new key pair let reci

Frank Denis 16 Aug 28, 2022
WebAssembly on Rust is a bright future in making application runs at the Edge or on the Serverless technologies.

WebAssembly Tour WebAssembly on Rust is a bright future in making application runs at the Edge or on the Serverless technologies. We spend a lot of ti

Thang Chung 129 Dec 28, 2022
Autogenerated async RPC bindings that instantly connect a JS frontend to a Rust backend service via WebSockets and WASM.

Turbocharger Autogenerated async RPC bindings that instantly connect a JS frontend to a Rust backend service via WebSockets and WASM. See https://gith

null 28 Jan 2, 2023
A console and web-based Gomoku written in Rust and WebAssembly

?? rust-gomoku A console and web-based Gomoku written in Rust and WebAssembly Getting started with cargo & npm Install required program, run # install

namkyu1999 2 Jan 4, 2022
darkforest is a console and web-based Roguelike written in Rust and WebAssembly.

darkforest darkforest is a console and web-based Roguelike written in Rust and WebAssembly. Key Features TBA Quick Start TBA How To Contribute Contrib

Chris Ohk 5 Oct 5, 2021
MORUS cipher for Rust.

MORUS for Rust This is a Rust implementation of MORUS (MORUS-1280-128), ported from the Zig implementation. MORUS is a fast authenticated cipher for p

Frank Denis 4 Oct 24, 2022
A Rust ESP stack trace decoder that can also runs in your browser thanks to WebAssembly

ESP Stack Trace Decoder A Rust ESP stack trace decoder that can also runs in your browser thanks to WebAssembly. It is composed of a ⌨️ Rust library,

Maxime BORGES 20 Oct 5, 2022
Simple file sharing with client-side encryption, powered by Rust and WebAssembly

Hako Simple file sharing with client-side encryption, powered by Rust and WebAssembly Not feature-packed, but basic functionalities are just working.

Jaehyeon Park 30 Nov 25, 2022
Wasm runtime written in Rust

Wasm runtime written in Rust

Teppei Fukuda 1 Oct 29, 2021
bn.js bindings for Rust & WebAssembly with primitive-types support

bn.rs bn.js bindings for Rust & WebAssembly with primitive-types support Write Rust code that uses BN use std::str::FromStr; use primitive_types::{H1

Alexey Shekhirin 23 Nov 22, 2022