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 37 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
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Research
A malicious npm campaign is targeting Ethereum developers by impersonating Hardhat plugins and the Nomic Foundation, stealing sensitive data like private keys.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.