Published
Edited
Apr 2, 2020
1 fork
Importers
Insert cell
md`# OpenLayers map of Europe`
Insert cell
Insert cell
map= mapApi.target
Insert cell
// Modelled after https://observablehq.com/@jasperroest/openlayers-v6-1-0
mapApi = {
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()
})
],
target,
view: new ol.View({
center: ol.proj.fromLonLat([11.030, 47.739]),
zoom: 5
})
});
invalidation.then(() => map.dispose());
return { target, map};
}
Insert cell
baseStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'lightgray',
width: 2
})
});
Insert cell
styleFunction = (feature, resolution) => baseStyle
Insert cell
md`## Provinces on top of OpenStreetMap`
Insert cell
mapRegionsApi = {
const map = mapApi.map;
const regionSource = new ol.source.Vector({
format: new ol.format.TopoJSON({
dataProjection: 'EPSG:3857'
}),
url: regionTopoJsonUrl,
attributions: '© EuroGeographics for the administrative boundaries'
});
const regionLayer = new ol.layer.Vector({
source: regionSource,
style: styleFunction
});
map.addLayer(regionLayer);
regionSource.once('change', () => {
map.getView().fit(regionSource.getExtent());
});
return { target: mapApi.target, map, regionLayer};
};
Insert cell
md`## Data
© EuroGeographics for the administrative boundaries: https://ec.europa.eu/eurostat/web/gisco/geodata/reference-data/administrative-units-statistical-units/nuts#nuts16`
Insert cell
regionTopoJsonUrl = FileAttachment("NUTS_RG_60M_2016_3857.json").url()
Insert cell
nutsCodeToDisplayName = FileAttachment("nuts-display-name.json").json()
Insert cell
md`Population data extract from https://ec.europa.eu/eurostat/web/products-datasets/product?code=demo_r_pjangrp3 which has amount of usual residencies on 2018-12-31. Note that data is not available for all regions. See https://ec.europa.eu/eurostat/cache/metadata/en/demo_r_gind3_esms.htm for metadata.`
Insert cell
Insert cell
ol = {
// OpenLayers doesn’t publish a build to npm, so we can’t use unpkg. :(
const ol = await require("https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js");
if (!ol.css) ol.css = document.head.appendChild(html`<link rel=stylesheet href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css">`);
return ol;
}
Insert cell

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.
Learn more