map with markers

.eleventy.js

@@ -1,6 +1,7 @@
 const rssPlugin = require('@11ty/eleventy-plugin-rss');
 const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
 const fs = require('fs');
+const util = require('util')
 
 // Import filters
 const dateFilter = require('./src/filters/date-filter.js');
@@ -19,6 +20,9 @@ module.exports = function(config) {
   config.addFilter('dateFilter', dateFilter);
   config.addFilter('markdownFilter', markdownFilter);
   config.addFilter('w3DateFilter', w3DateFilter);
+  config.addFilter('dump', obj => {
+    return util.inspect(obj)
+  });
 
   // Layout aliases
   config.addLayoutAlias('home', 'layouts/home.njk');
@@ -77,24 +81,35 @@ module.exports = function(config) {
   config.addCollection("tagsList", function(collectionApi) {
     const tagsList = new Set();
     collectionApi.getAll().map( item => {
-          if (item.data.tags) { // handle pages that don't have tags
+        if (item.data.tags) { // handle pages that don't have tags
-              item.data.tags.map( tag => tagsList.add(tag))
+            item.data.tags.map( tag => tagsList.add(tag))
-          }
+        }
-      });
+    });
-      return tagsList;
+    return tagsList;
   });
   config.addCollection("skillsList", function(collectionApi) {
     const skillsList = new Set();
     collectionApi.getFilteredByGlob("./src/members/*.md").map( item => {
-          if (item.data.tags) { // handle pages that don't have skills
+        if (item.data.tags) { // handle pages that don't have skills
-            item.data.tags.map( skill => { // exclude non related tags
+          item.data.tags.map( skill => { // exclude non related tags
-              if (['post', 'news', 'event'].indexOf(skill) == -1) {
+            if (['post', 'news', 'event'].indexOf(skill) == -1) {
-                skillsList.add(skill)
+              skillsList.add(skill)
-              }
+            }
-            })
+          })
-          }
+        }
-      });
+    });
-      return skillsList;
+    return skillsList;
+  });
+  config.addCollection("membersLocations", function(collectionApi) {
+    return collectionApi.getFilteredByGlob("./src/members/*.md")
+      .filter(item => typeof item.data.location !== 'undefined')
+      .map( member => {
+        return {
+          name: member.data.name,
+          url: member.data.url,
+          location: member.data.location,
+        };
+    });
   });
   config.addCollection('customers', collection => {
     return [...collection.getFilteredByGlob("./src/customers/*.md")]

src/_includes/layouts/team.njk

@@ -7,7 +7,6 @@
     <div class="[ wrapper ]">
       <h1 class="[ member-list__heading ]">{{ teamListHeading }}</h1>
       {{ content | safe }}
-      {% include "partials/components/map.njk" %}
       <h2 class="[ gap-top-700 ]">{{ tagSearchHeading }}</h2>
       <ul class="tag-list mt-1">
         {% for skill in collections.skillsList %}
@@ -16,6 +15,7 @@
       </ul>
     </div>
     {% include "partials/components/member-list.njk" %}
+    {% include "partials/components/map.njk" %}
     {% include "partials/components/contact-form.njk" %}
   </main>
   

src/_includes/partials/components/map.njk

@@ -1,44 +1,50 @@
-<h2>Où sommes-nous ?</h2>
+<div class="[ wrapper ]">
+  <h2 class="mt-2">Où sommes-nous ?</h2>
+</div>
 <div id = "map" style = "width: 100%; height: 500px"></div>
 <script type="text/javascript" src="/vendor/js/leaflet.js"></script>
-  <script>
+<script>
-    // Creating map options
+  // Creating map options
-    var mapOptions = {
+  var mapOptions = {
-      center: [48.10494125597395, -1.6795760019626425],
+    center: [48.10494125597395, -1.6795760019626425],
-      zoom: 15
+    zoom: 15
-    }
+  }
-    
+  
-    // Creating a map object
+  // Creating a map object
-    var map = new L.map('map', mapOptions);
+  var map = new L.map('map', mapOptions);
 
-    var iconMarker = L.icon({
+  var iconMarker = L.icon({
-      iconUrl: '/images/marker.svg',
+    iconUrl: '/images/marker-stroke.svg',
-      iconSize: [28, 40],
+    iconSize: [28, 40],
-      iconAnchor: [14, 40],
+    iconAnchor: [14, 40],
-      popupAnchor: [0, -40]
+    popupAnchor: [0, -40]
-    });
+  });
 
-    var iconMarkerAlt = L.icon({
+  var iconMarkerAlt = L.icon({
-      iconUrl: '/images/marker-alt.svg',
+    iconUrl: '/images/marker-logo-alt.svg',
-      iconSize: [28, 40],
+    iconSize: [40, 40],
-      iconAnchor: [14, 40],
+    iconAnchor: [20, 40],
-      popupAnchor: [0, -40]
+    popupAnchor: [0, -40]
-    });
+  });
 
+  var members = {{ collections.membersLocations | dump | safe }};
 
-    var markerSiege = L.marker([48.10494125597395, -1.6795760019626425], {icon: iconMarkerAlt}).bindPopup('Siège Astrolabe CAE')
+  var markerGroup = members.map( member => {
-    .openPopup();
+    return new L.marker(member.location, {icon: iconMarker}).bindPopup('<a href="'+member.url+'">'+member.name+'</a>');
+  });
 
-    var markerNaega = L.marker([43.610632310943636, 3.873482372219893], {icon: iconMarker}).bindPopup('Naega')
+  var markerSiege = L.marker([48.10494125597395, -1.6795760019626425], {icon: iconMarkerAlt}).bindPopup('Siège Astrolabe CAE')
-    .openPopup();
+  .openPopup();
 
-    var markerGroup = L.featureGroup([markerSiege, markerNaega]).addTo(map);
+  markerGroup.push(markerSiege)
 
-    map.fitBounds(markerGroup.getBounds());
+  var featureGroup = L.featureGroup(markerGroup).addTo(map);
 
-    // Creating a Layer object
+  map.fitBounds(featureGroup.getBounds());
-    var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
+
-    
+  // Creating a Layer object
-    // Adding layer to the map
+  var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
-    map.addLayer(layer);
+  
+  // Adding layer to the map
+  map.addLayer(layer);
 </script>

src/images/marker-logo-alt.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 20C0 8.96178 8.96183 0 20 0C31.0387 0 40 8.96178 40 20C40 31.0382 31.0387 40 20 40C8.96183 40 0 31.0382 0 20ZM25.3303 22.6563L28.3342 29.1806C28.5043 29.5573 28.8225 29.8524 29.2122 29.9957C29.602 30.1398 30.036 30.1215 30.4123 29.9462C30.789 29.776 31.0842 29.4584 31.2279 29.0686C31.3715 28.6788 31.3533 28.2448 31.1784 27.8681L27.7869 20.4983L25.3303 22.6563ZM23.1467 17.9132L20.105 11.3073L17.0339 17.9149L13.4188 18.25L18.0417 8.30295C19.1879 5.83678 21.0417 5.84032 22.1784 8.31076L26.7513 18.2474L23.1467 17.9132ZM14.8411 22.6328L11.7192 29.3507C11.5442 29.7274 11.2261 30.0226 10.8368 30.1615C10.447 30.3056 10.0121 30.2873 9.63585 30.112C9.25952 29.9375 8.96831 29.6198 8.82509 29.23C8.68186 28.8403 8.69963 28.4062 8.87413 28.0295L12.385 20.4748L14.8411 22.6328Z" fill="#282156"/>
+</svg>

src/images/marker-stroke.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="40" viewBox="0 0 28 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8191 38.9909C14.1645 39.9946 12.009 39.4681 11.0046 37.8158L10.5774 38.0755L11.0046 37.8158C7.48332 32.0229 4.85137 27.1687 3.10115 23.1986C1.34537 19.2159 0.5 16.1729 0.5 13.9858C0.5 6.53829 6.54368 0.5 14 0.5C21.4563 0.5 27.5 6.53829 27.5 13.9858C27.5 16.1729 26.6546 19.2159 24.8989 23.1986C23.1486 27.1687 20.5167 32.0229 16.9954 37.8158C16.7034 38.2961 16.3 38.6991 15.8191 38.9909ZM14.0149 20.501C17.6078 20.501 20.5213 17.5912 20.5213 14.0007C20.5213 10.4102 17.6078 7.5004 14.0149 7.5004C10.422 7.5004 7.50851 10.4102 7.50851 14.0007C7.50851 17.5912 10.422 20.501 14.0149 20.501Z" fill="#D6F253" stroke="#282156"/>
+</svg>

src/images/marker.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.0392 19.7082C7.09406 20.2815 5.8626 19.9809 5.28869 19.0368C1.76195 13.2353 0 9.28709 0 6.99256C0 3.13068 3.13401 0 7 0C10.866 0 14 3.13068 14 6.99256C14 9.28709 12.238 13.2353 8.71131 19.0368C8.54447 19.3112 8.31394 19.5415 8.0392 19.7082ZM7.00745 10C8.66606 10 10.0106 8.65685 10.0106 7C10.0106 5.34315 8.66606 4 7.00745 4C5.34883 4 4.00426 5.34315 4.00426 7C4.00426 8.65685 5.34883 10 7.00745 10Z" fill="#D6F253"/>
-</svg>

src/members/jean-christophe-piriou.md

@@ -6,6 +6,7 @@ date: '2020-12-01'
 profile: '/images/profiles/jcp-profile.jpg'
 socialLinkedin: 'https://www.linkedin.com/in/piriou-jean-christophe-9bb4bb3b/'
 url: '/members/jean-christophe-piriou'
+location: [43.610632310943636, 3.873482372219893]
 ---
 
 Je suis ingénieur conseil auprès des collectivités dans le domaine de l’eau et l’aménagement du territoire ainsi que Product Owner de la solution informatique NAEGA que je co-développe avec mes collègues des CAE.

src/members/yves-gatesoupe.md

@@ -12,6 +12,7 @@ tags:
  - html
  - design
  - dev
+location: [48.11190001620403, -1.6902243050121242]
 ---
 
 Je suis développeur web indépendant depuis janvier 2020. 

src/team-skills.njk

@@ -32,6 +32,7 @@ permalink: /equipe/{{ tag }}/
     <div class="wrapper box-flex justify-end">
       <a class="return-link" href="/equipe">Voir tous les membres</a>
     </div>
+    {% include "partials/components/map.njk" %}
     {% include "partials/components/contact-form.njk" %}
   </main>
 {% endblock %}