react-mapfilter
Advanced tools
MapFilter is a tool for visualizing, exploring, filtering and printing geographic data and geotagged photos and video. It is used by Digital Democracy partners for community environmental monitoring: it allows users to explore the data they have collected and easily create reports of specific time periods or particular issues.
MapFilter expects GeoJSON as input, but is otherwise data agnostic. It will analyze the properties of a GeoJSON file and make a guess at field types and suggest fields to filter. It currently allows for filtering by date range on any date fields, and filtering by discrete fields that have 15 or fewer different values in the dataset.
Data can be visualized as a map, a grid of photos, or a report layout. Additional views can be added via plugins.
The goal is to be simple and easy to use. Our partners want to be able to easily access and explore the data they have collected.
Using npm:
npm install --save react-mapfilter
To use directly in the browser without a module bundler, the UMD build is also available on unpkg (add this code to the <head> of your HTML doc and you wind find the library on window.MapFilter:
<script src="https://unpkg.com/react-mapfilter/dist/react-mapfilter.js"></script>
MapFilter is a React component. If you are using a module bundler like browserify or webpack:
var MapFilter = require('react-mapfilter').default
// if you are using an ES6 transpiler, like babel
import MapFilter from 'react-mapfilter'
const features = {
features: [{
geometry: {
coordinates: [-59.9802, 2.8772],
type: 'Point'
},
properties: {
name: 'Point one'
}
}, {
geometry: {
coordinates: [-59.9524, 2.4969],
type: 'Point'
},
properties: {
name: 'Point two'
}
}]
}
class Example extends React.Component {
constructor (props) {
super(props)
this.state = {
features: features
}
}
handleChangeFeatures = (_) => {
this.setState({features: _})
}
render () {
return <MapFilter
features={this.state.features}
onChangeFeatures={this.handleChangeFeatures} />
}
}
You can see a demo of the pre-release version of MapFilter here: http://mapfilter.ddem.us
Clone this repository locally:
git clone https://github.com/digidem/react-mapfilter.git
cd react-mapfilter
Then install dependencies and start the development server:
npm install
npm start
You can then open http://localhost:9966/ in a browser.
Re-create static map assets (these are checked into git at the moment):
bin/build_style.js example/map_style
See CONTRIBUTING.md
FAQs
These components are designed for viewing data in Mapeo. They share a common interface:
The npm package react-mapfilter receives a total of 60 weekly downloads. As such, react-mapfilter popularity was classified as not popular.
We found that react-mapfilter demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.