From 3d0b7886192cb4bab02c64209195b144ac665474 Mon Sep 17 00:00:00 2001 From: antontranelis <31516529+antontranelis@users.noreply.github.com> Date: Tue, 22 Oct 2024 10:58:10 +0200 Subject: [PATCH 1/3] Update README.md added Tutorial --- README.md | 130 ++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 98 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 8b18baf6..8ebfbf65 100644 --- a/README.md +++ b/README.md @@ -23,10 +23,104 @@ Utopia Game is the first app made with Utopia UI. It is an attempt to use gamifi ## Getting Started +### 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. + +For this tutorial we use Vite to create an empty React app called "utopia-static-map" + +```shell= +npm create vite@latest utopia-static-map -- --template react +``` + +We open our new app in the terminal and install the [utopia-ui](https://github.com/utopia-os/utopia-ui) package + +```shell= +cd utopia-static-map +npm install utopia-ui +``` + +We open our `src/App.jsx` and we replace the content with + +```jsx= +import { UtopiaMap } from "utopia-ui" + +function App() { + return ( + + + ) +} + +export default App + +``` + +Then we start the development server to check out the result in our browser: + +```shell= +npm run dev +``` + +And can open our first map app in the browser 🙂 + +### Static Layers + +Now we add some static layer. + +First we put some sample data in a new file called `src/sample-data.js` + +```javascript= +export const places = [{ + "id": 51, + "name": "Stadtgemüse", + "text": "Stadtgemüse Fulda ist eine Gemüsegärtnerei in Maberzell, die es sich zur Aufgabe gemacht hat, die Stadt und seine Bewohner:innen mit regionalem, frischem und natürlich angebautem Gemüse mittels Gemüsekisten zu versorgen. Es gibt also jede Woche, von Frühjahr bis Herbst, angepasst an die Saison eine Kiste mit schmackhaftem und frischem Gemüse für euch, welche ihr direkt vor Ort abholen könnt. \r\n\r\nhttps://stadtgemuese-fulda.de", + "position": { "type": "Point", "coordinates": [9.632435, 50.560342] }, + }, + { + "id": 166, + "name": "Weidendom", + "text": "free camping", + "position": { "type": "Point", "coordinates": [9.438793, 50.560112] }, + }]; + + export const events = [ + { + "id": 423, + "name": "Hackathon", + "text": "still in progress", + "position": { "type": "Point", "coordinates": [10.5, 51.62] }, + "start": "2022-03-25T12:00:00", + "end": "2022-05-12T12:00:00", + } + ] +``` + +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` + +```jsx= +import { events, places } from "./sample-data" +``` +and than we create our two `` inside of our `` component +```jsx= + + + + + ) +} -install via npm -```bash - npm install utopia-ui ``` ## Map Component @@ -34,34 +128,6 @@ The map shows various Layers (like places, events, profiles ...) of Items at the Tags, colors and clusters help to retain the overview. -use the Map UI Component -```jsx -import { UtopiaMap, Layer} from 'utopia-ui' - - - - - -``` -You can find some Sample Data (places, events, tags) for test in the `SamleData/` folder - - ### Map Options @@ -90,4 +156,4 @@ You can find some Sample Data (places, events, tags) for test in the `SamleData/ - \ No newline at end of file + From 19ffefd9a5f830aa773a6109ecf0a68c79015b16 Mon Sep 17 00:00:00 2001 From: antontranelis <31516529+antontranelis@users.noreply.github.com> Date: Tue, 22 Oct 2024 10:59:16 +0200 Subject: [PATCH 2/3] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8ebfbf65..d0395cb3 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Utopia UIs mission is to provide open source building blocks to create beautiful The building blocks are designed to allow different networks and communities to assemble their map and app for their specific needs and purpose. -Utopia Game is the first app made with Utopia UI. It is an attempt to use gamification to get users to take action and make the map even more alive. Check it out at [utopia-game.org](https://utopia-game.org/) or see the code in the [repository](https://github.com/utopia-os/utopia-game) +Utopia Game is one of the apps made with Utopia UI. It is an attempt to use gamification to get users to take action and make the map even more alive. Check it out at [utopia-game.org](https://utopia-game.org/) or see the code in the [repository](https://github.com/utopia-os/utopia-game) ## Features From ecbb092f0048b57fb02d77860a70df1cd315e601 Mon Sep 17 00:00:00 2001 From: antontranelis <31516529+antontranelis@users.noreply.github.com> Date: Tue, 22 Oct 2024 11:01:40 +0200 Subject: [PATCH 3/3] Update README.md --- README.md | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index d0395cb3..d48c4a33 100644 --- a/README.md +++ b/README.md @@ -28,20 +28,20 @@ In this tutorial we learn how we create a basic React app with a Map component u For this tutorial we use Vite to create an empty React app called "utopia-static-map" -```shell= +```shell npm create vite@latest utopia-static-map -- --template react ``` We open our new app in the terminal and install the [utopia-ui](https://github.com/utopia-os/utopia-ui) package -```shell= +```shell cd utopia-static-map npm install utopia-ui ``` We open our `src/App.jsx` and we replace the content with -```jsx= +```jsx import { UtopiaMap } from "utopia-ui" function App() { @@ -57,7 +57,7 @@ export default App Then we start the development server to check out the result in our browser: -```shell= +```shell npm run dev ``` @@ -69,7 +69,7 @@ Now we add some static layer. First we put some sample data in a new file called `src/sample-data.js` -```javascript= +```javascript export const places = [{ "id": 51, "name": "Stadtgemüse", @@ -99,11 +99,11 @@ 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` -```jsx= +```jsx import { events, places } from "./sample-data" ``` and than we create our two `` inside of our `` component -```jsx= +```jsx ` inside of our `` component markerDefaultColor='#007' data={places} /> - ) -} ```