utopia-ui/examples/1-basic-map

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 "utopia-static-map"

npm create vite@latest utopia-static-map -- --template react

We open our new app in the terminal and install the utopia-ui package

cd utopia-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 Tutorial 2 we gonna add some static data to our map