mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
Ulf Gebhardt
e2beb712bf
* bind the local utopia-ui lib To ensure the examples still work with the latest utopia-ui, it is now bound to the current code and does no longer depend on publishing the library first * replaced number by uuid as item ids in examples * remove link mechanic from workflow * also build utopia-ui * fix example2 for some reason this stopped working on maaster. * export geojson point to remove this external dependency By exporting this type another package is not needed. This is especially important, since there are different Point definitions which are partially incompatible. --------- Co-authored-by: Anton Tranelis <31516529+antontranelis@users.noreply.github.com> Co-authored-by: Anton Tranelis <mail@antontranelis.de>
Example 2: Static Layers
Example 1 shows us how we create a basic map app with utopia-ui. Now we add some static layer.
First we put some sample data in a new file called src/sample-data.ts
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.tsx
import { events, places } from "./sample-data"
and than we create our two <Layer> inside of our <UtopiaMap> component
<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>
And we see our map with two layers:
npm run dev