Agregar partial de mapa

fchavat · Apr 6, 2020 · 3dbd69c · 3dbd69c
1 parent d05d1af
commit 3dbd69c
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 37 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -26,7 +26,7 @@ GEM
       ffi (>= 1.3.0)
     eventmachine (1.2.7)
     execjs (2.7.0)
-    faraday (1.0.1)
+    faraday (1.0.0)
       multipart-post (>= 1.2, < 3)
     ffi (1.12.2)
     forwardable-extended (2.6.0)

diff --git a/_includes/head.html b/_includes/head.html
@@ -35,4 +35,12 @@
 
     gtag('config', 'UA-162185365-1');
   </script>
+  <!-- Mapa de Leaflet -->
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
+  crossorigin=""></script>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+  crossorigin=""/>
+  <!-- -------------- -->
 </head>
diff --git a/_includes/map.html b/_includes/map.html
@@ -0,0 +1,26 @@
+<div id="leaflet-map"></div>
+
+<script>
+  let mapZoom = screen.width < 800 ? 6 : 7;
+  var map = L.map('leaflet-map').setView([-33.055, -55.629], mapZoom);
+  L.tileLayer('http://{s}.tiles.mapbox.com/v3/{mapId}/{z}/{x}/{y}.png', {
+    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>, Imagery &copy; <a href="http://mapbox.com">Mapbox</a>',
+    mapId: 'ebrelsford.ho06j5h0',
+    maxZoom: 18
+  }).addTo(map);
+
+  {%- for org in site.organizaciones -%}
+    {%- if org.ubicacion and org.ubicacion.latitud and org.ubicacion.longitud -%}
+      {%- capture popupContent -%}
+        {%- include org-popup-content.html content=org -%}
+      {%- endcapture -%}
+      {%- capture processedPopupContent -%}
+        {{ popupContent | strip_newlines }}
+      {%- endcapture -%}
+
+      var marker = L.marker([{{ org.ubicacion.latitud }}, {{ org.ubicacion.longitud }}])
+        .bindPopup("{{ processedPopupContent }}")
+        .addTo(map);
+    {%- endif -%}
+  {%- endfor -%}
+</script>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -17,43 +17,15 @@ <h1 class="page-heading">{{ page.title }}</h1>
   {% endif %}
 
   <div id="home-map">
-    {%- capture markers -%}
-      {%- for org in site.organizaciones -%}
-        {%- if org.ubicacion and org.ubicacion.latitud and org.ubicacion.longitud -%}
-          {%- capture popupContent -%}
-            {%- include org-popup-content.html content=org -%}
-          {%- endcapture -%}
-          {%- capture processedPopupContent -%}
-            {{ popupContent | strip_newlines }}
-          {%- endcapture -%}
-
-          {%- leaflet_marker 
-            {
-              "latitude": {{ org.ubicacion.latitud }},
-              "longitude": {{ org.ubicacion.longitud }},
-              "popupContent": "{{ processedPopupContent }}",
-            }  
-          -%}
-        {%- endif -%}
-      {%- endfor -%}
-    {%- endcapture -%}
-
-    {%- leaflet_map 
-      {
-        "center": [-33.055, -55.629],
-        "zoom" : 7 
-      } 
-    -%}
-      {{ markers }}
-    {%- endleaflet_map -%}
+    {%- include map.html orgs=site.organizaciones -%}
   </div>
 
   {%- if posts.size > 0 -%}
     <div class="home-list">
       <!-- Html Elements for Search -->
       <div class="search-container">
         <svg class="svg-icon"><use xlink:href="/assets/utils-icons.svg#search"></use></svg>
-        <input type="text" id="search-input" placeholder="buscar por nombre, ciudad, barrio o actividad...">
+        <input type="text" id="search-input" placeholder="Buscar por nombre, ciudad, barrio o actividad ...">
       </div>
       <ul id="results-container" class="post-list"></ul>
       <ul id="list" class="post-list">
@@ -65,6 +37,9 @@ <h1 class="page-heading">{{ page.title }}</h1>
             <h5>
               {{ post.title | escape }}
             </h5>
+            <span class="post-meta">
+              {{ post.actividades }}
+            </span>
             {%- if site.show_excerpts -%}
             {{ post.excerpt }}
             {%- endif -%}
@@ -115,9 +90,9 @@ <h5>
 <script>
   $(document).ready(function(){
     $("#search-input").keyup(function() {
-      $("#row").hide();
+      $("#list").hide();
       if (!$('#search-input').val()) {
-        $("#row").show();
+        $("#list").show();
       };
     });
   });

diff --git a/_sass/header.scss b/_sass/header.scss
@@ -22,6 +22,7 @@
 }
 
  .site-nav {
+  z-index: 9999;
   text-transform: uppercase;
   font-weight: bold;
 

diff --git a/_sass/home.scss b/_sass/home.scss
@@ -1,11 +1,10 @@
 #home-map {
   display: inline;
   float: left;
-  margin-top: -15px; // El leafmap agrega un margin top de 15px #facepalm#
   width: 65%;
   height: 500px;
 
-  .leaflet-map {
+  #leaflet-map {
     height: 600px;
   }
 }
@@ -86,11 +85,10 @@
   #home-map {
     display: block;
     float: left;
-    margin-top: -15px; // El leafmap agrega un margin top de 15px #facepalm#
     width: 100%;
     height: 600px;
 
-    .leaflet-map {
+    #leaflet-map {
       height: 600px;
     }
   }