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 1: Basic Map
In this example we see how we create a basic React app with a Map component using utopia-ui library.
For this example we use Vite to create an empty React app called "1-static-map"
npm create vite@latest 1-static-map -- --template react-ts
We open our new app in the terminal and install the utopia-ui package
cd 1-static-map
npm install utopia-ui
We open our src/App.tsx and we replace the content with
import { UtopiaMap } from "utopia-ui"
function App() {
return (
<UtopiaMap center={[50.6, 9.5]} zoom={5} height='100dvh' width="100dvw">
</UtopiaMap>
)
}
export default App
Then we start the development server to check out the result in our browser:
npm run dev
And can open our first map app in the browser 🙂
In Example 2 we gonna add some static data to our map