From e7518c3ffee4072bf2201253b4848951276f8db0 Mon Sep 17 00:00:00 2001 From: koilebeit Date: Mon, 26 Feb 2024 15:55:57 +0100 Subject: [PATCH 1/2] improve map (next try) --- src/lib/data/map.json | 134 ++++++++++++++------------ src/lib/images/location-dot-solid.svg | 1 + src/routes/partner/+page.svelte | 82 ++++++++++++---- 3 files changed, 136 insertions(+), 81 deletions(-) create mode 100644 src/lib/images/location-dot-solid.svg diff --git a/src/lib/data/map.json b/src/lib/data/map.json index 748c9328..105964b2 100644 --- a/src/lib/data/map.json +++ b/src/lib/data/map.json @@ -57,6 +57,20 @@ "coordinates": [7.72152, 47.53393] } }, + { + "type": "Feature", + "properties": { + "name": "Verein Basler Geschichtstage", + "label": "Basler Geschichtstage", + "description": "TBD", + "address": "Rudolfstrasse 9, 4054 Basel", + "website": "https://baslergeschichtstage.ch/" + }, + "geometry": { + "type": "Point", + "coordinates": [7.57513, 47.55537] + } + }, { "type": "Feature", "properties": { @@ -71,6 +85,20 @@ "coordinates": [7.60338, 47.55472] } }, + { + "type": "Feature", + "properties": { + "name": "Basler Stadtbuch (CMS)", + "label": "Basler Stadtbuch (CMS)", + "description": "TBD", + "address": "St. Alban-Vorstadt 12, 4052 Basel", + "website": "https://www.baslerstadtbuch.ch/home.html" + }, + "geometry": { + "type": "Point", + "coordinates": [7.59563, 47.55459] + } + }, { "type": "Feature", "properties": { @@ -96,7 +124,7 @@ }, "geometry": { "type": "Point", - "coordinates": [7.584615, 47.55759] + "coordinates": [7.58458, 47.55749] } }, { @@ -152,7 +180,7 @@ }, "geometry": { "type": "Point", - "coordinates": [7.59282, 47.55062] + "coordinates": [7.59272, 47.5507] } }, { @@ -208,35 +236,7 @@ }, "geometry": { "type": "Point", - "coordinates": [7.59282, 47.55077] - } - }, - { - "type": "Feature", - "properties": { - "name": "Grabmacherjoggi", - "label": "Grabmacherjoggi", - "description": "TBD", - "address": "Birsstrasse 170, 4052 Basel", - "website": "https://grabmacherjoggi.ch/index.html" - }, - "geometry": { - "type": "Point", - "coordinates": [7.6222, 47.54906] - } - }, - { - "type": "Feature", - "properties": { - "name": "Grimm Kulturmanagement", - "label": "Grimm Kulturmanagement", - "description": "TBD", - "address": "Gerbergasse 43, 4001 Basel", - "website": "https://grimm-kulturmanagement.ch/" - }, - "geometry": { - "type": "Point", - "coordinates": [7.58872, 47.55597] + "coordinates": [7.59272, 47.5505] } }, { @@ -309,20 +309,6 @@ "coordinates": [7.56967, 47.55299] } }, - { - "type": "Feature", - "properties": { - "name": "Mira Film", - "label": "Mira Film", - "description": "TBD", - "address": "Schwarzwaldallee 200, 4058 Basel", - "website": "https://mirafilm.ch/de/" - }, - "geometry": { - "type": "Point", - "coordinates": [7.60722, 47.56715] - } - }, { "type": "Feature", "properties": { @@ -379,20 +365,6 @@ "coordinates": [7.58616, 47.55861] } }, - { - "type": "Feature", - "properties": { - "name": "Regio Basiliensis", - "label": "Regio Basiliensis", - "description": "TBD", - "address": "St. Jakob-Strasse 25, 4052 Basel", - "website": "https://www.regbas.ch/de/" - }, - "geometry": { - "type": "Point", - "coordinates": [7.59689, 47.54997] - } - }, { "type": "Feature", "properties": { @@ -421,6 +393,20 @@ "coordinates": [7.59111, 47.55375] } }, + { + "type": "Feature", + "properties": { + "name": "Staatsarchiv des Kantons Basel-Landschaft", + "label": "Staatsarchiv Basel-Landschaft", + "description": "TBD", + "address": "Wiedenhubstrasse 35, 4410 Liestal", + "website": "https://memory.bl.ch/start" + }, + "geometry": { + "type": "Point", + "coordinates": [7.72651, 47.48708] + } + }, { "type": "Feature", "properties": { @@ -446,7 +432,21 @@ }, "geometry": { "type": "Point", - "coordinates": [7.59287, 47.55093] + "coordinates": [7.59282, 47.5506] + } + }, + { + "type": "Feature", + "properties": { + "name": "Tram-Museum Basel", + "label": "Tram-Museum Basel", + "description": "TBD", + "address": "Münchensteinerstrasse 105, 4052 Basel", + "website": "https://www.trammuseum-basel.ch/" + }, + "geometry": { + "type": "Point", + "coordinates": [7.60747, 47.53831] } }, { @@ -476,6 +476,20 @@ "type": "Point", "coordinates": [7.59616, 47.56218] } + }, + { + "type": "Feature", + "properties": { + "name": "Zoologischer Garten Basel AG", + "label": "Zoo Basel", + "description": "TBD", + "address": "Binningerstrasse 40, 4054 Basel", + "website": "https://www.zoobasel.ch/de/" + }, + "geometry": { + "type": "Point", + "coordinates": [7.58255, 47.54881] + } } ] } diff --git a/src/lib/images/location-dot-solid.svg b/src/lib/images/location-dot-solid.svg new file mode 100644 index 00000000..11b04076 --- /dev/null +++ b/src/lib/images/location-dot-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/routes/partner/+page.svelte b/src/routes/partner/+page.svelte index ecc53484..f581efab 100644 --- a/src/routes/partner/+page.svelte +++ b/src/routes/partner/+page.svelte @@ -3,15 +3,16 @@ CircleLayer, GeoJSON, MapLibre, - MarkerLayer, Popup, Control, NavigationControl, - ScaleControl + ScaleControl, + SymbolLayer } from 'svelte-maplibre'; import { onMount } from 'svelte'; import * as config from '$lib/config'; import Head from '$lib/components/Head.svelte'; + import svg from '$lib/images/location-dot-solid.svg'; /** @type {import('./$types').PageData} */ export let data; @@ -23,6 +24,8 @@ label: feature.properties.label, name: feature.properties.name })); + // eslint-disable-next-line no-unused-vars + let selectedFeature = null; function flyToFeature(feature, zoomLevel = 18) { map.flyTo({ @@ -51,6 +54,9 @@ } else { maxLength = 99; } + let img = new Image(80, 30); + img.onload = () => map.addImage('marker', img); + img.src = svg; }); function truncateString(str) { @@ -68,6 +74,7 @@ @@ -100,35 +107,68 @@ id="clusters" hoverCursor="pointer" paint={{ - 'circle-color': '#a390a2', - 'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40], - 'circle-stroke-color': '#d4d2d6', + 'circle-color': '#3A1E3E', + 'circle-radius': ['step', ['get', 'point_count'], 20, 3, 30, 6, 40], + 'circle-stroke-color': '#FFFFFF', 'circle-stroke-width': 1 }} on:click={(e) => { map.flyTo({ center: e.detail.features[0].geometry.coordinates, - zoom: map.getZoom() + 2, + zoom: map.getZoom() + 3, speed: 0.5 }); }} /> - -
- {feature.properties.label} -
- -

{feature.properties.name}

-

{feature.properties.address}

+ + (selectedFeature = e.detail.features?.[0]?.properties)} + > + + {@const props = features?.[0]?.properties} +

{props.name}

+

{props.address}

- Zur WebseiteZur Webseite -

- +

+ + From 59adb7a5fcd5b70cde815e598a5f14ded5abf8ed Mon Sep 17 00:00:00 2001 From: koilebeit Date: Tue, 27 Feb 2024 09:46:03 +0100 Subject: [PATCH 2/2] fix marker --- src/routes/partner/+page.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/routes/partner/+page.svelte b/src/routes/partner/+page.svelte index f581efab..78ad957f 100644 --- a/src/routes/partner/+page.svelte +++ b/src/routes/partner/+page.svelte @@ -54,8 +54,9 @@ } else { maxLength = 99; } - let img = new Image(80, 30); + let img = new Image(33, 33); img.onload = () => map.addImage('marker', img); + img.onerror = () => console.error('Failed to load map marker image.'); img.src = svg; }); @@ -148,7 +149,7 @@ 'text-font': ['Frutiger Neue Bold'], 'text-size': 19, 'text-justify': 'auto', - 'text-variable-anchor': ['left', 'top', 'right', 'bottom'], + 'text-variable-anchor': ['left', 'right', 'bottom', 'top'], 'text-radial-offset': 0.8, 'text-allow-overlap': true }}