/tools/__mocks__/styleMock.js'
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/tools/module-do:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | const path = require('path')
3 | const exec = require('./exec')
4 |
5 | // Using this because `lerna run --scope` requires '@terraeclipse/' prefix.
6 | function moduleDo (mod, cmd, ...rest) {
7 | const modDir = path.resolve(__dirname, '../modules', mod)
8 | exec(`yarn run ${cmd} -- ${rest.join(' ')}`, {cwd: modDir})
9 | }
10 |
11 | // Are we running this directly?
12 | if (process.argv[0].match(/bin\/node$/) && process.argv[1].match(/module-do$/)) {
13 | if (!process.argv[2]) {
14 | console.error('Error: Please specify a module name')
15 | } else if (!process.argv[3]) {
16 | console.error('Error: Please specify a cmd')
17 | } else {
18 | moduleDo(...process.argv.slice(2))
19 | }
20 | }
21 |
22 | module.exports = moduleDo
23 |
--------------------------------------------------------------------------------
/modules/core/src/util/__snapshots__/diff.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`diff can diff two objects 1`] = `
4 | Array [
5 | Object {
6 | "key": "favorite",
7 | "type": "remove",
8 | "value": true,
9 | },
10 | Object {
11 | "key": "vegetarian",
12 | "type": "add",
13 | "value": false,
14 | },
15 | Object {
16 | "key": "name",
17 | "type": "update",
18 | "value": "bacon quiche",
19 | },
20 | Object {
21 | "key": "ingredients",
22 | "type": "update",
23 | "value": Array [
24 | "eggs",
25 | "cream",
26 | "cheese",
27 | "bacon",
28 | ],
29 | },
30 | Object {
31 | "key": "status",
32 | "type": "update",
33 | "value": Object {
34 | "ate": true,
35 | "baked": true,
36 | "prepared": true,
37 | },
38 | },
39 | ]
40 | `;
41 |
--------------------------------------------------------------------------------
/modules/core/src/index.js:
--------------------------------------------------------------------------------
1 | export {default as Children} from './Children'
2 | export {default as Control} from './Control'
3 | export {default as Image} from './Image'
4 | export {default as Layer} from './Layer'
5 | export {default as LayerEvent} from './LayerEvent'
6 | export {default as LayerEvents} from './LayerEvents'
7 | export {default as LoadImages} from './LoadImages'
8 | export {default as MapboxProvider} from './MapboxProvider'
9 | export {default as MapEvent} from './MapEvent'
10 | export {default as MapEvents} from './MapEvents'
11 | export {default as MapGL} from './MapGL'
12 | export {default as MapInteraction} from './MapInteraction'
13 | export {default as MapOptions} from './MapOptions'
14 | export {default as MapPosition} from './MapPosition'
15 | export {default as Marker} from './Marker'
16 | export {default as Popup} from './Popup'
17 | export {default as Source} from './Source'
18 |
--------------------------------------------------------------------------------
/modules/core/src/util/diff.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-env jest */
2 | import diff from './diff'
3 |
4 | describe('diff', () => {
5 | it('can diff two objects', () => {
6 | var a = {
7 | meal: 'dinner',
8 | name: 'quiche',
9 | ingredients: [
10 | 'eggs',
11 | 'cream',
12 | 'cheese'
13 | ],
14 | status: {
15 | prepared: true,
16 | baked: false,
17 | ate: false
18 | },
19 | favorite: true
20 | }
21 | var b = {
22 | meal: 'dinner',
23 | name: 'bacon quiche',
24 | ingredients: [
25 | 'eggs',
26 | 'cream',
27 | 'cheese',
28 | 'bacon'
29 | ],
30 | status: {
31 | prepared: true,
32 | baked: true,
33 | ate: true
34 | },
35 | vegetarian: false
36 | }
37 | var changes = diff(a, b)
38 | expect(changes).toMatchSnapshot()
39 | })
40 | })
41 |
--------------------------------------------------------------------------------
/modules/toggle/README.md:
--------------------------------------------------------------------------------
1 | @react-mapboxgl/toggle
2 | ======================
3 |
4 | The `Toggle` component binds listeners for the proper map and layer click events
5 | needed to 'toggle' features. You can either respond to toggled features with
6 | the `onToggle` prop, or pass a function as the children which will receive `{features, properties}`,
7 | where `features` is an array of toggled features, and `properties` is an array
8 | containing the unique property values of the toggled layers (useful shortcut for filters).
9 |
10 | Usage
11 | -----
12 |
13 | For an example usage, [see the storybook](https://terraeclipse.github.io/react-mapboxgl/?selectedKind=Toggle&selectedStory=Example).
14 |
15 | - - -
16 |
17 | #### Developed by [TerraEclipse](https://github.com/TerraEclipse)
18 |
19 | Terra Eclipse, Inc. is a nationally recognized political technology and
20 | strategy firm located in Santa Cruz, CA and Washington, D.C.
21 |
--------------------------------------------------------------------------------
/tools/test-module:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | const path = require('path')
3 | const exec = require('./exec')
4 |
5 | function testModule (cwd, args = []) {
6 | const rootDir = path.resolve(__dirname, '../')
7 | const relCwd = path.relative(rootDir, cwd)
8 | let cmd
9 |
10 | // Add our args.
11 | args = args.concat([
12 | `--roots ${relCwd}/src`,
13 | `--collectCoverageFrom ${relCwd}/src/**/*.js`,
14 | `--coverageDirectory ${relCwd}/coverage`
15 | ])
16 |
17 | // Create and print the cmd.
18 | cmd = `jest ${args.join(' ')}`
19 | console.log(cmd)
20 |
21 | exec(cmd, {
22 | cwd: rootDir,
23 | env: {
24 | NODE_ENV: 'test',
25 | BABEL_ENV: 'node'
26 | }
27 | })
28 | }
29 |
30 | // Are we running this directly?
31 | if (process.argv[0].match(/bin\/node$/) && process.argv[1].match(/test-module$/)) {
32 | testModule(process.cwd(), process.argv.slice(2))
33 | }
34 |
35 | module.exports = testModule
36 |
--------------------------------------------------------------------------------
/modules/hover/README.md:
--------------------------------------------------------------------------------
1 | @react-mapboxgl/hover
2 | ==========================
3 |
4 | The `Hover` component binds listeners for the appropriate map and layer events,
5 | and tracks changes in the 'hovering' status of features in a layer. You can
6 | either handle hover changes with the `onHoverOver` and `onHoverOut` props or
7 | pass a function as the children who will be updated with `{features, properties}`,
8 | where `features` is an array of hovered features, and `properties` is an array
9 | containing the unique property values of the hovered layers (useful shortcut for filters).
10 |
11 | Usage
12 | -----
13 |
14 | For an example usage, [see the storybook](https://terraeclipse.github.io/react-mapboxgl/?selectedKind=Hover&selectedStory=Example).
15 |
16 | - - -
17 |
18 | #### Developed by [TerraEclipse](https://github.com/TerraEclipse)
19 |
20 | Terra Eclipse, Inc. is a nationally recognized political technology and
21 | strategy firm located in Santa Cruz, CA and Washington, D.C.
22 |
--------------------------------------------------------------------------------
/modules/README.md:
--------------------------------------------------------------------------------
1 | @react-mapboxgl Modules
2 | -----------------------
3 |
4 | The @react-mapboxgl project is split into several npm modules:
5 |
6 | - `core` provides the components and utilities required to
7 | render maps. Almost anything that that directly calls `mapbox-gl-js`
8 | methods will be found here.
9 | - Modules like `click`, `hover`, `toggle`, etc. provide higher-level
10 | abstractions around common map functionality or behaviors. These will
11 | typically rely on lower-level components from core such as `MapEvent`, but
12 | wrap them in a more declarative API or provide user-facing enhancements.
13 | - Modules like `button-layer` wrap many core components to provide convenient
14 | ways to accomplish more complex map/layer UI or behavior.
15 | - `docs` provides helper components and utilities strictly used in the storybook
16 | entries.
17 |
18 | Each of these modules are installed as dependencies in your projects like:
19 |
20 | ```
21 | $ npm install --save @react-mapboxgl/core @react-mapboxgl/click
22 | ```
23 |
--------------------------------------------------------------------------------
/modules/core/src/MapEvent.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | class MapEvent extends React.PureComponent {
5 | static propTypes = {
6 | type: PropTypes.string.isRequired,
7 | onChange: PropTypes.func.isRequired
8 | }
9 |
10 | static contextTypes = {
11 | map: PropTypes.object
12 | }
13 |
14 | componentDidMount () {
15 | let {map} = this.context
16 | map.on(this.props.type, this.props.onChange)
17 | }
18 |
19 | componentWillUnmount () {
20 | let {map} = this.context
21 | map.off(this.props.type, this.props.onChange)
22 | }
23 |
24 | componentWillReceiveProps (nextProps) {
25 | let {map} = this.context
26 | if (
27 | (this.props.type !== nextProps.type) ||
28 | (this.props.onChange !== nextProps.onChange)
29 | ) {
30 | map.off(this.props.type, this.props.onChange)
31 | map.on(nextProps.type, nextProps.onChange)
32 | }
33 | }
34 |
35 | render () {
36 | return null
37 | }
38 | }
39 |
40 | export default MapEvent
41 |
--------------------------------------------------------------------------------
/tools/clean-module:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | const path = require('path')
3 | const exec = require('./exec')
4 |
5 | function cleanModule (cwd) {
6 | // Ceanup error logs.
7 | function cleanBuild () {
8 | return Promise.resolve().then(() => {
9 | exec(`rimraf ${path.join(cwd, 'lib')}`)
10 | exec(`rimraf ${path.join(cwd, 'es')}`)
11 | })
12 | }
13 |
14 | // Ceanup error logs.
15 | function cleanErrorLogs () {
16 | return Promise.resolve().then(() => {
17 | exec(`rimraf ${process.cwd()}/lerna-debug.log`)
18 | exec(`rimraf ${process.cwd()}/npm-debug.log`)
19 | })
20 | }
21 |
22 | // Run all the tasks.
23 | Promise.all([
24 | cleanBuild(),
25 | cleanErrorLogs()
26 | ]).then(() => {
27 | console.log()
28 | console.log('Module cleaned!')
29 | console.log()
30 | })
31 | }
32 |
33 | // Are we running this directly?
34 | if (process.argv[0].match(/bin\/node$/) && process.argv[1].match(/clean-module$/)) {
35 | cleanModule(process.cwd())
36 | }
37 |
38 | module.exports = cleanModule
39 |
--------------------------------------------------------------------------------
/modules/core/src/stories/about.story.docs.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Core - About
3 | *
4 | * ## About the Examples
5 | *
6 | */
7 |
8 | /**
9 | * The examples are all wrapped in the required MapboxProvider. You need to
10 | * do so in your own App as well.
11 | */
12 | import React from 'react'
13 | import ReactDOM from 'react-dom'
14 | import {MapboxProvider} from '@react-mapboxgl/core'
15 |
16 | ReactDOM.render((
17 |
18 |
19 | {/* ... the rest of your app */}
20 |
21 |
22 | ), document.getElementById('root'))
23 |
24 |
25 | /**
26 | * The default options fed into most of the maps are:
27 | */
28 | const defaults = {
29 | style: 'mapbox://styles/mapbox/streets-v9',
30 | bbox: [[-123.881836, 25.063209], [-65.170898, 48.848451]],
31 | center: [-95.844727, 39.620499],
32 | zoom: 3,
33 | padding: 30,
34 | containerStyle: {
35 | position: 'fixed',
36 | top: 0,
37 | left: 0,
38 | right: 0,
39 | bottom: 0,
40 | zIndex: 1
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/tools/.storybook/util/parseComment.js:
--------------------------------------------------------------------------------
1 | // Helper to parse meta from top comment block.
2 | export default function parseMeta (src) {
3 | var regex = /\/(\*)[^*]*\*+(?:[^*/][^*]*\*+)*\//gm
4 | var blocks = src.match(regex)
5 | if (blocks) {
6 | // Split into lines without comment syntax.
7 | var lines = blocks[0].split('\n').map((line) => {
8 | return line.replace(/^(\/\*\*?\s?)|(\s?\*\*?\/?\s?)/g, '')
9 | })
10 |
11 | // Strip empty lines.
12 | while (lines[0] === '') {
13 | lines.shift()
14 | }
15 |
16 | // Parse category and label (and remove it).
17 | var [category, label] = lines[0].split(/\s-\s/).map((part) => part.trim())
18 | lines.shift()
19 | if (!category || !label) {
20 | throw new Error('Could not parse category or label from docblock')
21 | }
22 |
23 | // Strip empty lines.
24 | while (lines.length && lines[0] === '') {
25 | lines.shift()
26 | }
27 |
28 | // Join the rest into a description.
29 | var description = lines.join('\n')
30 |
31 | return {category, label, description}
32 | } else {
33 | return false
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/modules/core/src/LayerEvent.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | class LayerEvent extends React.PureComponent {
5 | static propTypes = {
6 | type: PropTypes.string.isRequired,
7 | layer: PropTypes.string.isRequired,
8 | onChange: PropTypes.func.isRequired
9 | }
10 |
11 | static contextTypes = {
12 | map: PropTypes.object
13 | }
14 |
15 | componentDidMount () {
16 | let {map} = this.context
17 | map.on(this.props.type, this.props.layer, this.props.onChange)
18 | }
19 |
20 | componentWillUnmount () {
21 | let {map} = this.context
22 | map.off(this.props.type, this.props.layer, this.props.onChange)
23 | }
24 |
25 | componentWillReceiveProps (nextProps) {
26 | let {map} = this.context
27 | if (
28 | (this.props.type !== nextProps.type) ||
29 | (this.props.layer !== nextProps.layer) ||
30 | (this.props.onChange !== nextProps.onChange)
31 | ) {
32 | map.off(this.props.type, this.props.layer, this.props.onChange)
33 | map.on(nextProps.type, nextProps.layer, nextProps.onChange)
34 | }
35 | }
36 |
37 | render () {
38 | return null
39 | }
40 | }
41 |
42 | export default LayerEvent
43 |
--------------------------------------------------------------------------------
/modules/core/src/util/diff.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash'
2 |
3 | /**
4 | * Produces a shallow diff of an object. Output is an array of
5 | * 'changes' where a change is either an 'add', 'remove', or 'update'.
6 | */
7 | export default function diff (a, b) {
8 | // Throw is a or b are not objects.
9 | if (!_.isPlainObject(a)) {
10 | throw new Error('First parameter to diff() is not an object')
11 | }
12 | if (!_.isPlainObject(b)) {
13 | throw new Error('Second parameter to diff() is not an object')
14 | }
15 |
16 | let changes = []
17 | let keysA = _.keys(a)
18 | let keysB = _.keys(b)
19 |
20 | // Find the items in A that are not in B.
21 | _.each(_.difference(keysA, keysB), (key) => {
22 | changes.push({type: 'remove', key: key, value: a[key]})
23 | })
24 |
25 | // Find the items in B that are not in A.
26 | _.each(_.difference(keysB, keysA), (key) => {
27 | changes.push({type: 'add', key: key, value: b[key]})
28 | })
29 |
30 | // Find the items that are in both, but have changed.
31 | _.each(_.intersection(keysA, keysB), (key) => {
32 | if (!_.isEqual(a[key], b[key])) {
33 | changes.push({type: 'update', key: key, value: b[key]})
34 | }
35 | })
36 |
37 | return changes
38 | }
39 |
--------------------------------------------------------------------------------
/modules/core/src/stories/events.story.src.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Core - Events
3 | *
4 | * ## Map Events
5 | * Toggle any of the possible map events to start logging them.
6 | */
7 | import React from 'react'
8 | import _ from 'lodash'
9 | import {action} from '@storybook/addon-actions'
10 | import {mapDefaults, sanitizeMapEvent, Options, Checkbox} from '@react-mapboxgl/docs'
11 | import {MapGL, MapEvents} from '../'
12 |
13 | const eventHandlers = _.mapValues(MapEvents.propTypes, (t, name) => {
14 | return (e) => {
15 | action(name)(sanitizeMapEvent(e))
16 | console.log(e)
17 | }
18 | })
19 |
20 | class Story extends React.Component {
21 | state = {}
22 | render () {
23 | return (
24 |
25 | {
28 | return this.state[name]
29 | })}
30 | />
31 |
32 | {_.map(eventHandlers, (_, name) => (
33 | {
37 | this.setState({[name]: e.currentTarget.checked})
38 | }}
39 | checked={this.state[name] || false}
40 | />
41 | ))}
42 |
43 |
44 | )
45 | }
46 | }
47 |
48 | export default Story
49 |
--------------------------------------------------------------------------------
/modules/core/src/stories/interaction-handlers.story.src.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Core - Interaction Handlers
3 | *
4 | * ## Turn Map Interaction Handlers On/Off
5 | * Toggle any of the map interaction handlers.
6 | */
7 | import React from 'react'
8 | import _ from 'lodash'
9 | import {action} from '@storybook/addon-actions'
10 | import {mapDefaults, Checkbox, Options} from '@react-mapboxgl/docs'
11 | import {MapGL} from '../'
12 |
13 | class Story extends React.Component {
14 | state = {
15 | scrollZoom: true,
16 | boxZoom: true,
17 | dragRotate: true,
18 | dragPan: true,
19 | keyboard: true,
20 | doubleClickZoom: true,
21 | touchZoomRotate: true
22 | }
23 | render () {
24 | return (
25 |
26 |
30 |
31 | {_.map(this.state, (checked, name) => (
32 | {
36 | action(name)(e.currentTarget.checked ? 'Enabled' : 'Disabled')
37 | this.setState({[name]: e.currentTarget.checked})
38 | }}
39 | checked={checked}
40 | />
41 | ))}
42 |
43 |
44 | )
45 | }
46 | }
47 |
48 | export default Story
49 |
--------------------------------------------------------------------------------
/modules/docs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@react-mapboxgl/docs",
3 | "version": "2.1.0",
4 | "publishConfig": {
5 | "access": "public"
6 | },
7 | "description": "Documentation (storybook) helpers for @react-mapboxgl",
8 | "standard": {
9 | "parser": "babel-eslint"
10 | },
11 | "main": "lib/index.js",
12 | "module": "es/index.js",
13 | "files": [
14 | "es",
15 | "lib"
16 | ],
17 | "scripts": {
18 | "prepublish": "yarn run build",
19 | "build": "../../tools/build-module",
20 | "clean": "../../tools/clean-module",
21 | "test": "../../tools/test-module",
22 | "coverage": "../../tools/test-module --coverage"
23 | },
24 | "peerDependencies": {
25 | "lodash": "^4.17.4",
26 | "prop-types": "^15.5.10",
27 | "react": "^15.5.4"
28 | },
29 | "devDependencies": {
30 | "lodash": "^4.17.4",
31 | "prop-types": "^15.5.10",
32 | "react": "^15.5.4"
33 | },
34 | "author": "Brian Link",
35 | "license": "Apache-2.0",
36 | "repository": {
37 | "type": "git",
38 | "url": "git+https://github.com/TerraEclipse/react-mapboxgl.git"
39 | },
40 | "bugs": {
41 | "url": "https://github.com/TerraEclipse/react-mapboxgl/issues"
42 | },
43 | "homepage": "https://github.com/TerraEclipse/react-mapboxgl/tree/master/modules/docs#readme",
44 | "keywords": [
45 | "react-component"
46 | ]
47 | }
48 |
--------------------------------------------------------------------------------
/tools/.storybook/util/loadDocsStories.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {storiesOf} from '@storybook/react'
3 | import parseComment from './parseComment'
4 | import parseBlocks from './parseBlocks'
5 | import WithDocs from '../components/WithDocs'
6 |
7 | /**
8 | * Load `*.story.docs.js` files, which render with as docs.
9 | */
10 | export default function loadDocsStories () {
11 | // Create webpack require contexts for 'source' stories and load them.
12 | const reqSourceRaw = require.context('!!raw-loader!../../../modules', true, /\.\/[^/]+\/src\/.*\.story\.docs\.js$/)
13 | const reqSourcePrism = require.context('!!prismjs-loader?lang=jsx!../../../modules', true, /\.\/[^/]+\/src\/.*\.story\.docs\.js$/)
14 | reqSourceRaw.keys().forEach((filepath) => {
15 | let raw = reqSourceRaw(filepath)
16 | let source = reqSourcePrism(filepath)
17 | let meta = parseComment(raw)
18 | let blocks = parseBlocks(raw, source)
19 |
20 | // Remove the top docblock from the source because its redundant with the
21 | // rendered markdown description.
22 | source = source.replace(/^