├── .npmignore ├── .gitignore ├── screenshot.png ├── README.md ├── example ├── attribution.react.js └── main.js ├── package.json └── src └── overlay.react.js /.npmignore: -------------------------------------------------------------------------------- 1 | screenshot.png 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | npm-debug.log 4 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vicapow/react-map-gl-example-overlay/HEAD/screenshot.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-map-gl-example-overlay 2 | 3 | An example of a standalone react-map-gl-overlay. Use it as a starting point for 4 | creating your own custom overlay. 5 | 6 | ![](screenshot.png) 7 | 8 | ## Usage 9 | 10 | ````js 11 | var ExampleOverlay = require('react-map-gl-example-overlay'); 12 | var cities = require('example-cities'); 13 | ```` 14 | 15 | Where each element in `cities` has the form: `{latitude, longitude}`. 16 | 17 | ````js 18 | render() { 19 | var {viewport} = this.state.viewport; 20 | return 21 | 22 | ; 23 | } 24 | ```` 25 | 26 | -------------------------------------------------------------------------------- /example/attribution.react.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var React = require('react'); 4 | var r = require('r-dom'); 5 | 6 | var Attribution = React.createClass({ 7 | 8 | displayName: 'Attribution', 9 | 10 | render: function render() { 11 | return r.div({ 12 | style: { 13 | position: 'absolute', 14 | right: 10, 15 | bottom: 10, 16 | fontFamily: 'Helvetica', 17 | background: 'white', 18 | padding: 4 19 | } 20 | }, [ 21 | 'Map tiles by ', 22 | r.a({href: 'http://stamen.com'}, 'Stamen'), 23 | ' under ', 24 | r.a({href: 'http://creativecommons.org/licenses/by/3.0'}, 'CC BY 3.0'), 25 | '. Data by ', 26 | r.a({href: 'http://openstreetmap.org'}, 'OpenStreetMap'), 27 | ', under ', 28 | r.a({href: 'http://www.openstreetmap.org/copyright'}, 'ODbL'), 29 | '.' 30 | ]); 31 | } 32 | }); 33 | 34 | module.exports = Attribution; 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-map-gl-example-overlay", 3 | "version": "0.0.0", 4 | "description": "", 5 | "main": "src/overlay.react.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/vicapow/react-map-gl-example-overlay.git" 9 | }, 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1", 12 | "start": "budo ./example/main.js --live -- | bistre", 13 | "lint": "uber-standard", 14 | "precommit": "npm run lint -s", 15 | "prepush": "npm run lint -s" 16 | }, 17 | "keywords": [ 18 | "react", 19 | "mapbox", 20 | "mapbox-gl", 21 | "react-map-gl", 22 | "map-gl", 23 | "gl", 24 | "map", 25 | "overlay", 26 | "example" 27 | ], 28 | "author": "Victor Powell", 29 | "license": "MIT", 30 | "peerDependencies": { 31 | "r-dom": "^2.1.0", 32 | "react": "^0.14.0", 33 | "react-dom": "^0.14.3" 34 | }, 35 | "dependencies": { 36 | "example-cities": "0.0.0", 37 | "global": "^4.3.0", 38 | "object-assign": "^4.0.1" 39 | }, 40 | "devDependencies": { 41 | "bistre": "^1.0.1", 42 | "budo": "^6.0.1", 43 | "immutable": "^3.7.5", 44 | "r-dom": "^2.1.0", 45 | "raster-tile-style": "^1.0.1", 46 | "react": "^0.14.0", 47 | "react-dom": "^0.14.3", 48 | "react-map-gl": "^0.6.0", 49 | "uber-standard": "^5.1.0" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/overlay.react.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var React = require('react'); 4 | var window = require('global/window'); 5 | var r = require('r-dom'); 6 | var SVGOverlay = require('react-map-gl/src/overlays/svg.react'); 7 | var assign = require('object-assign'); 8 | 9 | module.exports = React.createClass({ 10 | 11 | displayName: 'ExampleOverlay', 12 | 13 | propTypes: { 14 | locations: React.PropTypes.array.isRequired, 15 | width: React.PropTypes.number.isRequired, 16 | height: React.PropTypes.number.isRequired, 17 | longitude: React.PropTypes.number.isRequired, 18 | latitude: React.PropTypes.number.isRequired, 19 | zoom: React.PropTypes.number.isRequired, 20 | isDragging: React.PropTypes.bool.isRequired 21 | }, 22 | 23 | render: function render() { 24 | return r(SVGOverlay, assign({}, this.props, { 25 | redraw: function redraw(opt) { 26 | return r.g(this.props.locations.map(function map(location) { 27 | var pixel = opt.project([location.longitude, location.latitude]); 28 | return r.circle({ 29 | cx: pixel[0], 30 | cy: pixel[1], 31 | r: 10, 32 | style: { 33 | fill: 'rgba(231, 76, 60, 0.4)', 34 | pointerEvents: 'all', 35 | cursor: 'pointer' 36 | }, 37 | onClick: function onClick() { 38 | window.location.href = 'https://en.wikipedia.org' + location.wiki; 39 | } 40 | }); 41 | })); 42 | }.bind(this) 43 | })); 44 | } 45 | }); 46 | -------------------------------------------------------------------------------- /example/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var document = require('global/document'); 4 | var Immutable = require('immutable'); 5 | var window = require('global/window'); 6 | var React = require('react'); 7 | var ReactDOM = require('react-dom'); 8 | var r = require('r-dom'); 9 | var MapGL = require('react-map-gl'); 10 | var Overlay = require('../src/overlay.react'); 11 | var Attribution = require('./attribution.react'); 12 | var assign = require('object-assign'); 13 | var rasterTileStyle = require('raster-tile-style'); 14 | var tileSource = '//tile.stamen.com/toner/{z}/{x}/{y}.png'; 15 | var mapStyle = rasterTileStyle([tileSource]); 16 | var locations = require('example-cities'); 17 | 18 | var App = React.createClass({ 19 | 20 | displayName: 'App', 21 | 22 | getInitialState: function getInitialState() { 23 | return { 24 | viewport: { 25 | width: window.innerWidth, 26 | height: window.innerHeight, 27 | latitude: 0, 28 | longitude: 0, 29 | mapStyle: Immutable.fromJS(mapStyle), 30 | zoom: 1, 31 | isDragging: false 32 | } 33 | }; 34 | }, 35 | 36 | componentDidMount: function componentDidMount() { 37 | window.addEventListener('resize', function onResize() { 38 | this.setState({ 39 | viewport: assign({}, this.state.viewport, { 40 | width: window.innerWidth, 41 | height: window.innerHeight 42 | }) 43 | }); 44 | }.bind(this)); 45 | }, 46 | 47 | _onChangeViewport: function _onChangeViewport(viewport) { 48 | this.setState({viewport: assign({}, this.state.viewport, viewport)}); 49 | }, 50 | 51 | render: function render() { 52 | return r.div([ 53 | r(MapGL, assign({}, this.state.viewport, { 54 | onChangeViewport: this._onChangeViewport 55 | }), [ 56 | r(Overlay, assign({}, this.state.viewport, {locations: locations})) 57 | ]), 58 | r(Attribution) 59 | ]); 60 | } 61 | }); 62 | document.body.style.margin = 0; 63 | var reactContainer = document.createElement('div'); 64 | document.body.appendChild(reactContainer); 65 | ReactDOM.render(r(App), reactContainer); 66 | --------------------------------------------------------------------------------