utopia-ui/examples/2-static-layers

Example 2: Static Layers

In Example 1, we learned how to create a basic map app using utopia-ui. Now, we'll add static layers to our map.

Adding Sample Data

First, we create a new file called src/sample-data.ts and define some sample data:

export const places = [
  {
    "id": 51,
    "name": "Stadtgemüse",
    "text": "Stadtgemüse Fulda ist eine Gemüsegärtnerei in Maberzell, die es sich zur Aufgabe gemacht hat, die Stadt und seine Bewohner:innen mit regionalem, frischem und natürlich angebautem Gemüse mittels Gemüsekisten zu versorgen. Es gibt also jede Woche, von Frühjahr bis Herbst, angepasst an die Saison eine Kiste mit schmackhaftem und frischem Gemüse für euch, welche ihr direkt vor Ort abholen könnt.\r\n\r\nhttps://stadtgemuese-fulda.de",
    "position": { "type": "Point", "coordinates": [9.632435, 50.560342] }
  },
  {
    "id": 166,
    "name": "Weidendom",
    "text": "Free camping",
    "position": { "type": "Point", "coordinates": [9.438793, 50.560112] }
  }
];

export const events = [
  {
    "id": 423,
    "name": "Hackathon",
    "text": "Still in progress",
    "position": { "type": "Point", "coordinates": [10.5, 51.62] },
    "start": "2022-03-25T12:00:00",
    "end": "2022-05-12T12:00:00"
  }
];

Creating Layers

We want to create two layers:

• A "Places" layer for locations
• An "Events" layer for scheduled activities.

First, we import our sample data into src/App.tsx:

import { events, places } from "./sample-data";

Adding Layers to <UtopiaMap>

Next, we define our <Layer> components inside <UtopiaMap>:

<UtopiaMap center={[50.6, 15.5]} zoom={5} height="100dvh" width="100dvw">
  <Layer
    name="events"
    markerIcon="calendar"
    markerShape="square"
    markerDefaultColor="#700"
    data={events}
  />
  <Layer
    name="places"
    markerIcon="point"
    markerShape="circle"
    markerDefaultColor="#007"
    data={places}
  />
</UtopiaMap>

Running the Application

Finally, we start our development server to see the map with two layers:

npm run dev

➡️ In Example 3, we'll add tags to our map.