Map: positions

content/_index.md

@@ -1,5 +1,7 @@
 +++
 title = "Librezo"
+[extra]
+leaflet = 1
 +++
 
 <img class="big-logo" alt="Logo Librezo" src="/img/logo-color-light.png"/>
@@ -7,7 +9,7 @@ title = "Librezo"
 <span class="slogan3">Collectif d'artisans numériques</span>
 
 <div class="cities nn">
-	<p>Aix &#8211; Bastia &#8211; Cajarc &#8211; Cambrai &#8211; Cévennes &#8211; Grasse &#8211; Le&nbsp;Havre &#8211; Marseille &#8211; Montreuil</p>
+	<p>Aix &#8211; Bastia &#8211; Cajarc &#8211; Cambrai &#8211; Grasse &#8211; Le&nbsp;Havre &#8211; Marseille &#8211; Montreuil</p>
 	<div class="madein-wrapper">
 		<img class="madein" alt="Made in Chez Vous" src="/img/madein-purple.png"/>
 	</div>
@@ -66,4 +68,22 @@ title = "Librezo"
 ) %}
 	J'ai fait appel à Librezo pour créer les sites web de Jarditerre et de Verdun Coliving. J’ai été très satisfaite de leur aide et de leur réactivité que ce soit par email ou par téléphone. Ils m’offrent aussi l’hébergement, le tout en <a href="https://monnaie-libre.fr" target="_blank">monnaie libre</a>, ce qui montre leur fort engagement pour un monde libre et meilleur, et nous permet d’en faire autant dans nos activités.
 {% end %}
+
 </div>
+
+{% map() %}
+[42.6998, 9.4518], // Bastia
+[44.4742, 1.8296], // Cajarc
+[50.1718, 3.2305], // Cambrai
+[43.6578, 6.9228], // Grasse
+[49.4927, 0.1641], // Le Havre
+[43.3099, 5.4127], // Marseille
+[43.6048, 3.8818], // Montpellier
+[48.8584, 2.4371], // Montreuil
+[47.2084, -1.6026], // Nantes
+[48.8505, 2.3380], // Paris
+[43.2926, -0.3703], // Pau
+[48.1077, -1.6795], // Rennes
+[46.0321, 4.0730], // Roanne
+[43.5931, 1.4272], // Toulouse
+{% end %}

sass/css/base.scss

@@ -156,3 +156,9 @@ h3 {
 	height: 1px;
 	background: linear-gradient(0.25turn, $blue, $violet);
 }
+
+#map {
+	width: 100%;
+	height: 600px;
+	max-height: calc(100vh - 64px);
+}

templates/base.html

@@ -5,6 +5,7 @@
 		<meta charset="utf-8"/>
 		<title>{% block title %}{% endblock title %}</title>
 		<link rel="stylesheet" href="/css/base.css"/>
+		{% if page.extra.leaflet or section.extra.leaflet %}<link rel="stylesheet" href="/vendor/leaflet/leaflet.css"/>{% endif %}
 		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
 		<meta name="viewport" content="width=device-width"/>
 		<meta name="robots" content="noindex,nofollow"/><!-- TODO remove this for production -->

templates/shortcodes/map.html

@@ -0,0 +1,15 @@
+<div id="map" class="nn"></div>
+<script type="text/javascript" src="/vendor/leaflet/leaflet.js"></script>
+<script type="text/javascript">
+	var map = L.map('map').setView([46.725, 2.834], 6);
+	L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+		maxZoom: 10,
+		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+	}).addTo(map);
+	var places = [
+		{{body|safe}}
+	];
+	for(i in places) {
+		L.marker(places[i]).addTo(map);
+	}
+</script>