turf.collect
Joins attributes FeatureCollection of polygons with a FeatureCollection of points.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/ol-popup@4.0.0/src/ol-popup.css" type="text/css">
<link rel="stylesheet" href="assets/css/styles.css" type="text/css">
<script src="//cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
<script src="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://unpkg.com/ol-popup@4.0.0"></script>
<script src="assets/js/es6-promise.min.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,fetch"></script>
<script src="assets/js/helpers.js"></script>
<title>Turf and OpenLayers 3 - Collect</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
// Declare a source for points and drawing
var vectorSourcePolygons = new ol.source.Vector();
var vectorSourcePoints = new ol.source.Vector();
var pointsStyle = [
new ol.style.Style({
image: new ol.style.Circle({
stroke: new ol.style.Stroke({
color: 'white'
}),
fill: new ol.style.Fill({
color: '#1f6b75'
}),
radius: 4
})
})
];
var vectorLayerPolygons = new ol.layer.Vector({
source: vectorSourcePolygons,
style: [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'black',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 0, 0)'
})
})
]
});
var vectorLayerPoints = new ol.layer.Vector({
source: vectorSourcePoints,
style: pointsStyle
});
// Instanciate a map and add layers
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayerPolygons,
vectorLayerPoints
],
view: new ol.View({
center: ol.proj.transform(
[2.197, 46.498],
'EPSG:4326',
'EPSG:3857'
),
zoom: 5
})
});
Promise.all([
fetch('assets/data/regions-20140528-6digits-100m.geojson').then(function(response) {
return response.json().then(function(json) {
return json;
});
}),
fetch('assets/data/france_meteo.geojson').then(function(response) {
return response.json().then(function(json) {
return json;
});
})
]).then(function(returned) {
var polys_fc = returned[0];
var points_fc = returned[1];
var collect = turf.collect(polys_fc, points_fc, 'pressure', 'values');
collect.features.forEach(function(el) {
el.properties.average = el.properties.values.reduce(function(sum, a) {
return sum + a;
}, 0) / (el.properties.values.length || 1);
delete el.properties.values;
})
console.log(collect);
vectorSourcePolygons.addFeatures(geojsonToFeatures(collect, {
featureProjection: 'EPSG:3857'
}));
vectorSourcePoints.addFeatures(geojsonToFeatures(points_fc, {
featureProjection: 'EPSG:3857'
}));
});
var popup = new ol.Overlay.Popup();
map.addOverlay(popup);
map.on('click', function(evt) {
var prettyCoord = ol.coordinate.toStringHDMS(
ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'),
2
);
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
return feature;
}, {
layerFilter: function(layer){
return layer === vectorLayerPolygons;
}
// ,hitTolerance: 1
});
var popup_content;
if (feature) {
popup_content = 'Name: ' + feature.get('nom') + '<br/>' +
'Number of municipalities : ' +
feature.get('nb_comm') + '<br/>' +
'Name of the "chef-lieu" : ' +
feature.get('nom_cl') + '<br/>' +
'Average pressure : ' + feature.get('average');
popup.show(evt.coordinate, '<div><h2>Coordinates</h2><p>' +
popup_content + '</p></div>');
} else {
popup.hide();
}
});
</script>
</body>
</html>