mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
81 lines
2.2 KiB
Markdown
81 lines
2.2 KiB
Markdown
# Example 2: Static Layers
|
|
|
|
In [Example 1](/1-basic-map), we learned how to create a basic map app using [utopia-ui](https://github.com/utopia-os/utopia-ui). Now, we'll add **static layers** to our map.
|
|
|
|
### Adding Sample Data
|
|
|
|
First, we create a new file called `src/sample-data.ts` and define some sample data:
|
|
|
|
```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"
|
|
}
|
|
];
|
|
```
|
|
|
|
### Creating Layers
|
|
|
|
We want to create **two layers**:
|
|
|
|
- A **"Places"** layer for locations
|
|
- An **"Events"** layer for scheduled activities.
|
|
|
|
First, we import our sample data into `src/App.tsx`:
|
|
|
|
```tsx
|
|
import { events, places } from "./sample-data";
|
|
```
|
|
|
|
### Adding Layers to `<UtopiaMap>`
|
|
|
|
Next, we define our `<Layer>` components inside `<UtopiaMap>`:
|
|
|
|
```tsx
|
|
<UtopiaMap center={[50.6, 15.5]} zoom={5} height="100dvh" width="100dvw">
|
|
<Layer
|
|
name="events"
|
|
markerIcon="calendar"
|
|
markerShape="square"
|
|
markerDefaultColor="#700"
|
|
data={events}
|
|
/>
|
|
<Layer
|
|
name="places"
|
|
markerIcon="point"
|
|
markerShape="circle"
|
|
markerDefaultColor="#007"
|
|
data={places}
|
|
/>
|
|
</UtopiaMap>
|
|
```
|
|
|
|
### Running the Application
|
|
|
|
Finally, we start our development server to see the **map with two layers**:
|
|
|
|
```shell
|
|
npm run dev
|
|
```
|
|
|
|
➡️ In [Example 3](../3-tags/), we'll add **tags** to our map. |