Mapa con marcadores hardcodeados
This commit is contained in:
commit
1a528d7094
|
|
@ -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.
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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 © <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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue