Published
Edited
Nov 2, 2021
1 fork
Importers
1 star
Also listed in…
mapping
country = {
// Get the feature when you click on the map
let feature = targetValue[0];
return feature ? feature.getProperties().NAME : 'Click on a country'
}
target = html`<div style="height:${width/2}px;">`;
targetValue = Generators.input(target)
countryLayer = {
// Specify the original and final projections
let options = {
dataProjection: 'EPSG:4326', // "EPSG:4326" = default data projection = WGS84 (Latitute & Longitude)
featureProjection: 'EPSG:3857', // Specify the map projection or it will be returned in the dataProjection
};
// Read the GeoJSON into a Vector source
let vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(world, options)
});
// Create a Vector layer
let vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
map.addLayer(vectorLayer);
return vectorLayer;
}
properties = countryLayer.getSource().getFeatures()[0].getProperties()
properties.ISO_A2
styleFunction = function(feature) {
let colors = d3.schemeCategory10;
let stroke = new ol.style.Stroke({ color: 'yellow', width: 1 });
let randomIndex = Math.floor( Math.random() * 9 );
let fill = new ol.style.Fill({ color: colors[randomIndex] });
let style = new ol.style.Style({ stroke: stroke, fill: fill });
return style;
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
md`## References
* OpenLayers examples
* [GeoJSON example](https://openlayers.org/en/latest/examples/geojson.html) shows how to load and style GeoJSON
* OpenLayers API docs
* [ol.feature.Feature](https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html)
* [ol.style.Style](https://openlayers.org/en/latest/apidoc/module-ol_style_Style.html)
* [ol.style.Fill](https://openlayers.org/en/latest/apidoc/module-ol_style_Fill-Fill.html)
* [ol.style.Stroke](https://openlayers.org/en/latest/apidoc/module-ol_style_Stroke-Stroke.html)`
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.
