Update map and other small fixes

OSMLatam · Apr 27, 2024 · 35a8e69 · 35a8e69
1 parent cb52810
commit 35a8e69
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 11 deletions.
diff --git a/_config.yml b/_config.yml
@@ -57,7 +57,8 @@ markdown: kramdown
 
 # Venue
 map_config:
-  coordinates: [-1.43792, -48.46148] # Latitude, Longitude
+  map_center: [-1.43797, -48.46028] # Latitude and Longitude
+  marker_lat_lng: [-1.43848, -48.46025]
   zoom_level: 18
 
 # Translations

diff --git a/_includes/common/footer.html b/_includes/common/footer.html
@@ -1,4 +1,4 @@
-<footer class="container">
+<footer class="footer container">
   <div class="row">
     <div class="col-md-4">
       <p class="text-muted">© 2024 OpenStreetMap Latam</p>

diff --git a/_includes/home/about.html b/_includes/home/about.html
@@ -30,17 +30,19 @@ <h2>Acerca de este evento</h2>
   {% endcase %}
 
 
-  <div id="map" data-coordinates="{{ site.map_config.coordinates | jsonify }}"
+  <div id="map" data-map_center="{{ site.map_config.map_center | jsonify }}"
     data-zoom-level="{{ site.map_config.zoom_level }}"
-    data-popup-content="{{ site.map_config.popup_content | escape }}">
+    data-marker_lat_lng="{{ site.map_config.marker_lat_lng | jsonify }}">
+
   </div>
 
 </section>
 
 <script>
   document.addEventListener("DOMContentLoaded", function () {
     var mapElement = document.getElementById('map');
-    var coordinates = JSON.parse(mapElement.getAttribute('data-coordinates'));
+    var coordinates = JSON.parse(mapElement.getAttribute('data-map_center'));
+    var markerLatLng = JSON.parse(mapElement.getAttribute('data-marker_lat_lng'));
     var zoomLevel = parseInt(mapElement.getAttribute('data-zoom-level'), 10);
 
     // Define the HTML content for the popup with better organization
@@ -50,7 +52,19 @@ <h2>Acerca de este evento</h2>
         Avenida Almirante Barroso, nº 1155, Marco<br>
         Belém, PA<br>
         Brazil<br>
-        <a href="https://www.openstreetmap.org/way/537204680" target="_blank">View on OpenStreetMap</a>
+        <br>
+        <a href="https://www.openstreetmap.org/way/537204680" target="_blank">
+          <i class="fa fa-map-marker"></i> OpenStreetMap
+        </a><br>
+        <a href="https://maps.apple.com/?q=IFPA, Avenida Almirante Barroso, 1155, Marco, Belém, PA, Brazil" target="_blank">
+          <i class="fa fa-map-marker"></i> Apple Maps
+        </a><br>
+        <a href="https://www.google.com/maps/search/?api=1&query=IFPA, Avenida Almirante Barroso, 1155, Marco, Belém, PA, Brazil" target="_blank">
+          <i class="fa fa-map-marker"></i> Google Maps
+        </a><br>
+        <a href="https://waze.com/ul?q=IFPA, Avenida Almirante Barroso, 1155, Marco, Belém, PA, Brazil" target="_blank">
+          <i class="fa fa-map-marker"></i> Waze
+        </a>
       </div>
     `;
 
@@ -60,6 +74,6 @@ <h2>Acerca de este evento</h2>
     }).addTo(map);
 
     // Create a marker and bind popup with content, and open it by default
-    var marker = L.marker(coordinates).addTo(map).bindPopup(popupContent).openPopup();
+    var marker = L.marker(markerLatLng).addTo(map).bindPopup(popupContent).openPopup();
   });
 </script>
diff --git a/_includes/home/program.html b/_includes/home/program.html
@@ -1,4 +1,4 @@
-<section id="program-info" class="container content-section text-center">
+<section id="program" class="container content-section text-center">
   <div class="container">
     {% assign t = site.t[page.lang].program_section %}
     {% assign program_stage = site.program.stage %}

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
@@ -14,6 +14,10 @@ body {
   background-color: $color-background-body;
 }
 
+.content-section {
+  padding-top: 100px;
+}
+
 .btn-default {
   color: $color-text-default;
   border-color: $color-border-default;
@@ -25,6 +29,14 @@ body {
   }
 }
 
+#map {
+  margin-top: 100px;
+}
+
+.footer {
+  padding: 150px 0;
+}
+
 .intro {
   position: relative;
   width: 100%;
@@ -96,6 +108,3 @@ body {
   text-shadow: 2px 2px 4px $color-text-shadow; // Text shadow for legibility
 }
 
-#map {
-  margin-top: 100px;
-}