Map temp commit

package.json

@@ -9,9 +9,11 @@
     "@11ty/eleventy-plugin-syntaxhighlight": "^2.0.3",
     "@tbranyen/jsdom": "^13.0.0",
     "concurrently": "^4.1.2",
+    "copyfiles": "^2.4.1",
     "html-minifier": "^4.0.0",
     "image-size": "^0.8.3",
     "json-to-scss": "^1.5.0",
+    "leaflet": "^1.7.1",
     "sass": "^1.26.3",
     "semver": "^6.3.0",
     "slugify": "^1.4.0",
@@ -36,9 +38,12 @@
     "sass:tokens": "npx json-to-scss src/_data/tokens.json src/scss/_tokens.scss",
     "sass:lint": "npx stylelint src/scss/**/*.scss",
     "sass:process": "npm run sass:tokens && npm run sass:lint && sass src/scss/global.scss src/_includes/assets/css/global.css --style=compressed",
-    "start": "concurrently \"npm run sass:process -- --watch\" \"npm run serve\"",
+    "vendor:css": "copyfiles node_modules/leaflet/dist/leaflet.css -f dist/vendor/css",
+    "vendor:js": "copyfiles node_modules/leaflet/dist/leaflet.js -f dist/vendor/js",
+    "vendor": "npm run vendor:css && npm run vendor:js",
+    "start": "concurrently \"npm run vendor\" \"npm run sass:process -- --watch\" \"npm run serve\"",
     "serve": "cross-env ELEVENTY_ENV=development npx eleventy --serve",
-    "prod": "cross-env ELEVENTY_ENV=prod npm run sass:process && npx eleventy",
+    "prod": "cross-env ELEVENTY_ENV=prod npm run vendor && npm run sass:process && npx eleventy",
     "deploy-preprod": "npm run prod && node deploy-preprod",
     "deploy-prod": "npm run prod && node deploy-prod"
   },

src/_includes/layouts/base.njk

@@ -7,6 +7,7 @@
   <link rel="icon" href="{{ site.faviconPath }}" type="image/png" />
   {% include "partials/global/meta-info.njk" %}
   <script>document.documentElement.classList.remove('no-js');</script>
+  <link rel = "stylesheet" href="/vendor/css/leaflet.css"/>
   <style>{% include "assets/css/global.css" %}</style>
   {% block head %}
   {% endblock %}

src/_includes/layouts/team.njk

@@ -7,6 +7,7 @@
     <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 %}
@@ -17,4 +18,5 @@
     {% include "partials/components/member-list.njk" %}
     {% include "partials/components/contact-form.njk" %}
   </main>
+  
 {% endblock %}

src/_includes/partials/components/map.njk

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

src/images/marker-alt.svg

@@ -0,0 +1,3 @@
+<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="#282156"/>
+</svg>

src/images/marker.svg

@@ -0,0 +1,3 @@
+<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>