mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2026-02-06 09:55:47 +00:00
f89a8aec60
Bumps [typescript-eslint](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/typescript-eslint) from 8.21.0 to 8.47.0. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/typescript-eslint/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.47.0/packages/typescript-eslint) --- updated-dependencies: - dependency-name: typescript-eslint dependency-version: 8.47.0 dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>
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.