commit 1a528d709451fc3d6dfdc7c1c8ce444d671c97e2 Author: Pablo Da Costa Porto Date: Fri Mar 27 20:24:58 2020 -0300 Mapa con marcadores hardcodeados diff --git a/README.md b/README.md new file mode 100644 index 0000000..7e98e90 --- /dev/null +++ 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. diff --git a/index.html b/index.html new file mode 100644 index 0000000..d5acc53 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + + Mapa de ollas populares de Montevideo + + + + + + + + +
+ + + + + + diff --git a/scripts.js b/scripts.js new file mode 100644 index 0000000..35fd5a5 --- /dev/null +++ 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 © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', + 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 = `

${address}

Fecha: ${datetime}`; + return info ? mandatory + `
${info}` : mandatory; +}