| 1 | # MapFilter
|
| 2 |
|
| 3 | 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.
|
| 4 |
|
| 5 | 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.
|
| 6 |
|
| 7 | Data can be visualized as a map, a grid of photos, or a report layout. Additional views can be added via plugins.
|
| 8 |
|
| 9 | 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.
|
| 10 |
|
| 11 | ## Installation
|
| 12 |
|
| 13 | Using [npm](https://www.npmjs.com/):
|
| 14 |
|
| 15 | ```shell
|
| 16 | npm install --save react-mapfilter
|
| 17 | ```
|
| 18 |
|
| 19 | To use directly in the browser without a module bundler, the UMD build is also available on [unpkg](https://unpkg.com) (add this code to the `<head>` of your HTML doc and you wind find the library on `window.MapFilter`:
|
| 20 |
|
| 21 | ```html
|
| 22 | <script src="https://unpkg.com/react-mapfilter/dist/react-mapfilter.js"></script>
|
| 23 | ```
|
| 24 |
|
| 25 | ## Basic Usage
|
| 26 |
|
| 27 | `MapFilter` is a [React](https://facebook.github.io/react/) component. If you are using a module bundler like [browserify](http://browserify.org/) or [webpack](https://webpack.github.io/):
|
| 28 |
|
| 29 | ```js
|
| 30 | var MapFilter = require('react-mapfilter').default
|
| 31 | ```
|
| 32 |
|
| 33 | ```js
|
| 34 | // if you are using an ES6 transpiler, like babel
|
| 35 | import MapFilter from 'react-mapfilter'
|
| 36 |
|
| 37 | const features = {
|
| 38 | features: [{
|
| 39 | geometry: {
|
| 40 | coordinates: [-59.9802, 2.8772],
|
| 41 | type: 'Point'
|
| 42 | },
|
| 43 | properties: {
|
| 44 | name: 'Point one'
|
| 45 | }
|
| 46 | }, {
|
| 47 | geometry: {
|
| 48 | coordinates: [-59.9524, 2.4969],
|
| 49 | type: 'Point'
|
| 50 | },
|
| 51 | properties: {
|
| 52 | name: 'Point two'
|
| 53 | }
|
| 54 | }]
|
| 55 | }
|
| 56 |
|
| 57 | class Example extends React.Component {
|
| 58 | constructor (props) {
|
| 59 | super(props)
|
| 60 | this.state = {
|
| 61 | features: features
|
| 62 | }
|
| 63 | }
|
| 64 |
|
| 65 | handleChangeFeatures = (_) => {
|
| 66 | this.setState({features: _})
|
| 67 | }
|
| 68 |
|
| 69 | render () {
|
| 70 | return <MapFilter
|
| 71 | features={this.state.features}
|
| 72 | onChangeFeatures={this.handleChangeFeatures} />
|
| 73 | }
|
| 74 | }
|
| 75 | ```
|
| 76 |
|
| 77 |
|
| 78 |
|
| 79 | ## Demo
|
| 80 |
|
| 81 | You can see a demo of the pre-release version of MapFilter here: http://mapfilter.ddem.us
|
| 82 |
|
| 83 | ## Installation
|
| 84 |
|
| 85 | Clone this repository locally:
|
| 86 |
|
| 87 | ```sh
|
| 88 | git clone https://github.com/digidem/react-mapfilter.git
|
| 89 | cd react-mapfilter
|
| 90 | ```
|
| 91 |
|
| 92 | Then install dependencies and start the development server:
|
| 93 |
|
| 94 | ```sh
|
| 95 | npm install
|
| 96 | npm start
|
| 97 | ```
|
| 98 |
|
| 99 | You can then open [http://localhost:9966/](http://localhost:9966/) in a browser.
|
| 100 |
|
| 101 | ## API
|
| 102 |
|
| 103 |
|
| 104 |
|
| 105 | ## Offline Preparation
|
| 106 |
|
| 107 | Re-create static map assets (these are checked into git at the moment):
|
| 108 |
|
| 109 | ```sh
|
| 110 | bin/build_style.js example/map_style
|
| 111 | ```
|
| 112 |
|
| 113 | ## Architecture and how to contribute
|
| 114 |
|
| 115 | See [`CONTRIBUTING.md`](./CONTRIBUTING.md)
|