feat: ✨ More markers can be added to mapbox

hugo-fixit · Sep 23, 2024 · 98cb1e6 · 98cb1e6
1 parent 9d0518e
commit 98cb1e6
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git 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
@@ -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 -}}
 <div class="mapbox" data-options="{{ $options | jsonify }}" {{ $attrs | safeHTMLAttr }}></div>