final fix

src/views/Embalse.tsx

@@ -5,7 +5,7 @@ import Navbar from "../partials/Navbar";
 import Loader from "../partials/Loader";
 import Api from "../helpers/Api";
 import Card from "../partials/Card";
-import { FaSolidLocationDot, FaSolidMapLocationDot, FaSolidWater } from "solid-icons/fa";
+import { FaSolidCircleInfo, FaSolidLocationDot, FaSolidMapLocationDot, FaSolidWater } from "solid-icons/fa";
 import OpenWeather from "../helpers/OpenWeather";
 
 interface CustomParams extends Params {

src/views/Home.tsx

@@ -25,7 +25,7 @@ function Home() {
                       <span>Malackathon</span>
                     </span>
                   </p>
-                  <div class="buttons">
+                  <div class="buttons is-centered">
                     <A class="button is-primary" href="/embalses">Todos los embalses</A>
                     <A class="button is-primary" href="/embalses/nearby">Buscar</A>
                   </div>

src/views/Viewer.tsx

@@ -2,8 +2,11 @@ import { onMount } from "solid-js";
 import L from 'leaflet';
 import Embalse from "../interfaces/Embalse";
 import Api from "../helpers/Api";
+import { useNavigate } from "@solidjs/router";
+import Navbar from "../partials/Navbar";
 
 function Viewer() {
+  const navigate = useNavigate();
   let map: L.Map;
 
   let embalses: Embalse[] = [];
@@ -21,17 +24,20 @@ function Viewer() {
   const getEmbalses = async () => {
     embalses = await Api.embalses();
 
-    embalses.forEach(embalse => {
-      L.marker([parseFloat(embalse.x), parseFloat(embalse.y)]).addTo(map);
+    embalses.forEach(c => {
+      L.marker([parseFloat(c.x), parseFloat(c.y)]).on('click', () => navigate('/embalses/' + c.id)).addTo(map);
     });
   }
 
   return (
-    <div class="container">
-      <div id="map" style={{
-        height: '70vh'
-      }}></div>
-    </div>
+    <>
+      <Navbar />
+      <div class="container has-text-centered">
+        <div id="map" style={{
+          height: '70vh'
+        }}></div>
+      </div>
+    </>
   );
 }