diff --git a/src/lib/Map.svelte b/src/lib/Map.svelte
index fdca98b..188eb37 100644
--- a/src/lib/Map.svelte
+++ b/src/lib/Map.svelte
@@ -8,7 +8,13 @@
type MapMouseEvent,
type MapGeoJSONFeature
} from 'maplibre-gl';
- const { Map, NavigationControl, Popup, GeolocateControl } = maplibregl;
+ const {
+ AttributionControl,
+ Map,
+ NavigationControl,
+ Popup,
+ GeolocateControl
+ } = maplibregl;
import 'maplibre-gl/dist/maplibre-gl.css';
import markerImage from '$lib/assets/marker.png';
import markerHoveredImage from '$lib/assets/marker-hovered.png';
@@ -88,8 +94,14 @@
center: [initialState.lng, initialState.lat],
zoom: initialState.zoom,
minZoom: 3,
- maxZoom: 18
+ maxZoom: 18,
+ attributionControl: false
});
+ map.addControl(
+ new AttributionControl({
+ compact: true
+ })
+ );
map.addControl(
new NavigationControl({ showCompass: false }),
'bottom-right'
@@ -102,6 +114,7 @@
}),
'bottom-right'
);
+
map.keyboard.enable();
map.on('load', async () => {
diff --git a/src/lib/data/pmtiles/style.json b/src/lib/data/pmtiles/style.json
index 409ee47..9ebeafc 100644
--- a/src/lib/data/pmtiles/style.json
+++ b/src/lib/data/pmtiles/style.json
@@ -1,11 +1,14 @@
{
"version": 8,
"name": "QTM_NewStyle",
- "metadata": { "maputnik:renderer": "mlgljs" },
+ "metadata": {
+ "maputnik:renderer": "mlgljs"
+ },
"sources": {
"qtm_pmtiles": {
"type": "vector",
- "url": "https://tiles.queeringthemap.com/basemap.json"
+ "url": "https://tiles.queeringthemap.com/basemap.json",
+ "attribution": "© OpenStreetMap"
}
},
"sprite": "https://sprites.queeringthemap.com/qtm_sprites",
@@ -14,7 +17,9 @@
{
"id": "background",
"type": "background",
- "paint": { "background-color": "#ecbfd7" }
+ "paint": {
+ "background-color": "#ecbfd7"
+ }
},
{
"id": "landcover_grassland",
@@ -22,7 +27,9 @@
"source": "qtm_pmtiles",
"source-layer": "landcover",
"filter": ["all", ["==", "pmap:kind", "grassland"]],
- "layout": { "visibility": "visible" },
+ "layout": {
+ "visibility": "visible"
+ },
"paint": {
"fill-color": [
"interpolate",
@@ -41,7 +48,9 @@
"source": "qtm_pmtiles",
"source-layer": "landcover",
"filter": ["all", ["==", "pmap:kind", "glacier"]],
- "layout": { "visibility": "visible" },
+ "layout": {
+ "visibility": "visible"
+ },
"paint": {
"fill-opacity": {
"base": 1,
@@ -78,7 +87,9 @@
"source-layer": "natural",
"minzoom": 8,
"filter": ["all", ["==", "pmap:kind", "wood"]],
- "paint": { "fill-color": "rgba(205, 203, 173, 1)" }
+ "paint": {
+ "fill-color": "rgba(205, 203, 173, 1)"
+ }
},
{
"id": "natural_bare_rock",
@@ -146,7 +157,9 @@
"source": "qtm_pmtiles",
"source-layer": "landuse",
"filter": ["all", ["==", "pmap:kind", "cemetery"]],
- "paint": { "fill-color": "rgba(205, 203, 173, 1)" }
+ "paint": {
+ "fill-color": "rgba(205, 203, 173, 1)"
+ }
},
{
"id": "landuse-residential",
@@ -154,8 +167,12 @@
"source": "qtm_pmtiles",
"source-layer": "landuse",
"filter": ["all", ["==", "pmap:kind", "residential"]],
- "layout": { "visibility": "visible" },
- "paint": { "fill-color": "#f4d2e2" }
+ "layout": {
+ "visibility": "visible"
+ },
+ "paint": {
+ "fill-color": "#f4d2e2"
+ }
},
{
"id": "landuse_fun",
@@ -163,7 +180,9 @@
"source": "qtm_pmtiles",
"source-layer": "landuse",
"filter": ["all", ["in", "pmap:kind", "beach", " dog_park"]],
- "paint": { "fill-color": "#ffdced" }
+ "paint": {
+ "fill-color": "#ffdced"
+ }
},
{
"id": "landuse_nature_reserve",
@@ -172,7 +191,9 @@
"source-layer": "landuse",
"minzoom": 4,
"filter": ["all", ["==", "pmap:kind", "nature_reserve"]],
- "paint": { "fill-color": "rgba(205, 203, 173, 1)" }
+ "paint": {
+ "fill-color": "rgba(205, 203, 173, 1)"
+ }
},
{
"id": "landuse_grass",
@@ -181,7 +202,9 @@
"source-layer": "landuse",
"minzoom": 8,
"filter": ["all", ["==", "pmap:kind", "grass"]],
- "paint": { "fill-color": "rgba(205, 203, 173, 1)" }
+ "paint": {
+ "fill-color": "rgba(205, 203, 173, 1)"
+ }
},
{
"id": "landuse_recreation_ground",
@@ -190,7 +213,9 @@
"source-layer": "landuse",
"minzoom": 8,
"filter": ["all", ["==", "pmap:kind", "recreation_ground"]],
- "paint": { "fill-color": "rgba(205, 203, 173, 1)" }
+ "paint": {
+ "fill-color": "rgba(205, 203, 173, 1)"
+ }
},
{
"id": "landuse_park",
@@ -199,7 +224,9 @@
"source-layer": "landuse",
"minzoom": 8,
"filter": ["all", ["==", "pmap:kind", "park"]],
- "paint": { "fill-color": "rgba(205, 203, 173, 1)" }
+ "paint": {
+ "fill-color": "rgba(205, 203, 173, 1)"
+ }
},
{
"id": "landuse_aerodrome",
@@ -208,7 +235,9 @@
"source-layer": "landuse",
"minzoom": 8,
"filter": ["all", ["==", "pmap:kind", "aerodrome"]],
- "paint": { "fill-color": "#e1e3e7" }
+ "paint": {
+ "fill-color": "#e1e3e7"
+ }
},
{
"id": "landuse_pitch",
@@ -238,8 +267,12 @@
"source": "qtm_pmtiles",
"source-layer": "landuse",
"filter": ["all", ["==", "pmap:kind", "commercial"]],
- "layout": { "visibility": "visible" },
- "paint": { "fill-color": "hsla(0, 60%, 87%, 0.23)" }
+ "layout": {
+ "visibility": "visible"
+ },
+ "paint": {
+ "fill-color": "hsla(0, 60%, 87%, 0.23)"
+ }
},
{
"id": "buildings",
@@ -258,7 +291,9 @@
"source": "qtm_pmtiles",
"source-layer": "water",
"filter": ["all"],
- "paint": { "fill-color": "#788BF2" }
+ "paint": {
+ "fill-color": "#788BF2"
+ }
},
{
"id": "boundaries_country",
@@ -315,7 +350,10 @@
"source": "qtm_pmtiles",
"source-layer": "boundaries",
"filter": ["all", ["==", "pmap:kind", "county"]],
- "layout": { "line-join": "round", "visibility": "visible" },
+ "layout": {
+ "line-join": "round",
+ "visibility": "visible"
+ },
"paint": {
"line-color": "#9e9cab",
"line-dasharray": [2, 2, 2, 2],
@@ -335,7 +373,10 @@
"source": "qtm_pmtiles",
"source-layer": "boundaries",
"filter": ["all", ["==", "pmap:kind", "region"]],
- "layout": { "line-join": "round", "visibility": "visible" },
+ "layout": {
+ "line-join": "round",
+ "visibility": "visible"
+ },
"paint": {
"line-color": "#9e9cab",
"line-dasharray": [2, 2, 2, 2],
@@ -385,7 +426,10 @@
"source": "qtm_pmtiles",
"source-layer": "roads",
"filter": ["all", ["==", "pmap:kind", "minor_road"]],
- "layout": { "line-cap": "round", "line-join": "round" },
+ "layout": {
+ "line-cap": "round",
+ "line-join": "round"
+ },
"paint": {
"line-color": "#e7b3d6",
"line-opacity": {
@@ -411,7 +455,10 @@
"source": "qtm_pmtiles",
"source-layer": "roads",
"filter": ["all", ["==", "pmap:kind", "minor_road"]],
- "layout": { "line-cap": "round", "line-join": "round" },
+ "layout": {
+ "line-cap": "round",
+ "line-join": "round"
+ },
"paint": {
"line-color": "#f3d9ea",
"line-opacity": 1,
@@ -553,7 +600,9 @@
"source": "qtm_pmtiles",
"source-layer": "roads",
"filter": ["all", ["==", "pmap:kind", "path"]],
- "layout": { "visibility": "visible" },
+ "layout": {
+ "visibility": "visible"
+ },
"paint": {
"line-color": "rgba(211, 166, 182, 1)",
"line-dasharray": [1],
@@ -572,7 +621,10 @@
"source": "qtm_pmtiles",
"source-layer": "transit",
"filter": ["all", ["==", "pmap:kind_detail", "taxiway"]],
- "paint": { "line-color": "white", "line-width": 2 }
+ "paint": {
+ "line-color": "white",
+ "line-width": 2
+ }
},
{
"id": "roads_medium-road-label",
diff --git a/src/lib/maplibre_style.css b/src/lib/maplibre_style.css
index e4f025f..1a9419d 100644
--- a/src/lib/maplibre_style.css
+++ b/src/lib/maplibre_style.css
@@ -25,6 +25,7 @@ body .maplibregl-ctrl-bottom-right .maplibregl-ctrl {
.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
background-image: url('data:image/svg+xml,') !important;
}
+
/* For some reason the hover over the - icon changes the background, this forces
the same background. */
div.maplibregl-ctrl-group button:hover {
@@ -32,10 +33,30 @@ div.maplibregl-ctrl-group button:hover {
}
/******************************************************************************/
-/* Remove the OpenStreetMap attribution. */
+/* Place the OpenStreetMap attribution to the left of the other bottom-right controls. */
/******************************************************************************/
+.maplibregl-ctrl-bottom-right {
+ display: grid;
+ grid-template-columns: auto auto;
+ grid-template-rows: auto auto;
+ gap: 10px;
+}
+
.maplibregl-ctrl-attrib {
- display: none;
+ grid-column: 1;
+ grid-row: 2;
+ height: fit-content;
+ align-self: flex-end;
+}
+
+.maplibregl-ctrl-group:first-of-type {
+ grid-column: 2;
+ grid-row: 1;
+}
+
+.maplibregl-ctrl-group:nth-of-type(2) {
+ grid-column: 2;
+ grid-row: 2;
}
/******************************************************************************/