Published
Edited
May 16, 2019
geosource.features.map(d => d.properties.ADMIN)
view
viewof view = form(html`<form>
<div>
<label><input name="choice" type="radio" value='Earth' checked> <i>Earth</i></label>
<label><input name="choice" type="radio" value='France'> <i>France</i></label>
<label><input name="choice" type="radio" value='Fiji'> <i>Fiji</i></label>
<label><input name="choice" type="radio" value='United States of America'> <i>United States</i></label>
</div>
</form>`)
update = {
let data = [geosource, geostitch, toposource];
let data_choice = data[datasource.choice];
let filtered_data = filtered(data_choice);
// Read the filtered data into a new OpenLayers Feature instance.
// ol.format.GeoJSON() is what OpenLayers uses to read and write GeoJSON
let geojson_reader = new ol.format.GeoJSON();
// .readFeatures() returns an object that represents one or more OpenLayers Features
let filtered_features = geojson_reader.readFeatures(filtered_data, options)
// Reset the layer displaying only the filtered features
countryLayer.getSource().clear()
countryLayer.getSource().addFeatures( filtered_features )
// Zoom to the desired "center" and "zoom" based on the UI selection
let location = locations[ view.choice ];
map.getView().animate({
center: ol.proj.fromLonLat( location.lonlat ),
zoom: location.zoom,
duration: 2000
});
}
filtered = function(data) {
if (view.choice == 'Earth') return data;
return data.features.filter(d => d.properties.ADMIN == view.choice)[0];
}
locations = {
return {
Earth : { lonlat: [0,0], zoom: 1.5 },
France: { lonlat: [ 2, 46], zoom: 5 },
Fiji: { lonlat: [178.860, -17.786], zoom: 6 },
"United States of America": { lonlat: [-98, 39], zoom: 3 }
}
}
options = {
// 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
}
return options
}
countryLayer = {
// Read the GeoJSON into a Vector source
let vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geosource, options) // GeoJSON data source
});
// Create a Vector layer
let vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
map.addLayer(vectorLayer);
return vectorLayer;
}
targetValue = Generators.input(target)
properties = countryLayer.getSource().getFeatures()[0].getProperties()
properties.ISO_A2
topo = d3.json("https://pbogden.com/mapping/data/world/topojson/110m.json")
toposource = {
let simplify = 0;
let topo2 = topojson.presimplify(topo)
topo2 = topojson.simplify(topo2, simplify);
let geojson = topojson.feature(topo2, topo2.objects.countries);
return geojson;
}
geosource.features.map(d => d.properties.ADMIN)
geosource = d3.json("https://pbogden.com/mapping/data/world/geojson/110m.json")
styleFunction = function(feature) {
let colors = d3.schemeCategory10;
let stroke = new ol.style.Stroke({ color: 'black', width: '1px' });
let randomIndex = Math.floor( Math.random() * 9 );
// let fill = new ol.style.Fill({ color: colors[randomIndex] });
let fill = new ol.style.Fill({ color: "rgba(0,0,0,.5)" });
let style = new ol.style.Style({ stroke: stroke, fill: fill });
return style;
}
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.
