Public
Edited
Oct 21, 2023
1 fork
data = [
{ nombre: "ML", lat: 4.602709933777083, long: -74.06480043172927 },
{ nombre: "W", lat: 4.602121697628483, long: -74.06501650095342 }
];
grandCentralMap = {
// DIV CONTENEDOR DEL MAPA
let container = DOM.element('div', { style: `width:${width}px;height:${500}px` });
yield container;
// CREACIÓN DEL MAPA CON CONFIGURACIÓN INICIAL
let map = L.map(container, {
center: [4.602891, -74.065569],
zoom: 20,
inertia: false
});
const toxy = (lat, long) => map.latLngToLayerPoint([lat,long]); // UNA FUNCIÓN DE AYUDA
// CAPA DE TILES
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png').addTo(map);
// let osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
// let osmLayer = L.tileLayer('http://a.tile.stamen.com/toner/{z}/{x}/{y}.png').addTo(map);
// CAPA DE SVG
L.svg({clickable:true}).addTo(map);
const overlay = d3.select(map.getPanes().overlayPane)
const svg = overlay.select('svg').attr("pointer-events", "auto");
// A PARTIR DE AQUÍ YA SE PUEDEN USAR LOS DATOS PARA MOSTRAR COSAS EN D3
const points = svg.selectAll('circle').attr("class", "points")
.data(data)
.join('circle')
.attr("fill", "blue")
.attr("stroke", "black")
.attr("cx", d => toxy(d.lat, d.long).x)
.attr("cy", d => toxy(d.lat, d.long).y)
.attr("r", map.getZoom() * 0.5)
.on('mouseover', function(event, d) {
d3.select(this).transition()
.duration(100)
.attr('r', 20)
.attr("fill", "white")
.style("cursor", "pointer")
const {x, y} = toxy(d.lat, d.long);
svg.append('text').text(d.nombre).attr("x", x).attr("y", y).attr("stroke", "black");
})
.on('mouseout', function() {
d3.select(this).transition()
.duration(100)
.attr("fill", "blue")
.attr('r', map.getZoom() * 0.5)
svg.selectAll('text').remove();
});
const update = () => points
.attr("cx", d => toxy(d.lat, d.long).x)
.attr("cy", d => toxy(d.lat, d.long).y)
.attr("r", map.getZoom() * 0.5)
map.on("zoomend", update)
}
L = require('leaflet@1.2.0')
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
