Mapa con marcadores hardcodeados

2020-03-27 20:24:58 -03:00 · 2020-03-27 20:24:58 -03:00 · 1a528d7094
commit 1a528d7094
3 changed files with 88 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,12 @@
+# Ollas
+
+Localización de ollas populares en Montevideo durante la pandemia de SARS-Cov-2.
+
+### El mail que le iba a mandar a Félix explicando esto
+
+No me da para hacer mucho, pero me dio para hacer es un mapita que le podés agregar marcadores hardcodeados. Te puede servir si conseguís a alguien que le den las bolas de diseñar la página y agregar los marcadores que correspondan.
+
+Son solo dos archivos estáticos (index.html y scripts.js). Para agregar un marcador lo que hay que hacer es repetir el enunciado de la línea 12 de scripts.js por cada marcador, actualizando los datos.
+Usa OpenStreetMap pero consume de un servicio llamado MapBox que ni idea si es malvado o qué. La librería para hacer lo del mapa se llama Leaflet; si querés modificar algo tenés la documentación acá https://leafletjs.com/
+
+Cualquier cosa llamame.
--- a/index.html
+++ b/index.html
@ -0,0 +1,29 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>Mapa de ollas populares de Montevideo</title>
+  <meta name="description" content="Mapa de ollas populares de Montevideo">
+  <meta name="author" content="SitePoint">
+
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
+    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+    crossorigin=""
+  />
+  <style>
+    #mapid { height: 1000px; }
+  </style>
+</head>
+
+<body>
+  <div id="mapid"></div>
+
+  <!-- Make sure you put this AFTER Leaflet's CSS -->
+  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
+    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
+    crossorigin=""></script>
+  <script src="scripts.js"></script>
+</body>
+</html>
--- a/scripts.js
+++ b/scripts.js
@ -0,0 +1,47 @@
+const mymap = L.map('mapid').setView([-34.85832705399524, -56.15180969238282], 11);
+L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
+    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+    maxZoom: 18,
+    id: 'mapbox/streets-v11',
+    tileSize: 512,
+    zoomOffset: -1,
+    accessToken: 'pk.eyJ1IjoicGRhY29zdGFwb3J0byIsImEiOiJjazhhcGc2dTUwMGcxM2Z0N2l3ZXdseDFnIn0.N1PfH0sCB1Mij9a4QZkeNQ'
+}).addTo(mymap);
+
+// Copiar el siguiente enunciado por cada marcador que se quiera agregar, actualizando los parámetros.
+addMarker(
+  mymap,
+  -34.899792,
+  -56.180340,
+  'Paysandú y Gaboto (Plaza Acción Directa)',
+  'Domingo 29/3 - 16hs',
+  'Traete el plato y ganas de compartir'
+);
+
+/**
+ * Agrega un marcador a un mapa.
+ *
+ * map: El mapa al cual agregar el marcador.
+ * latitude: La latitud del punto a marcar.
+ * longitude: La longitud del punto a marcar.
+ * address: Texto indicando la dirección del evento.
+ * datetime: Texto indicando fecha y hora del evento.
+ * info: Información adicional del evento.
+ */
+function addMarker(map, latitude, longitude, address, datetime, info) {
+  L.marker([latitude, longitude], {title: address})
+    .bindPopup(popupMarkup(address, datetime, info))
+    .addTo(map);
+}
+
+/**
+ * Construye el HTML de un popup de un marcador con información sobre el evento.
+ *
+ * address: Texto indicando la dirección del evento.
+ * datetime: Texto indicando fecha y hora del evento.
+ * info: Información adicional del evento.
+ */
+function popupMarkup(address, datetime, info) {
+  const mandatory = `<h4>${address}</h4><b>Fecha:</b> ${datetime}`;
+  return info ? mandatory + `</br>${info}` : mandatory;
+}