mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
cleanup examples
This commit is contained in:
parent
267d5b1c78
commit
c8a2204d0f
@ -1,8 +1,8 @@
|
|||||||
# Tutorial 1: Basic Map
|
# Example 1: Basic Map
|
||||||
|
|
||||||
In this tutorial we learn how we create a basic React app with a Map component using [utopia-ui](https://github.com/utopia-os/utopia-ui) library.
|
In this example we see how we create a basic React app with a Map component using [utopia-ui](https://github.com/utopia-os/utopia-ui) library.
|
||||||
|
|
||||||
For this tutorial we use Vite to create an empty React app called "utopia-static-map"
|
For this example we use Vite to create an empty React app called "utopia-static-map"
|
||||||
|
|
||||||
```shell=
|
```shell=
|
||||||
npm create vite@latest utopia-static-map -- --template react
|
npm create vite@latest utopia-static-map -- --template react
|
||||||
@ -15,7 +15,7 @@ cd utopia-static-map
|
|||||||
npm install utopia-ui
|
npm install utopia-ui
|
||||||
```
|
```
|
||||||
|
|
||||||
We open our `src/App.jsx` and we replace the content with
|
We open our `src/App.tsx` and we replace the content with
|
||||||
|
|
||||||
```jsx=
|
```jsx=
|
||||||
import { UtopiaMap } from "utopia-ui"
|
import { UtopiaMap } from "utopia-ui"
|
||||||
@ -39,4 +39,4 @@ npm run dev
|
|||||||
|
|
||||||
And can open our first map app in the browser 🙂
|
And can open our first map app in the browser 🙂
|
||||||
|
|
||||||
In [Tutorial 2](../static-layers/) we gonna add some static data to our map
|
In [Tutorial 2](../2-static-layers/) we gonna add some static data to our map
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
@ -1,8 +1,8 @@
|
|||||||
# Tutorial 2: Static Layers
|
# Example 2: Static Layers
|
||||||
|
|
||||||
In [Tutorial 1](/j2dJaA3gw) we learnd how we create a basic map app with [utopia-ui](https://github.com/utopia-os/utopia-ui). Now we add some static layer.
|
[Example 1](/1-basic-map) shows us how we create a basic map app with [utopia-ui](https://github.com/utopia-os/utopia-ui). Now we add some static layer.
|
||||||
|
|
||||||
First we put some sample data in a new file called `src/sample-data.js`
|
First we put some sample data in a new file called `src/sample-data.ts`
|
||||||
|
|
||||||
```javascript=
|
```javascript=
|
||||||
export const places = [{
|
export const places = [{
|
||||||
@ -32,7 +32,7 @@ export const places = [{
|
|||||||
|
|
||||||
We want to create two Layers. One we want to call *Places* and the other *Events*
|
We want to create two Layers. One we want to call *Places* and the other *Events*
|
||||||
|
|
||||||
we import our sample data to the `src/App.jsx`
|
we import our sample data to the `src/App.tsx`
|
||||||
|
|
||||||
```jsx=
|
```jsx=
|
||||||
import { events, places } from "./sample-data"
|
import { events, places } from "./sample-data"
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
Loading…
x
Reference in New Issue
Block a user