Map Mapbox: Add possibility to show marker (#27)

- show marker and "human-readable" address in popup

Co-authored-by: Philipp Froehlich <philipp.froehlich@elli.eco>

3 files changed, 64 insertions, 0 deletions

diff --git a/SETUP.md b/SETUP.md
index ba79bde..61dcf51 100644
--- a/SETUP.md
+++ b/SETUP.md
@@ -171,8 +171,12 @@ You can also use Mapbox. To do this you'll need an [API Key from Mapbox](https:/
   zoom = "13"
   api_key = "XXXXXXXX"
   style_url = "mapbox://LINK_TO_MAPBOXP_STYLE"
+  marker_title = "Popup Marker Title"
+  marker_address= "Streetname <br> Postcode Town"
 ```
 
+> If `marker_title` and `marker_address` are not set, the popup will not be rendered in the map.
+
 ### 7. Contact Form
 You can have a contact form using either a [netlify form](https://www.netlify.com/docs/form-handling/) (if you're deploying with netlify) or [formspree](https://formspree.io)
 ```
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 39bfb34..26aea0c 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -2125,3 +2125,25 @@
 			}
 
 	}
+
+.marker {
+	background-size: cover;
+	color: black;
+	cursor: pointer;
+}
+
+.marker::before {
+	font-family: "Font Awesome 5 Free";
+	font-weight: 900;
+	content: "\f51d";
+	text-align: center; ;
+	font-size: large;
+}
+.mapboxgl-popup {
+	max-width: 200px;
+}
+	
+.mapboxgl-popup-content {
+	text-align: left;
+}
+	
\ No newline at end of file
diff --git a/layouts/partials/map.html b/layouts/partials/map.html
index 1cb8a5f..c36712d 100644
--- a/layouts/partials/map.html
+++ b/layouts/partials/map.html
@@ -48,12 +48,50 @@
     <script>
       var loc = [{{- float .longitude -}}, {{- float .latitude -}}];
       mapboxgl.accessToken = "{{- .api_key -}}";
+
+      var geojson = {
+        type: 'FeatureCollection',
+        features: [{
+          type: 'Feature',
+          geometry: {
+            type: 'Point',
+            coordinates: [{{- float .longitude -}}, {{- float .latitude -}}],
+          },
+          properties: {
+            title: "{{- .marker_title -}}",
+            description: "{{- .marker_address -}}"
+          }
+        }]
+      };
+
       var map = new mapboxgl.Map({
         container: 'map', // container id
         style: "{{- safeHTML .style_url  -}}", // stylesheet location
         center: loc, // starting position [lng, lat]
         zoom: {{- int .zoom -}} // starting zoom
       });
+
+      // add markers to map
+      geojson.features.forEach(function(marker) {
+
+      // create a HTML element for each feature
+      var el = document.createElement('div');
+      el.className = 'marker';
+
+      // make a marker for each feature and add to the map
+      new mapboxgl.Marker(el)
+        .setLngLat(marker.geometry.coordinates)
+        .addTo(map);
+
+      if (marker.properties.title || marker.properties.description) {
+        new mapboxgl.Marker(el)
+          .setLngLat(marker.geometry.coordinates)
+          .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
+            .setHTML('<h4>' + marker.properties.title + '</h4><div>' + marker.properties.description + '</div>'))
+          .addTo(map);
+      }
+      });
+
       map.addControl(new mapboxgl.NavigationControl());
     </script>
   {{ end }}