48 lines
1.8 KiB
JavaScript
48 lines
1.8 KiB
JavaScript
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;
|
|
}
|