L = require('leaflet@1.2.0')
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
map = {
// You'll often see Leaflet examples initializing a map like L.map('map'),
// which tells the library to look for a div with the id 'map' on the page.
// In Observable, we instead create a div from scratch in this cell, so it's
// completely self-contained.
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
// Note that I'm yielding the container pretty early here: this allows the
// div to be placed on the page. This is important, because Leaflet uses
// the div's .offsetWidth and .offsetHeight to size the map. If I were
// to only return the container at the end of this method, Leaflet might
// get the wrong idea about the map's size.
yield container;
// Now we create a map object and add a layer to it.
let map = L.map(container).setView([40.4167754, -3.7037902], 13);
// other tile provider https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg
// https://leaflet-extras.github.io/leaflet-providers/preview/
let osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', {
attribution: 'Wikimedia maps beta | © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
}
fuentes=d3.dsv(";","https://gist.githubusercontent.com/serman/37c055edbfffda1a22c725b95bba8a1f/raw/740e056a4aba5c7b71e05b6e225c7547e2b3d825/Inventario_Fuentes2019.csv")
fuentesMap = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let map = L.map(container).setView([40.4167754, -3.7037902], 13);
let osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', {
attribution: 'Wikimedia maps beta | © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
fuentes.slice(0,500).forEach(d =>{
if(isNaN(parseFloat(d.longitud)) || isNaN(parseFloat(d.latitud)) ) {
return
}
else {
//https://leafletjs.com/reference-1.5.0.html#marker
L.marker([d.latitud, d.longitud]).addTo(map);
}
})
}
heatLayer = L, require('leaflet.heat').catch(() => L.heatLayer)
fountainsHeatmap = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
// Now we create a map object and add a layer to it.
let map = L.map(container).setView([40.4167754, -3.7037902], 13);
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
let fuentesPoints = []
fuentes.forEach(d =>{
if(isNaN(parseFloat(d.longitud)) || isNaN(parseFloat(d.latitud)) ) {
return
}
else {
fuentesPoints.push([d.latitud,d.longitud,1])
}
})
let fuentesLayer = heatLayer(fuentesPoints).addTo(map);
}
d3 = require("d3@5")
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.
