mutable x = 42
z
{
if (z == 42) return "too soon";
shapeLayer.clearLayers()
shapeLayer.addData(z)
if (typeof map.getZoom() == "undefined") map.fitBounds(bounds(z)); // Initialize map
map.flyToBounds(bounds(z));
}
map.getZoom()
map = {
let map = L.map('myMap', {zoomSnap: 0, zoomAnimation: false}) ;
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);
shapeLayer.addTo(map);
return map;
}
florence = getData()
shapeLayer = {
let shapeLayer = L.geoJson(florence, { pointToLayer: pointToLayer }) // .addTo(map);
return shapeLayer;
}
pointToLayer = function (feature, latlng) {
const geojsonMarkerOptions = {
radius: 3,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
return L.circleMarker(latlng, geojsonMarkerOptions);
}
bounds = function(features) {
const bounds = d3.geoBounds({type: 'FeatureCollection', features: features});
let sw = [bounds[0][1], bounds[0][0]]; // Leaflet likes [Longitude, Latitude]
let ne = [bounds[1][1], bounds[1][0]];
const dx = (ne[0] - sw[0]) / 10;
const dy = (ne[1] - sw[1]) / 10;
sw = [sw[0] - dx, sw[1] - dy];
ne = [ne[0] + dx, ne[1] + dy];
return [sw, ne];
}
chooseFile = {
const bgwn7 = d3.range(9, 12.5, .5).map(d => d.toFixed(1).replace('.','_'));
const chin7 = d3.range(29.5, 40, .5).map(d => d.toFixed(1).replace('.','_'));
const files = ["Florence"].concat(bgwn7).concat(chin7);
const florence = "https://pbogden.com/mapping/data/florence/AL062018_pts.shp";
const inundation_base = "https://pbogden.com/mapping/data/inundation/shapefiles/";
const bfiles = bgwn7.map((d,i) => { return inundation_base + "polygons/" + d + ".shp" });
const cfiles = chin7.map((d,i) => { return inundation_base + "shp/ahps/inundation/chin7/polygons/" + d + ".shp" });
d3.select(viewof choice).append('input')
.attr('type', 'button')
.attr('value', 'florence')
.on('click', (d, i) => {
mutable x = [d,i, florence];
mutable z = getData(florence);
})
// Add buttons to the form
d3.select(viewof choice).select("#bgwn7").selectAll("input")
.data(bgwn7)
.enter().append('input')
.attr('type', 'button')
.attr('value', d => d)
.on('click', (d, i) => {
mutable x = [d,i, bfiles[i]];
mutable z = getData(bfiles[i]);
})
// d3.select(viewof choice).select("#chin7").selectAll("#input")
// .data(chin7)
// .enter().append('input')
// .attr('type', 'button')
// .attr('value', d => d)
// .on('click', (d, i) => {
// mutable x = [d,i, cfiles[i]];
// mutable z = getData(cfiles[i]);
// })
return [florence, bfiles, cfiles]
}
getData = {
// Default shapefile
const florence = "https://pbogden.com/mapping/data/florence/AL062018_pts.shp";
async function getData(d) {
let file = d || florence;
let source = await shapefile.open(file, null);
let a = [];
while (true) {
const result = await source.read();
if (result.done) break;
a.push(result.value);
}
mutable z = a;
return a
}
return getData
}
mutable z = 42
shapefile = require("shapefile@0.6")
d3 = require("d3")
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.
