utopia-ui/examples/1-basic-map

Example 1: Basic Map

In this example, we'll learn how to create a basic React app with a map component using the utopia-ui library.

Setting Up the Project

We'll use Vite to create an empty React app named "1-static-map":

npm create vite@latest 1-static-map -- --template react-ts

Next, we navigate into our project folder and install the utopia-ui package:

cd 1-static-map
npm install utopia-ui

Implementing the Map

Now, we open src/App.tsx and replace its content with the following:

import { UtopiaMap } from "utopia-ui";

function App() {
  return (
    <UtopiaMap center={[50.6, 9.5]} zoom={5} height="100dvh" width="100dvw" />
  );
}

export default App;

Running the Application

To see our first map app, we start the development server:

npm run dev

Now, we can open localhost:5173 in the browser and explore our interactive map! 😊

➡️ In Example 2, we'll add static data to our map.