Social development practitioner. Trying to understand our world.
Published
Edited
Dec 6, 2019
1 star
Esri 2020 Land CoverBrush SnappingMermaid.jsLearning C3.js Donut Charts in ObservableVis.jsBuilding an Interactive Timeline with Vis.jsInteractive Tree Diagram (D3v3)Learning about Dagre ChartsSankey Diagram, D3v5Data-Driven SVG Faucet with D3 v4Provinces in IndonesiaSankey DiagramD3 Real Time Chart with Multiple Data StreamsPoint-Along-Path InterpolationToggle Data Views in Google MapsLeaflet referencing GeoJSON and In-Line PolygonsDataMapsDataTablesReal-time multi-series time series chart data (D3v3)Learning JavaScript (and Observable) by Converting a Fiddle
Printable OpenLayers w/ Natural Earth Lakes and Reservoirs [GeoJSON]
Also listed in…
Learning By Doing
viewof map = {
const target = html`<div style="height:600px;">`;
yield target; // Give the container dimensions.
const map = target.value = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer
],
target,
view: new ol.View({
center: ol.proj.fromLonLat([-77.41, 37.5]),
zoom: 4
})
});
var dims = {
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
};
// export options for html-to-image.
// See: https://github.com/bubkoo/html-to-image#options
var exportOptions = {
filter: function(element) {
return element.className.indexOf('ol-control') === -1;
}
};
var exportButton = document.getElementById('export-pdf');
exportButton.addEventListener(
'click', function() {
exportButton.disabled = true;
document.body.style.cursor = 'progress';
var format = document.getElementById('format').value;
var resolution = document.getElementById('resolution').value;
console.log(format, resolution);
var dim = dims[format];
var width = Math.round(dim[0] * resolution / 25.4);
var height = Math.round(dim[1] * resolution / 25.4);
var size = map.getSize();
var viewResolution = map.getView().getResolution();
map.once('rendercomplete', function() {
exportOptions.width = width;
exportOptions.height = height;
html_to_image.toJpeg(map.getViewport(), exportOptions).then(function(dataUrl) {
var pdf = new jsPDF('landscape', undefined, format);
pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]);
pdf.save('map.pdf');
// Reset original map size
map.setSize(size);
map.getView().setResolution(viewResolution);
exportButton.disabled = false;
document.body.style.cursor = 'auto';
});
});
// Set print size
var printSize = [width, height];
map.setSize(printSize);
var scaling = Math.min(width / size[0], height / size[1]);
map.getView().setResolution(viewResolution / scaling);
}, false);
invalidation.then(() => map.dispose());
return target;
}
vectorLayer = {
let vectorSource = new ol.source.Vector({
url: "https://raw.githubusercontent.com/aaronkyle/geospatial-data/master/ne_10m_lakes.geojson",
format: new ol.format.GeoJSON()
});
const vectorLayer = new ol.layer.Vector({
source: vectorSource,
});
return vectorLayer;
}
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.
