Add simple Leptos example

yukinarit · Apr 20, 2023 · daac7ed · daac7ed
1 parent ff45825
commit daac7ed
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 0 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -38,4 +38,5 @@ members = [
   "examples/simple",
   "examples/sycamore-simple",
   "examples/add-image",
+  "examples/leptos-simple",
 ]
diff --git a/examples/Cargo.toml b/examples/Cargo.toml
@@ -7,4 +7,5 @@ members = [
   "simple",
   "sycamore-simple",
   "add-image",
+  "leptos-simple",
 ]
diff --git a/examples/leptos-simple/.gitignore b/examples/leptos-simple/.gitignore
@@ -0,0 +1,4 @@
+/target
+/dist
+/app
+/node_modules
diff --git a/examples/leptos-simple/Cargo.toml b/examples/leptos-simple/Cargo.toml
@@ -0,0 +1,8 @@
+[package]
+name = "leptos-simple"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+mapboxgl = { path = "../../" }
+leptos = { version = "0.2.5", features = ["stable"]}
diff --git a/examples/leptos-simple/README.md b/examples/leptos-simple/README.md
@@ -0,0 +1,9 @@
+## Leptos with Mapbox simple Example
+
+In order to run this example you need to specify an [Mapbox access token](https://account.mapbox.com/access-tokens)
+
+```
+MAPBOX_TOKEN={ACCESS_TOKEN} trunk serve
+```
+
+Open http://127.0.0.1:8080 in your browser
diff --git a/examples/leptos-simple/index.html b/examples/leptos-simple/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>leptos simple</title>
+    <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>
+  </head>
+  <body style="margin: 0; padding: 0"></body>
+</html>
diff --git a/examples/leptos-simple/src/main.rs b/examples/leptos-simple/src/main.rs
@@ -0,0 +1,18 @@
+use leptos::*;
+use mapboxgl::{LngLat, MapFactory, MapOptions};
+
+fn main() {
+    let token = std::env!("MAPBOX_TOKEN");
+    mount_to_body(|cx| view! { cx,  <Map/> });
+    let _map = MapFactory::new(
+        MapOptions::new(token.into(), "map".into())
+            .center(LngLat::new(139.7647863, 35.6812373))
+            .zoom(15.0),
+    )
+    .unwrap();
+}
+
+#[component]
+fn Map(cx: Scope) -> impl IntoView {
+    view! {cx, <div id="map" style="width: 100%; height: 100vh"/>}
+}