fix example2 (#137)

for some reason this stopped working on maaster.

examples/2-static-layers/package-lock.json

@@ -13,6 +13,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.17.0",
+        "@types/geojson": "^7946.0.16",
         "@types/react": "^18.3.18",
         "@types/react-dom": "^18.3.5",
         "@vitejs/plugin-react": "^4.3.4",
@@ -1270,6 +1271,13 @@
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "dev": true
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",

examples/2-static-layers/package.json

@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
+    "@types/geojson": "^7946.0.16",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",

examples/2-static-layers/src/App.tsx

@@ -1,6 +1,40 @@
 import { UtopiaMap, Layer } from "utopia-ui"
 import { events, places } from "./sample-data"
 
+const itemTypeEvent = {
+  name: "event",
+  show_name_input: false,
+  show_profile_button: false,
+  show_start_end: false,
+  show_start_end_input: false,
+  show_text: false,
+  show_text_input: false,
+  custom_text: "",
+  profileTemplate: [],
+  offers_and_needs: false,
+  icon_as_labels: null,
+  relations: false,
+  template: "TODO",
+  questlog: false,
+}
+
+const itemTypePlace = {
+  name: "event",
+  show_name_input: false,
+  show_profile_button: false,
+  show_start_end: false,
+  show_start_end_input: false,
+  show_text: false,
+  show_text_input: false,
+  custom_text: "",
+  profileTemplate: [],
+  offers_and_needs: false,
+  icon_as_labels: null,
+  relations: false,
+  template: "TODO",
+  questlog: false,
+}
+
 function App() {
   return (
     <UtopiaMap center={[50.6, 15.5]} zoom={5} height='100dvh' width="100dvw">
@@ -9,13 +43,23 @@ function App() {
       markerIcon='calendar'
       markerShape='square'
       markerDefaultColor='#700'
-      data={events} />
+      data={events}
+      menuIcon="calendar"
+      menuColor="#700"
+      menuText="events"
+      itemType={itemTypeEvent}
+      />
     <Layer
       name='places'
       markerIcon='point'
       markerShape='circle'
       markerDefaultColor='#007'
-      data={places} />
+      data={places}
+      menuIcon="point"
+      menuColor="#007"
+      menuText="places"
+      itemType={itemTypePlace}
+      />
   </UtopiaMap>
   )
 }

examples/2-static-layers/src/sample-data.ts

@@ -1,22 +1,24 @@
+import { Point } from "geojson";
+
 export const places = [{
-    "id": 51,
+    "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] },
+    "position": { "type": "Point", "coordinates": [9.632435, 50.560342] } as Point,
   },
   {
-    "id": 166,
+    "id": "166",
     "name": "Weidendom",
     "text": "free camping",
-    "position": { "type": "Point", "coordinates": [9.438793, 50.560112] },
+    "position": { "type": "Point", "coordinates": [9.438793, 50.560112] } as Point,
   }];
   
   export const events = [
     {
-      "id": 423,
+      "id": "423",
       "name": "Hackathon",
       "text": "still in progress",
-      "position": { "type": "Point", "coordinates": [10.5, 51.62] },
+      "position":  { "type": "Point", "coordinates": [10.5, 51.62] } as Point,
       "start": "2022-03-25T12:00:00",
       "end": "2022-05-12T12:00:00",
     }