mapaLeafleat = {
const contenedor = DOM.element('div', { style: `width:${opcionesLeaflet.width}px;height:${opcionesLeaflet.height}px` });
const mapa = Leaflet.map(contenedor, {
center: opcionesLeaflet.center,
zoom: opcionesLeaflet.zoom
})
let osmLayer = Leaflet.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png').addTo(mapa);
L.svg({clickable: true}).addTo(mapa)
const overlay = d3.select(mapa.getPanes().overlayPane)
const miLienzo = overlay.select('svg').attr("pointer-events", "auto");
const xy = (lat, lon) => mapa.latLngToLayerPoint([lat, lon]);
const circulos = miLienzo.selectAll('circle')
.data(datosMapa)
.join('circle')
.attr('cx', d => xy(d.lat, d.lon).x)
.attr('cy', d => xy(d.lat, d.lon).y)
.attr('r', mapa.getZoom() * 0.5)
.attr('fill', "red")
.attr('stroke', 'black')
function actualizarCirculos() {
circulos
.attr('cx', d => xy(d.lat, d.lon).x)
.attr('cy', d => xy(d.lat, d.lon).y)
.attr('r', mapa.getZoom() * 0.5)
}
mapa.on("zoom", actualizarCirculos);
return contenedor
}