├── .babelrc ├── .eslintignore ├── .eslintrc ├── .flowconfig ├── .gitignore ├── .npmignore ├── .nvmrc ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── example ├── index.html ├── index.js └── webpack.config.js ├── lib └── MarkerLayer.js ├── package.json ├── screenshot.jpg └── src ├── MarkerLayer.js └── __tests__ └── MarkerLayer.test.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "babel-plugin-transform-do-expressions", 4 | "babel-plugin-transform-function-bind", 5 | "babel-plugin-transform-class-constructor-call", 6 | ["babel-plugin-transform-class-properties", { "loose": true }], 7 | "babel-plugin-transform-decorators", 8 | "babel-plugin-transform-export-extensions", 9 | "babel-plugin-syntax-trailing-function-commas", 10 | "babel-plugin-transform-object-rest-spread", 11 | "babel-plugin-transform-async-to-generator", 12 | "babel-plugin-transform-exponentiation-operator", 13 | 14 | "babel-plugin-transform-react-jsx", 15 | "babel-plugin-transform-flow-strip-types", 16 | "babel-plugin-syntax-flow", 17 | "babel-plugin-syntax-jsx", 18 | "babel-plugin-transform-react-display-name", 19 | 20 | ["babel-plugin-transform-es2015-template-literals", { "loose": true }], 21 | "babel-plugin-transform-es2015-literals", 22 | "babel-plugin-transform-es2015-function-name", 23 | "babel-plugin-transform-es2015-arrow-functions", 24 | "babel-plugin-transform-es2015-block-scoped-functions", 25 | ["babel-plugin-transform-es2015-classes", { "loose": true }], 26 | "babel-plugin-transform-es2015-object-super", 27 | "babel-plugin-transform-es2015-shorthand-properties", 28 | ["babel-plugin-transform-es2015-computed-properties", { "loose": true }], 29 | ["babel-plugin-transform-es2015-for-of", { "loose": true }], 30 | "babel-plugin-transform-es2015-sticky-regex", 31 | "babel-plugin-transform-es2015-unicode-regex", 32 | ["babel-plugin-transform-es2015-spread", { "loose": true }], 33 | "babel-plugin-transform-es2015-parameters", 34 | ["babel-plugin-transform-es2015-destructuring", { "loose": true }], 35 | "babel-plugin-transform-es2015-block-scoping", 36 | "babel-plugin-transform-es2015-typeof-symbol", 37 | ["babel-plugin-transform-es2015-modules-commonjs", { "loose": true }], 38 | "babel-plugin-transform-regenerator" 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/** 2 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-airbnb", 3 | "parser": "babel-eslint", 4 | "env": { 5 | "browser": true, 6 | "mocha": true, 7 | "node": true 8 | }, 9 | "globals": { 10 | "__data": true, 11 | "expect": true, 12 | "ga": true, 13 | "Intercom": true, 14 | "spy": true, 15 | "sinon": true, 16 | "Raven": true, 17 | "Highcharts": true 18 | }, 19 | "rules": { 20 | "comma-dangle": 0, 21 | "no-wrap-func": 0, 22 | "spaced-comment": 0, 23 | "eqeqeq": [2, "smart"], 24 | 25 | // Portal uses some camelcase 26 | "camelcase": 1, 27 | 28 | // used for creating new Immutable Lists and Maps 29 | "new-cap": [1, {"capIsNewExceptions": ["Immutable"]}], 30 | 31 | // Sometimes short variable names are okay 32 | "id-length": 0, 33 | 34 | // Doesn't play nice with chai's assertions 35 | "no-unused-expressions": 0, 36 | 37 | "react/jsx-uses-react": 2, 38 | "react/jsx-uses-vars": 2, 39 | "react/react-in-jsx-scope": 2, 40 | "react/jsx-no-duplicate-props": 2, 41 | 42 | 43 | // Discourages microcomponentization 44 | "react/no-multi-comp": 0, 45 | 46 | //Temporarirly disabled due to a possible bug in babel-eslint (todomvc example) 47 | "block-scoped-var": 0, 48 | // Temporarily disabled for test/* until babel/babel-eslint#33 is resolved 49 | "padded-blocks": 0, 50 | 51 | }, 52 | "plugins": [ 53 | "react", 54 | "lean-imports" 55 | ] 56 | } 57 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/babel-cli/.* 3 | .*/node_modules/babel-generator/.* 4 | .*/node_modules/babel-helper-builder-binary-assignment-operator-visitor/.* 5 | .*/node_modules/babel-helper-explode-assignable-expression/.* 6 | .*/node_modules/babel-helper-remap-async-to-generator/.* 7 | .*/node_modules/babel-helper-regex/.* 8 | .*/node_modules/babel-plugin-transform-regenerator/.* 9 | .*/node_modules/babel-template/.* 10 | .*/node_modules/babel-types/.* 11 | .*/node_modules/jsxhint/.* 12 | .*/node_modules/fbjs/.* 13 | .*/node_modules/flow-bin/.* 14 | .*/node_modules/flux/.* 15 | .*/node_modules/node-sass/.* 16 | .*/node_modules/phantomjs/.* 17 | .*/node_modules/react-styleguidist/.* 18 | .*/node_modules/config-chain/.* 19 | .*/node_modules/findup/.* 20 | 21 | 22 | [include] 23 | 24 | [libs] 25 | 26 | [options] 27 | esproposal.class_instance_fields=enable 28 | suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe 29 | esproposal.class_static_fields=enable 30 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Compiled binary addons (http://nodejs.org/api/addons.html) 17 | build/Release 18 | build 19 | 20 | # Dependency directory 21 | # Commenting this out is preferred by some people, see 22 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 23 | node_modules 24 | bower_components 25 | 26 | # Users Environment Variables 27 | .lock-wscript 28 | .sass-cache 29 | 30 | .idea/ 31 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .babelrc 2 | .gitignore 3 | .npmignore 4 | .nvmrc 5 | screenshot.jpg 6 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 4.3.0 2 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 0.1.3 Release 2 | 3 | - Only fit bounds on update when data or position extractors change 4 | 5 | # 0.1.2 Release 6 | 7 | - Improve performance by implementing `shouldComponentUpdate` with `react-pure-render/function` 8 | 9 | # 0.1.1 Release 10 | 11 | - fix casing issue with `isNumber` import 12 | 13 | # 0.1.0 Release 14 | 15 | - Handle fitBounds better when bad data is present 16 | - added `fitBoundsOnUpdate` parameter to fit the markers on the map when they change 17 | 18 | # 0.0.6 Release 19 | 20 | - Actually build the 0.0.5 changes 21 | 22 | # 0.0.5 Release 23 | 24 | - Marker objects that return bad data for location are no longer rendered and are ignored when repositioning 25 | 26 | # 0.0.2 Release 27 | 28 | - Fix an issue with unmounting layer 29 | 30 | # 0.0.1 Release 31 | 32 | - Initial implementation of package 33 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Things you can do to contribute include: 4 | 5 | 1. Report a bug by [opening an issue](https://github.com/OpenGov/react-leaflet-marker-layer/issues/new) 6 | 2. Suggest a change by [opening an issue](https://www.github.com/OpenGov/react-leaflet-marker-layer/issues/new) 7 | 3. Fork the repository and fix [an open issue](https://github.com/OpenGov/react-leaflet-marker-layer/issues) 8 | 9 | ### Technology 10 | 11 | `react-leaflet-marker-layer` is a custom layer for the `react-leaflet` package. This package is a convenient wrapper around Leaflet, a mapping library, for React. The source code is written with ES6/ES2015 syntax as well as [FlowType](http://flowtype.org) type annotations. 12 | 13 | ### Install dependencies 14 | 15 | 1. Install Node via [nodejs.org](http://nodejs.org) 16 | 2. After cloning the repository, run `npm install` in the root of the project 17 | 18 | This project is developed with Node version 4.3.0 and NPM 3.3.10. 19 | 20 | ### Contributing via Github 21 | 22 | The entire project can be found [on Github](https://github.com/OpenGov/react-leaflet-marker-layer). We use the [fork and pull model](https://help.github.com/articles/using-pull-requests/) to process contributions. 23 | 24 | #### Fork the Repository 25 | 26 | Before contributing, you'll need to fork the repository: 27 | 28 | 1. Fork the repository so you have your own copy (`your-username/react-leaflet-marker-layer`) 29 | 2. Clone the repo locally with `git clone https://github.com/your-username/react-leaflet-marker-layer` 30 | 3. Move into the cloned repo: `cd react-leaflet-marker-layer` 31 | 4. Install the project's dependencies: `npm install` 32 | 33 | You should also add `OpenGov/react-leaflet-marker-layer` as a remote at this point. We generally call this remote branch 'upstream': 34 | 35 | ``` 36 | git remote add upstream https://github.com/OpenGov/react-leaflet-marker-layer 37 | ``` 38 | 39 | #### Development 40 | 41 | You can work with a live, hot-reloading example of the component by running: 42 | 43 | ```bash 44 | npm run example 45 | ``` 46 | 47 | And then visiting [localhost:8000](http://localhost:8000). 48 | 49 | As you make changes, please describe them in `CHANGELOG.md`. 50 | 51 | #### Submitting a Pull Request 52 | 53 | Before submitting a Pull Request please ensure you have completed the following tasks: 54 | 55 | 1. Describe your changes in `CHANGELOG.md` 56 | 2. Make sure your copy is up to date: `git pull upstream master` 57 | 3. Ensure that all tests pass, tests for the component can be found in `lib/__tests__/MarkerLayer.test.js`, you can run these tests with `npm test` 58 | 3. Run `npm run compile`, to compile your changes to the exported `/lib` code. 59 | 4. Bump the version in `package.json` as appropriate, see `Versioning` in the section below. 60 | 4. Commit your changes 61 | 5. Push your changes to your fork: `your-username/react-leaflet-marker-layer` 62 | 6. Open a pull request from your fork to the `upstream` fork (`OpenGov/react-leaflet-marker-layer`) 63 | 64 | ## Versioning 65 | 66 | This project follows Semantic Versioning.This means that version numbers are basically formatted like `MAJOR.MINOR.PATCH`. 67 | 68 | #### Major 69 | 70 | Breaking changes are signified with a new **first** number. For example, moving from 1.0.0 to 2.0.0 implies breaking changes. 71 | 72 | #### Minor 73 | 74 | New components, new helper classes, or substantial visual changes to existing components and patterns are *minor releases*. These are signified by the second number changing. So from 1.1.2 to 1.2.0 there are minor changes. 75 | 76 | #### Patches 77 | 78 | The final number signifies patches such as fixing a pattern or component in a certain browser, or fixing an existing bug. Small changes to the documentation site and the tooling around the Calcite-Web library are also considered patches. 79 | 80 | ## Developer's Certificate of Origin 1.1 81 | 82 | By making a contribution to this project, I certify that: 83 | 84 | * (a) The contribution was created in whole or in part by me and I 85 | have the right to submit it under the open source license 86 | indicated in the file; or 87 | 88 | * (b) The contribution is based upon previous work that, to the best 89 | of my knowledge, is covered under an appropriate open source 90 | license and I have the right under that license to submit that 91 | work with modifications, whether created in whole or in part 92 | by me, under the same open source license (unless I am 93 | permitted to submit under a different license), as indicated 94 | in the file; or 95 | 96 | * (c) The contribution was provided directly to me by some other 97 | person who certified (a), (b) or (c) and I have not modified 98 | it. 99 | 100 | * (d) I understand and agree that this project and the contribution 101 | are public and that a record of the contribution (including all 102 | personal information I submit with it, including my sign-off) is 103 | maintained indefinitely and may be redistributed consistent with 104 | this project or the open source license(s) involved. 105 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2016 OpenGov, Inc. 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-leaflet-marker-layer 2 | 3 | `react-leaflet-marker-layer` provides a simple `` component for plotting React components as markers in a `react-leaflet` map. 4 | 5 | ![A screenshot of markers on a leaflet map](../master/screenshot.jpg?raw=true) 6 | 7 | ## Usage 8 | 9 | ```js 10 | import React from 'react'; 11 | import { render } from 'react-dom'; 12 | import { Map, Marker, Popup, TileLayer } from 'react-leaflet'; 13 | import MarkerLayer from '../src/MarkerLayer'; 14 | 15 | const position = { lng: -122.673447, lat: 45.522558 }; 16 | const markers = [ 17 | { 18 | position: { lng: -122.67344700000, lat: 45.522558100000 }, 19 | text: 'Voodoo Doughnut', 20 | }, 21 | { 22 | position: { lng: -122.67814460000, lat: 45.5225512000000 }, 23 | text: 'Bailey\'s Taproom', 24 | }, 25 | { 26 | position: { lng: -122.67535700000002, lat: 45.5192743000000 }, 27 | text: 'Barista' 28 | }, 29 | { 30 | position: { lng: -122.65596570000001, lat: 45.5199148000001 }, 31 | text: 'Base Camp Brewing' 32 | } 33 | ]; 34 | 35 | class ExampleMarkerComponent extends React.Component { 36 | 37 | render() { 38 | const style = { 39 | border: 'solid 1px lightblue', 40 | backgroundColor: '#333333', 41 | borderRadius: '50%', 42 | marginTop: '-12px', 43 | marginLeft: '-12px', 44 | width: '24px', 45 | height: '24px' 46 | }; 47 | 48 | return ( 49 |
50 | ); 51 | } 52 | 53 | } 54 | 55 | class MapExample extends React.Component { 56 | 57 | state = { 58 | mapHidden: false 59 | }; 60 | 61 | render() { 62 | if (this.state.mapHidden) { 63 | return ( 64 |
65 | this.setState({ mapHidden: !this.state.mapHidden })} /> 66 |
67 | ); 68 | } 69 | 70 | return ( 71 |
72 | 73 | m.position.lng} 76 | latitudeExtractor={m => m.position.lat} 77 | markerComponent={ExampleMarkerComponent} /> 78 | 82 | 83 | this.setState({ mapHidden: !this.state.mapHidden })} /> 84 |
85 | ); 86 | } 87 | 88 | } 89 | 90 | render(, document.getElementById('app')); 91 | ``` 92 | 93 | ## API 94 | 95 | The `MarkerLayer` component takes the following props: 96 | 97 | - `markers`: an array of objects to be plotted 98 | - `longitudeExtractor`: a function that returns the marker object's longitude e.g. `marker => marker.lng` 99 | - `latitudeExtractor`: a function that returns the marker object's latitude e.g. `marker => marker.lat` 100 | - `markerComponent`: (required) the React component to be rendered for each marker, this component will receive the following props 101 | - `marker`: the object from the `markers` array 102 | - `style`: a style object for positioning, you should include these styles on your component 103 | - `map`: the Leaflet map object from the `react-leaflet` `MapLayer` 104 | - `...propsForMarkers`: the component will also receive the properties of `propsForMarkers` as props 105 | - `propsForMarkers`: props to pass on to marker components 106 | 107 | ## Example 108 | 109 | To try the example: 110 | 111 | 1. Clone this repository 112 | 2. run `npm install` in the root of your cloned repository 113 | 3. run `npm run example` 114 | 4. Visit [localhost:8000](http://localhost:8000) 115 | 116 | ## Contributing 117 | 118 | See [CONTRIBUTING.md](https://www.github.com/OpenGov/react-leaflet-marker-layer/blob/master/CONTRIBUTING.md) 119 | 120 | ## License 121 | 122 | `react-leaflet-marker-layer` is MIT licensed. 123 | 124 | See [LICENSE.md](https://www.github.com/OpenGov/react-leaflet-marker-layer/blob/master/LICENSE.md) for details. 125 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | react-leaflet-marker-layer example 6 | 7 | 8 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | import { Map, Marker, Popup, TileLayer } from 'react-leaflet'; 4 | import MarkerLayer from '../src/MarkerLayer'; 5 | 6 | const position = { lng: -122.673447, lat: 45.522558 }; 7 | const markers = [ 8 | { 9 | position: { lng: -122.67344700000, lat: 45.522558100000 }, 10 | text: 'Voodoo Doughnut', 11 | }, 12 | { 13 | position: { lng: -122.67814460000, lat: 45.5225512000000 }, 14 | text: 'Bailey\'s Taproom', 15 | }, 16 | { 17 | position: { lng: -122.67535700000002, lat: 45.5192743000000 }, 18 | text: 'Barista' 19 | }, 20 | { 21 | position: { lng: -122.65596570000001, lat: 45.5199148000001 }, 22 | text: 'Base Camp Brewing' 23 | }, 24 | { 25 | position: { lng: null, lat: 45.522558100000 }, 26 | text: 'A Malformed Location', 27 | }, 28 | ]; 29 | 30 | const markerToBeAdded = { 31 | position: { lng: -119.0638890000001, lat: 40.883056000001 }, 32 | text: 'Black Rock City' 33 | }; 34 | 35 | class ExampleMarkerComponent extends React.Component { 36 | 37 | render() { 38 | const style = { 39 | border: 'solid 1px lightblue', 40 | backgroundColor: '#333333', 41 | borderRadius: '50%', 42 | marginTop: '-12px', 43 | marginLeft: '-12px', 44 | width: '24px', 45 | height: '24px' 46 | }; 47 | 48 | return ( 49 |
50 | ); 51 | } 52 | 53 | } 54 | 55 | const longitudeExtractor = m => m.position.lng; 56 | const latitudeExtractor = m => m.position.lat; 57 | 58 | class MapExample extends React.Component { 59 | 60 | state = { 61 | mapHidden: false, 62 | layerHidden: false, 63 | markers: markers, 64 | msg: null 65 | }; 66 | 67 | _moveMarker() { 68 | setTimeout(() => { 69 | markers[0].position.lng = markers[0].position.lng + 2; 70 | this.setState({ markers: Array.from(markers) }); 71 | }, 1000 * 1); 72 | } 73 | 74 | componentDidMount() { 75 | this._moveMarker(); 76 | setTimeout(() => { 77 | this.setState({ msg: 'LOL' }); 78 | }, 1000 * 5); 79 | } 80 | 81 | render() { 82 | if (this.state.mapHidden) { 83 | return ( 84 |
85 | this.setState({ mapHidden: !this.state.mapHidden })} /> 86 |
87 | ); 88 | } 89 | 90 | return ( 91 |
92 | 93 | {!this.state.layerHidden && } 99 | 103 | 104 | this.setState({ mapHidden: !this.state.mapHidden })} /> 105 | this.setState({ layerHidden: !this.state.layerHidden })} /> 106 | {!!this.state.msg && this.state.msg} 107 |
108 | ); 109 | } 110 | 111 | } 112 | 113 | render(, document.getElementById('app')); 114 | -------------------------------------------------------------------------------- /example/webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | var webpack = require('webpack'); 3 | 4 | module.exports = { 5 | debug: true, 6 | devtool: 'source-map', 7 | entry: { 8 | app: __dirname + '/index.js' 9 | }, 10 | module: { 11 | loaders: [ 12 | { 13 | test: /\.js$/, 14 | exclude: /node_modules/, 15 | loader: 'babel', 16 | query: { 17 | plugins: [ 18 | ['react-transform', { 19 | transforms: [{ 20 | transform: 'react-transform-hmr', 21 | imports: ['react'], 22 | locals: ['module'] 23 | }] 24 | }] 25 | ] 26 | } 27 | }, 28 | ] 29 | }, 30 | output: { 31 | path: __dirname + '/build/', 32 | filename: '[name].js', 33 | publicPath: 'http://localhost:8000/build' 34 | }, 35 | plugins: [ 36 | new webpack.DefinePlugin({ 37 | 'process.env': { 38 | 'NODE_ENV': '"development"' 39 | } 40 | }), 41 | new webpack.NoErrorsPlugin(), 42 | new webpack.HotModuleReplacementPlugin() 43 | ], 44 | devServer: { 45 | colors: true, 46 | contentBase: __dirname, 47 | historyApiFallback: true, 48 | hot: true, 49 | inline: true, 50 | port: 8000, 51 | progress: true, 52 | stats: { 53 | cached: false 54 | } 55 | } 56 | }; 57 | -------------------------------------------------------------------------------- /lib/MarkerLayer.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | exports.__esModule = true; 4 | 5 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 6 | 7 | var _react = require('react'); 8 | 9 | var _react2 = _interopRequireDefault(_react); 10 | 11 | var _reactDom = require('react-dom'); 12 | 13 | var _reactDom2 = _interopRequireDefault(_reactDom); 14 | 15 | var _lodash = require('lodash.map'); 16 | 17 | var _lodash2 = _interopRequireDefault(_lodash); 18 | 19 | var _lodash3 = require('lodash.foreach'); 20 | 21 | var _lodash4 = _interopRequireDefault(_lodash3); 22 | 23 | var _lodash5 = require('lodash.pluck'); 24 | 25 | var _lodash6 = _interopRequireDefault(_lodash5); 26 | 27 | var _lodash7 = require('lodash.min'); 28 | 29 | var _lodash8 = _interopRequireDefault(_lodash7); 30 | 31 | var _lodash9 = require('lodash.max'); 32 | 33 | var _lodash10 = _interopRequireDefault(_lodash9); 34 | 35 | var _lodash11 = require('lodash.isnumber'); 36 | 37 | var _lodash12 = _interopRequireDefault(_lodash11); 38 | 39 | var _lodash13 = require('lodash.filter'); 40 | 41 | var _lodash14 = _interopRequireDefault(_lodash13); 42 | 43 | var _leaflet = require('leaflet'); 44 | 45 | var _leaflet2 = _interopRequireDefault(_leaflet); 46 | 47 | var _reactLeaflet = require('react-leaflet'); 48 | 49 | var _function = require('react-pure-render/function'); 50 | 51 | var _function2 = _interopRequireDefault(_function); 52 | 53 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 54 | 55 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 56 | 57 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 58 | 59 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 60 | 61 | function isInvalid(num) { 62 | return !(0, _lodash12.default)(num) && !num; 63 | } 64 | 65 | function isValid(num) { 66 | return !isInvalid(num); 67 | } 68 | 69 | function shouldIgnoreLocation(loc) { 70 | return isInvalid(loc.lng) || isInvalid(loc.lat); 71 | } 72 | 73 | var MarkerLayer = function (_MapLayer) { 74 | _inherits(MarkerLayer, _MapLayer); 75 | 76 | function MarkerLayer() { 77 | var _temp, _this, _ret; 78 | 79 | _classCallCheck(this, MarkerLayer); 80 | 81 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { 82 | args[_key] = arguments[_key]; 83 | } 84 | 85 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, _MapLayer.call.apply(_MapLayer, [this].concat(args))), _this), _this.shouldComponentUpdate = _function2.default, _temp), _possibleConstructorReturn(_this, _ret); 86 | } 87 | 88 | MarkerLayer.prototype.componentWillReceiveProps = function componentWillReceiveProps() { 89 | // no-op to override MapLayer behavior 90 | }; 91 | 92 | MarkerLayer.prototype.componentDidMount = function componentDidMount() { 93 | this.leafletElement = _reactDom2.default.findDOMNode(this.refs.container); 94 | this.props.map.getPanes().overlayPane.appendChild(this.leafletElement); 95 | if (this.props.fitBoundsOnLoad) { 96 | this.fitBounds(); 97 | } 98 | this.attachEvents(); 99 | this.updatePosition(); 100 | }; 101 | 102 | MarkerLayer.prototype.componentWillUnmount = function componentWillUnmount() { 103 | this.props.map.getPanes().overlayPane.removeChild(this.leafletElement); 104 | }; 105 | 106 | MarkerLayer.prototype.fitBounds = function fitBounds() { 107 | var markers = this.props.markers; 108 | var lngs = (0, _lodash14.default)((0, _lodash2.default)(markers, this.props.longitudeExtractor), isValid); 109 | var lats = (0, _lodash14.default)((0, _lodash2.default)(markers, this.props.latitudeExtractor), isValid); 110 | var ne = { lng: (0, _lodash10.default)(lngs), lat: (0, _lodash10.default)(lats) }; 111 | var sw = { lng: (0, _lodash8.default)(lngs), lat: (0, _lodash8.default)(lats) }; 112 | 113 | if (shouldIgnoreLocation(ne) || shouldIgnoreLocation(sw)) { 114 | return; 115 | } 116 | 117 | this.props.map.fitBounds(_leaflet2.default.latLngBounds(_leaflet2.default.latLng(sw), _leaflet2.default.latLng(ne))); 118 | }; 119 | 120 | MarkerLayer.prototype.componentDidUpdate = function componentDidUpdate() { 121 | this.props.map.invalidateSize(); 122 | if (this.props.fitBoundsOnUpdate) { 123 | this.fitBounds(); 124 | } 125 | this.updatePosition(); 126 | }; 127 | 128 | MarkerLayer.prototype.attachEvents = function attachEvents() { 129 | var _this2 = this; 130 | 131 | var map = this.props.map; 132 | map.on('viewreset', function () { 133 | return _this2.updatePosition(); 134 | }); 135 | }; 136 | 137 | MarkerLayer.prototype.getLocationForMarker = function getLocationForMarker(marker) { 138 | return { 139 | lat: this.props.latitudeExtractor(marker), 140 | lng: this.props.longitudeExtractor(marker) 141 | }; 142 | }; 143 | 144 | MarkerLayer.prototype.updatePosition = function updatePosition() { 145 | var _this3 = this; 146 | 147 | (0, _lodash4.default)(this.props.markers, function (marker, i) { 148 | var markerElement = _reactDom2.default.findDOMNode(_this3.refs[_this3.getMarkerRefName(i)]); 149 | 150 | var location = _this3.getLocationForMarker(marker); 151 | 152 | if (shouldIgnoreLocation(location)) { 153 | return; 154 | } 155 | 156 | var point = _this3.props.map.latLngToLayerPoint(_leaflet2.default.latLng(location)); 157 | 158 | _leaflet2.default.DomUtil.setPosition(markerElement, point); 159 | }); 160 | }; 161 | 162 | MarkerLayer.prototype.render = function render() { 163 | return _react2.default.createElement( 164 | 'div', 165 | { ref: 'container', 166 | className: 'leaflet-objects-pane\n leaflet-marker-pane\n leaflet-zoom-hide\n react-leaflet-marker-layer' }, 167 | this.renderMarkers() 168 | ); 169 | }; 170 | 171 | MarkerLayer.prototype.renderMarkers = function renderMarkers() { 172 | var _this4 = this; 173 | 174 | var style = { position: 'absolute' }; 175 | var MarkerComponent = this.props.markerComponent; 176 | return (0, _lodash2.default)(this.props.markers, function (marker, index) { 177 | if (shouldIgnoreLocation(_this4.getLocationForMarker(marker))) { 178 | return; 179 | } 180 | 181 | return _react2.default.createElement(MarkerComponent, _extends({}, _this4.props.propsForMarkers, { 182 | key: index, 183 | style: style, 184 | map: _this4.props.map, 185 | ref: _this4.getMarkerRefName(index), 186 | marker: marker })); 187 | }); 188 | }; 189 | 190 | MarkerLayer.prototype.getMarkerRefName = function getMarkerRefName(index) { 191 | return 'marker-' + index; 192 | }; 193 | 194 | return MarkerLayer; 195 | }(_reactLeaflet.MapLayer); 196 | 197 | MarkerLayer.propTypes = { 198 | markers: _react2.default.PropTypes.array, 199 | longitudeExtractor: _react2.default.PropTypes.func.isRequired, 200 | latitudeExtractor: _react2.default.PropTypes.func.isRequired, 201 | markerComponent: _react2.default.PropTypes.func.isRequired, 202 | propsForMarkers: _react2.default.PropTypes.object, 203 | fitBoundsOnLoad: _react2.default.PropTypes.bool, 204 | fitBoundsOnUpdate: _react2.default.PropTypes.bool 205 | }; 206 | exports.default = MarkerLayer; 207 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-leaflet-marker-layer", 3 | "version": "0.1.3", 4 | "description": "A custom layer for react-leaflet that makes plotting react components simple", 5 | "main": "lib/MarkerLayer.js", 6 | "scripts": { 7 | "test": "jest", 8 | "compile": "npm run clean; npm run transpile", 9 | "transpile": "./node_modules/.bin/babel src/MarkerLayer.js --out-file lib/MarkerLayer.js", 10 | "clean": "rm -rf ./lib/*", 11 | "example": "webpack-dev-server --config ./example/webpack.config.js" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/OpenGov/react-leaflet-marker-layer.git" 16 | }, 17 | "keywords": [ 18 | "react", 19 | "leaflet", 20 | "layer", 21 | "map", 22 | "maps", 23 | "gis", 24 | "geo", 25 | "geojson", 26 | "marker" 27 | ], 28 | "author": "Jeremiah Hall ", 29 | "license": "MIT", 30 | "peerDependencies": { 31 | "leaflet": "^0.7.7", 32 | "react-leaflet": "^0.10.2", 33 | "react": "^0.14.7", 34 | "react-dom": "^0.14.7" 35 | }, 36 | "devDependencies": { 37 | "babel-cli": "^6.6.5", 38 | "babel-core": "^6.7.4", 39 | "babel-eslint": "^5.0.0", 40 | "babel-jest": "^9.0.3", 41 | "babel-loader": "^6.2.4", 42 | "babel-plugin-object-assign": "^1.2.1", 43 | "babel-plugin-react-transform": "^2.0.0", 44 | "babel-plugin-transform-proto-to-assign": "^6.4.0", 45 | "babel-polyfill": "^6.7.4", 46 | "babel-preset-es2015": "^6.3.13", 47 | "babel-preset-react": "^6.3.13", 48 | "babel-preset-stage-0": "^6.3.13", 49 | "enzyme": "^2.2.0", 50 | "eslint-config-airbnb": "^6.2.0", 51 | "eslint-plugin-arrow-function": "^2.0.0", 52 | "eslint-plugin-react": "^4.2.3", 53 | "jest-cli": "^0.9.2", 54 | "leaflet": "^0.7.7", 55 | "react": "^0.14.7", 56 | "react-addons-test-utils": "^0.14.7", 57 | "react-dom": "^0.14.7", 58 | "react-leaflet": "^0.10.2", 59 | "react-transform-hmr": "^1.0.4", 60 | "webpack-dev-server": "^1.14.1", 61 | "webpack": "^1.12.14" 62 | }, 63 | "jest": { 64 | "scriptPreprocessor": "/node_modules/babel-jest/src/index.js", 65 | "unmockedModulePathPatterns": [ 66 | "react", 67 | "enzyme", 68 | "react-dom", 69 | "react-addons-test-utils", 70 | "fbjs", 71 | "cheerio", 72 | "htmlparser2", 73 | "underscore", 74 | "lodash", 75 | "domhandler", 76 | "object.assign", 77 | "define-properties", 78 | "function-bind", 79 | "object-keys" 80 | ], 81 | "moduleFileExtensions": [ 82 | "js", 83 | "json", 84 | "jsx" 85 | ] 86 | }, 87 | "dependencies": { 88 | "lodash.filter": "^4.3.0", 89 | "lodash.foreach": "^4.2.0", 90 | "lodash.isnumber": "^3.0.3", 91 | "lodash.map": "^4.3.0", 92 | "lodash.max": "^4.0.0", 93 | "lodash.min": "^4.0.0", 94 | "lodash.pluck": "^3.1.2", 95 | "react-pure-render": "^1.0.2" 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenGov/react-leaflet-marker-layer/7b9fa9466e95d80c0d82936a63ac94d1778ded9f/screenshot.jpg -------------------------------------------------------------------------------- /src/MarkerLayer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import map from 'lodash.map'; 4 | import forEach from 'lodash.foreach'; 5 | import pluck from 'lodash.pluck'; 6 | import min from 'lodash.min'; 7 | import max from 'lodash.max'; 8 | import isNumber from 'lodash.isnumber'; 9 | import filter from 'lodash.filter'; 10 | import L from 'leaflet'; 11 | import { MapLayer } from 'react-leaflet'; 12 | import shouldPureComponentUpdate from 'react-pure-render/function'; 13 | 14 | export type LngLat = { 15 | lng: number; 16 | lat: number; 17 | } 18 | 19 | export type Point = { 20 | x: number; 21 | y: number; 22 | } 23 | 24 | export type Map = { 25 | layerPointToLatLng: (lngLat: Point) => LngLat; 26 | latLngToLayerPoint: (lngLat: LngLat) => Point; 27 | on: (event: string, handler: () => void) => void; 28 | getPanes: () => Panes; 29 | invalidateSize: () => void; 30 | } 31 | 32 | export type Panes = { 33 | overlayPane: Pane; 34 | } 35 | 36 | export type Pane = { 37 | appendChild: (element: Object) => void; 38 | } 39 | 40 | function isInvalid(num: number): boolean { 41 | return !isNumber(num) && !num; 42 | } 43 | 44 | function isValid(num: number): boolean { 45 | return !isInvalid(num); 46 | } 47 | 48 | function shouldIgnoreLocation(loc: LngLat): boolean { 49 | return isInvalid(loc.lng) || isInvalid(loc.lat); 50 | } 51 | 52 | export default class MarkerLayer extends MapLayer { 53 | static propTypes = { 54 | markers: React.PropTypes.array, 55 | longitudeExtractor: React.PropTypes.func.isRequired, 56 | latitudeExtractor: React.PropTypes.func.isRequired, 57 | markerComponent: React.PropTypes.func.isRequired, 58 | propsForMarkers: React.PropTypes.object, 59 | fitBoundsOnLoad: React.PropTypes.bool, 60 | fitBoundsOnUpdate: React.PropTypes.bool, 61 | }; 62 | 63 | shouldComponentUpdate = shouldPureComponentUpdate; 64 | 65 | componentWillReceiveProps() { 66 | // no-op to override MapLayer behavior 67 | } 68 | 69 | componentDidMount(): void { 70 | this.leafletElement = ReactDOM.findDOMNode(this.refs.container); 71 | this.props.map.getPanes().overlayPane.appendChild(this.leafletElement); 72 | if (this.props.fitBoundsOnLoad) { 73 | this.fitBounds(); 74 | } 75 | this.attachEvents(); 76 | this.updatePosition(); 77 | } 78 | 79 | componentWillUnmount(): void { 80 | this.props.map.getPanes().overlayPane.removeChild(this.leafletElement); 81 | } 82 | 83 | fitBounds(): void { 84 | const markers = this.props.markers; 85 | const lngs = filter(map(markers, this.props.longitudeExtractor), isValid); 86 | const lats = filter(map(markers, this.props.latitudeExtractor), isValid); 87 | const ne = { lng: max(lngs), lat: max(lats) }; 88 | const sw = { lng: min(lngs), lat: min(lats) }; 89 | 90 | if (shouldIgnoreLocation(ne) || shouldIgnoreLocation(sw)) { 91 | return; 92 | } 93 | 94 | this.props.map.fitBounds(L.latLngBounds(L.latLng(sw), L.latLng(ne))); 95 | } 96 | 97 | markersOrPositionExtractorsChanged(props): boolean { 98 | return this.props.markers !== props.markers 99 | || this.props.longitudeExtractor !== props.longitudeExtractor 100 | || this.props.latitudeExtractor !== props.latitudeExtractor; 101 | } 102 | 103 | componentDidUpdate(prevProps): void { 104 | this.props.map.invalidateSize(); 105 | if (this.props.fitBoundsOnUpdate && this.markersOrPositionExtractorsChanged(prevProps)) { 106 | this.fitBounds(); 107 | } 108 | this.updatePosition(); 109 | } 110 | 111 | attachEvents(): void { 112 | const map: Map = this.props.map; 113 | map.on('viewreset', () => this.updatePosition()); 114 | } 115 | 116 | getLocationForMarker(marker): LngLat { 117 | return { 118 | lat: this.props.latitudeExtractor(marker), 119 | lng: this.props.longitudeExtractor(marker) 120 | }; 121 | } 122 | 123 | updatePosition(): void { 124 | forEach(this.props.markers, (marker, i) => { 125 | const markerElement = ReactDOM.findDOMNode( 126 | this.refs[this.getMarkerRefName(i)] 127 | ); 128 | 129 | const location = this.getLocationForMarker(marker); 130 | 131 | if (shouldIgnoreLocation(location)) { 132 | return; 133 | } 134 | 135 | const point = this.props.map.latLngToLayerPoint(L.latLng(location)); 136 | 137 | L.DomUtil.setPosition(markerElement, point); 138 | }); 139 | } 140 | 141 | render(): React.Element { 142 | return ( 143 |
148 | {this.renderMarkers()} 149 |
150 | ); 151 | } 152 | 153 | renderMarkers(): Array { 154 | const style = { position: 'absolute' }; 155 | const MarkerComponent = this.props.markerComponent; 156 | return map(this.props.markers, (marker, index: number) => { 157 | if (shouldIgnoreLocation(this.getLocationForMarker(marker))) { 158 | return; 159 | } 160 | 161 | return ( 162 | 169 | ); 170 | }); 171 | } 172 | 173 | getMarkerRefName(index: number): string { 174 | return `marker-${index}`; 175 | } 176 | 177 | } 178 | -------------------------------------------------------------------------------- /src/__tests__/MarkerLayer.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow, mount, render } from 'enzyme'; 3 | import { Map } from 'react-leaflet'; 4 | import MarkerLayer from '../MarkerLayer.js'; 5 | 6 | jest.unmock('../MarkerLayer.js'); 7 | 8 | const L = jest.genMockFromModule('leaflet'); 9 | 10 | class MarkerComponent extends React.Component { 11 | render() { 12 | return ( 13 |
Marker component
14 | ); 15 | } 16 | } 17 | 18 | describe('MarkerLayer', () => { 19 | 20 | /* 21 | Here we declare mocks or fixtures of 22 | all the data structures that the component uses 23 | */ 24 | const center = { lng: -122.673447, lat: 45.522558 }; 25 | 26 | const mockBounds = { 27 | contains: jest.fn(() => true), 28 | extend: jest.fn(), 29 | getNorthEast: jest.fn(() => ({ lng: -122, lat: 46 })), 30 | getSouthWest: jest.fn(() => ({ lng: -123, lat: 45 })), 31 | }; 32 | 33 | const mockPanes = { overlayPane: { appendChild: jest.fn() } }; 34 | 35 | const mockMap = { 36 | layerPointToLatLng: jest.fn(() => ({ lng: -122.6, lat: 45.522 })), 37 | latLngToLayerPoint: jest.fn(() => ({ x: 100, y: 100 })), 38 | on: jest.fn(), 39 | getBounds: jest.fn(() => mockBounds), 40 | getPanes: jest.fn(() => mockPanes), 41 | invalidateSize: jest.fn() 42 | }; 43 | 44 | const mockMarkers = [ 45 | { 46 | position: { lng: -122.673447, lat: 45.5225581 }, 47 | text: 'Voodoo Doughnut', 48 | }, 49 | { 50 | position: { lng: -122.6781446, lat: 45.5225512 }, 51 | text: 'Bailey\'s Taproom', 52 | }, 53 | { 54 | position: { lng: -122.67535700000002, lat: 45.5192743 }, 55 | text: 'Barista' 56 | } 57 | ]; 58 | 59 | it('should render', () => { 60 | const layer = render( 61 | m.position.lng} 64 | latitudeExtractor={m => m.position.lat} 65 | markerComponent={MarkerComponent} /> 66 | ); 67 | expect(layer).toBeTruthy(); 68 | }); 69 | 70 | it('should render a single child given one marker', () => { 71 | const layer = mount( 72 | m.position.lng} 76 | latitudeExtractor={m => m.position.lat} 77 | markerComponent={MarkerComponent} /> 78 | ); 79 | expect(layer.find('.marker-component').length).toEqual(1); 80 | }); 81 | 82 | it('should render three child given three markers with the different positions', () => { 83 | const layer = mount( 84 | m.position.lng} 88 | latitudeExtractor={m => m.position.lat} 89 | markerComponent={MarkerComponent} /> 90 | ); 91 | expect(layer.find('.marker-component').length).toEqual(3); 92 | }); 93 | 94 | it('should pass the `propsForMarkers` prop to rendered ', () => { 95 | const mockProps = { 96 | theAnswer: 42, 97 | numCoffees: 3 98 | }; 99 | 100 | const layer = mount( 101 | m.position.lng} 105 | latitudeExtractor={m => m.position.lat} 106 | propsForMarkers={mockProps} 107 | markerComponent={MarkerComponent} /> 108 | ); 109 | const componentProps = layer.find(MarkerComponent).at(0).props(); 110 | expect(componentProps).toBeTruthy(); 111 | expect(componentProps.theAnswer).toEqual(mockProps.theAnswer); 112 | expect(componentProps.numCoffees).toEqual(mockProps.numCoffees); 113 | }); 114 | }); 115 | --------------------------------------------------------------------------------