From 98cb1e6ac30ea6b6582d510f13ce8c3a6a8f1b1d Mon Sep 17 00:00:00 2001 From: Tim-Saijun Date: Mon, 23 Sep 2024 14:08:36 +0800 Subject: [PATCH 1/2] feat: :sparkles: More markers can be added to mapbox --- assets/js/theme.js | 13 ++++++++++++- layouts/shortcodes/mapbox.html | 10 +++++++--- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/assets/js/theme.js b/assets/js/theme.js index 30dd3594..a59d4b23 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -669,7 +669,7 @@ class FixIt { this._mapboxArr = this._mapboxArr || []; } this.util.forEach(document.querySelectorAll('.mapbox:empty'), ($mapbox) => { - const { lng, lat, zoom, lightStyle, darkStyle, marked, navigation, geolocate, scale, fullscreen } = JSON.parse($mapbox.dataset.options); + const { lng, lat, zoom, lightStyle, darkStyle, marked, markers, navigation, geolocate, scale, fullscreen} = JSON.parse($mapbox.dataset.options); const mapbox = new mapboxgl.Map({ container: $mapbox, center: [lng, lat], @@ -681,6 +681,17 @@ class FixIt { if (marked) { new mapboxgl.Marker().setLngLat([lng, lat]).addTo(mapbox); } + const markerArray = typeof markers === 'string' ? JSON.parse(markers) : markers; + if (Array.isArray(markerArray) && markerArray.length > 0) { + markerArray.forEach(marker => { + const { lng: markerLng, lat: markerLat, description } = marker; + const popup = new mapboxgl.Popup({ offset: 25 }).setText(description); + new mapboxgl.Marker() + .setLngLat([markerLng, markerLat]) + .setPopup(popup) + .addTo(mapbox); + }); + } if (navigation) { mapbox.addControl(new mapboxgl.NavigationControl(), 'bottom-right'); } diff --git a/layouts/shortcodes/mapbox.html b/layouts/shortcodes/mapbox.html index 5fbf0bbf..66355633 100644 --- a/layouts/shortcodes/mapbox.html +++ b/layouts/shortcodes/mapbox.html @@ -4,6 +4,7 @@ {{- $lat := cond .IsNamedParams (.Get "lat") (.Get 1) -}} {{- $zoom := cond .IsNamedParams (.Get "zoom") (.Get 2) | default 10 -}} {{- $marked := cond .IsNamedParams (.Get "marked") (.Get 3) | ne false -}} +{{- $markers := .Get "markers" | default "[]" -}} {{- $lightStyle := $mapbox.lightStyle -}} {{- $darkStyle := $mapbox.darkStyle -}} {{- $navigation := $mapbox.navigation -}} @@ -22,12 +23,15 @@ {{- $fullscreen = .Get "fullscreen" | ne false | and $fullscreen -}} {{- $width = .Get "width" | default $width -}} {{- $height = .Get "height" | default $height -}} + {{- $markers := .Get "markers" | default "[]" -}} {{- else -}} - {{- $lightStyle = .Get 4 | default $lightStyle -}} - {{- $darkStyle = .Get 5 | default $darkStyle -}} + {{- $markers := .Get 4 | default "[]" -}} + {{- $lightStyle = .Get 5 | default $lightStyle -}} + {{- $darkStyle = .Get 6 | default $darkStyle -}} {{- end -}} + {{- $darkStyle = $darkStyle | default $lightStyle -}} -{{- $options := dict "lng" $lng "lat" $lat "zoom" $zoom "marked" $marked "lightStyle" $lightStyle "darkStyle" $darkStyle "geolocate" $geolocate "navigation" $navigation "scale" $scale "fullscreen" $fullscreen -}} +{{- $options := dict "lng" $lng "lat" $lat "zoom" $zoom "marked" $marked "markers" ($markers) "lightStyle" $lightStyle "darkStyle" $darkStyle "geolocate" $geolocate "navigation" $navigation "scale" $scale "fullscreen" $fullscreen -}} {{- $attrs := printf `style="width: %v; height: %v;"` $width $height -}}
From f01f9d8725f6745b724588ff7ea071956e8c01cb Mon Sep 17 00:00:00 2001 From: Cell <1024@lruihao.cn> Date: Mon, 23 Sep 2024 15:45:07 +0800 Subject: [PATCH 2/2] :bug: Fix: move mapbox param `markers` to **seventh** positional parameter --- assets/js/theme.js | 2 +- layouts/shortcodes/mapbox.html | 10 ++++------ 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/assets/js/theme.js b/assets/js/theme.js index a59d4b23..cb011cd1 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -669,7 +669,7 @@ class FixIt { this._mapboxArr = this._mapboxArr || []; } this.util.forEach(document.querySelectorAll('.mapbox:empty'), ($mapbox) => { - const { lng, lat, zoom, lightStyle, darkStyle, marked, markers, navigation, geolocate, scale, fullscreen} = JSON.parse($mapbox.dataset.options); + const { lng, lat, zoom, lightStyle, darkStyle, marked, markers, navigation, geolocate, scale, fullscreen } = JSON.parse($mapbox.dataset.options); const mapbox = new mapboxgl.Map({ container: $mapbox, center: [lng, lat], diff --git a/layouts/shortcodes/mapbox.html b/layouts/shortcodes/mapbox.html index 66355633..47c2dd5e 100644 --- a/layouts/shortcodes/mapbox.html +++ b/layouts/shortcodes/mapbox.html @@ -4,7 +4,7 @@ {{- $lat := cond .IsNamedParams (.Get "lat") (.Get 1) -}} {{- $zoom := cond .IsNamedParams (.Get "zoom") (.Get 2) | default 10 -}} {{- $marked := cond .IsNamedParams (.Get "marked") (.Get 3) | ne false -}} -{{- $markers := .Get "markers" | default "[]" -}} +{{- $markers := cond .IsNamedParams (.Get "markers") (.Get 6) | default "[]" -}} {{- $lightStyle := $mapbox.lightStyle -}} {{- $darkStyle := $mapbox.darkStyle -}} {{- $navigation := $mapbox.navigation -}} @@ -23,15 +23,13 @@ {{- $fullscreen = .Get "fullscreen" | ne false | and $fullscreen -}} {{- $width = .Get "width" | default $width -}} {{- $height = .Get "height" | default $height -}} - {{- $markers := .Get "markers" | default "[]" -}} {{- else -}} - {{- $markers := .Get 4 | default "[]" -}} - {{- $lightStyle = .Get 5 | default $lightStyle -}} - {{- $darkStyle = .Get 6 | default $darkStyle -}} + {{- $lightStyle = .Get 4 | default $lightStyle -}} + {{- $darkStyle = .Get 5 | default $darkStyle -}} {{- end -}} {{- $darkStyle = $darkStyle | default $lightStyle -}} -{{- $options := dict "lng" $lng "lat" $lat "zoom" $zoom "marked" $marked "markers" ($markers) "lightStyle" $lightStyle "darkStyle" $darkStyle "geolocate" $geolocate "navigation" $navigation "scale" $scale "fullscreen" $fullscreen -}} +{{- $options := dict "lng" $lng "lat" $lat "zoom" $zoom "marked" $marked "markers" $markers "lightStyle" $lightStyle "darkStyle" $darkStyle "geolocate" $geolocate "navigation" $navigation "scale" $scale "fullscreen" $fullscreen -}} {{- $attrs := printf `style="width: %v; height: %v;"` $width $height -}}