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

979 B Raw Blame History

Example 1: Basic Map

979 B

Raw Blame History