diff --git a/examples/2-static-layers/package-lock.json b/examples/2-static-layers/package-lock.json index 4d45be8f..19098ea6 100644 --- a/examples/2-static-layers/package-lock.json +++ b/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", diff --git a/examples/2-static-layers/package.json b/examples/2-static-layers/package.json index bea0e3fd..10a22e20 100644 --- a/examples/2-static-layers/package.json +++ b/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", diff --git a/examples/2-static-layers/src/App.tsx b/examples/2-static-layers/src/App.tsx index bba8bfed..8ed144cc 100644 --- a/examples/2-static-layers/src/App.tsx +++ b/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 ( @@ -9,13 +43,23 @@ function App() { markerIcon='calendar' markerShape='square' markerDefaultColor='#700' - data={events} /> + data={events} + menuIcon="calendar" + menuColor="#700" + menuText="events" + itemType={itemTypeEvent} + /> + data={places} + menuIcon="point" + menuColor="#007" + menuText="places" + itemType={itemTypePlace} + /> ) } diff --git a/examples/2-static-layers/src/sample-data.ts b/examples/2-static-layers/src/sample-data.ts index ae57855b..8f2682d4 100644 --- a/examples/2-static-layers/src/sample-data.ts +++ b/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", }