Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improve map (next try) #92

Merged
merged 3 commits into from
Feb 27, 2024
Merged

improve map (next try) #92

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e7518c3
improve map (next try)
koilebeit Feb 26, 2024
58dee68
Merge branch 'main' into update_map
maehr Feb 26, 2024
59adb7a
fix marker
koilebeit Feb 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
improve map (next try)
  • Loading branch information
@koilebeit
koilebeit committed Feb 26, 2024
commit e7518c3ffee4072bf2201253b4848951276f8db0
134 changes: 74 additions & 60 deletions src/lib/data/map.json
View file
Original file line number Diff line number Diff line change
@@ -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]
}
}
]
}
1 change: 1 addition & 0 deletions src/lib/images/location-dot-solid.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 changes: 61 additions & 21 deletions src/routes/partner/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -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 @@
<MapLibre
style="https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte.vt/style.json"
class="h-full w-full"
images={[{ id: 'marker', url: 'src/lib/images/pin-48.png' }]}
zoom={14}
maxZoom={20}
center={[7.59274, 47.55094]}
@@ -91,7 +98,7 @@
id="data"
{data}
cluster={{
radius: 1000,
radius: 700,
maxZoom: 15
}}
>
@@ -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
});
}}
/>
<MarkerLayer applyToClusters={false} interactive let:feature>
<div
class="rounded-full bg-[#70416c] p-3 text-sm font-bold text-[#d4d2d6] shadow-2xl focus:outline-2 focus:outline-black"
>
{feature.properties.label}
</div>
<Popup openOn="click" offset={[0, -10]}>
<h3 class="text-lg font-bold">{feature.properties.name}</h3>
<p class="text-sm">{feature.properties.address}</p>
<SymbolLayer
id="cluster_labels"
interactive={false}
applyToClusters
layout={{
'text-field': ['get', 'point_count'],
'text-font': ['Frutiger Neue Bold'],
'text-size': 20,
'text-offset': [0, 0.15],
'text-allow-overlap': true
}}
paint={{
'text-color': '#FFFFFF'
}}
/>
<SymbolLayer
id="collaborations"
interactive
applyToClusters={false}
hoverCursor="pointer"
layout={{
'icon-image': 'marker',
'icon-allow-overlap': true,
'icon-overlap': 'always',
'text-field': ['get', 'label'],
'text-font': ['Frutiger Neue Bold'],
'text-size': 19,
'text-justify': 'auto',
'text-variable-anchor': ['left', 'top', 'right', 'bottom'],
'text-radial-offset': 0.8,
'text-allow-overlap': true
}}
paint={{
'text-color': '#3A1E3E',
'text-halo-color': '#FFFFFF',
'text-halo-width': 2
}}
on:click={(e) => (selectedFeature = e.detail.features?.[0]?.properties)}
>
<Popup openOn="click" offset={[0, -10]} let:features closeOnClickInside>
{@const props = features?.[0]?.properties}
<h3 class="text-lg font-bold">{props.name}</h3>
<p class="text-sm">{props.address}</p>
<p class="text-sm">
<a href={feature.properties.website} target="_blank" rel="nofollow" class="underline"
>Zur Webseite</a
<a href={props.website} target="_blank" rel="nofollow" class="underline">Zur Webseite</a
>
</p></Popup
>
</MarkerLayer>
</p>
</Popup>
</SymbolLayer>
</GeoJSON>
</MapLibre>
</section>
Loading