This example demonstrates the usage of the FeatureGrid.
import React from 'react';
import { render } from 'react-dom';
import OlMap from 'ol/map';
import OlView from 'ol/view';
import OlLayerTile from 'ol/layer/tile';
import OlSourceOsm from 'ol/source/osm';
import OlProj from 'ol/proj';
import OlFormatGeoJson from 'ol/format/geojson';
import federalStates from '../../../assets/federal-states-ger.json';
import {
FeatureGrid
} from '@terrestris/react-geo';
const map = new OlMap({
layers: [
new OlLayerTile({
name: 'OSM',
source: new OlSourceOsm()
})
],
view: new OlView({
center: OlProj.fromLonLat([37.40570, 8.81566]),
zoom: 4
})
});
const format = new OlFormatGeoJson();
const features = format.readFeatures(federalStates);
// eslint-disable-next-line require-jsdoc
const nameColumnRenderer = val => <a href={`https://en.wikipedia.org/wiki/${val}`}>{val}</a>;
render(
<div>
<div
className="example-block"
>
<FeatureGrid
features={features}
map={map}
zoomToExtent={true}
selectable={true}
attributeBlacklist={['gml_id', 'USE', 'RS', 'RS_ALT']}
columnDefs={{
'GEN': {
title: 'Name',
render: nameColumnRenderer,
sorter: (a, b) => {
const nameA = a.GEN.toUpperCase();
const nameB = b.GEN.toUpperCase();
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
return 0;
},
defaultSortOrder: 'ascend'
},
'SHAPE_LENG': {
title: 'Length',
render: val => Math.round(val)
},
'SHAPE_AREA': {
title: 'Area',
render: val => Math.round(val)
}
}}
/>
</div>
<div
id="map"
style={{
height: '400px'
}}
/>
</div>,
// Target
document.getElementById('exampleContainer'),
// Callback
() => {
map.setTarget('map');
}
);