-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #71 from nachtm/mapbox
Add slippy tiles
- Loading branch information
Showing
8 changed files
with
3,161 additions
and
2,427 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import React, { Component, createRef } from 'react'; | ||
| import 'mapbox-gl/dist/mapbox-gl.css'; | ||
| import mapboxgl from 'mapbox-gl'; | ||
|
|
||
| import bbox from "@turf/bbox"; | ||
| import transformScale from "@turf/transform-scale"; | ||
| import bboxPolygon from "@turf/bbox-polygon"; | ||
| import {multiPoint} from "@turf/helpers"; | ||
| import square from "@turf/square"; | ||
|
|
||
| import {withStyles} from '@material-ui/core'; | ||
|
|
||
| const styles = () => ({ | ||
| map: { | ||
| height: '400px', | ||
| width: '400px' | ||
| } | ||
| }); | ||
|
|
||
| mapboxgl.accessToken = 'pk.eyJ1Ijoic3BhdGlhbGRldiIsImEiOiJjanpoYWFyZTkwaW4xM25vNWs2cWt6NWFqIn0.pjqihTlW7bHAp8bC8SaiNQ'; | ||
| class Map extends Component { | ||
|
|
||
| state = { | ||
| mapboxMapRef: createRef(), | ||
| map: null | ||
| }; | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
| } | ||
|
|
||
| getLooseBounds = (bounds, scale) => { | ||
| return bbox(transformScale(bboxPolygon(square(bbox(multiPoint(bounds)))), scale)); | ||
| }; | ||
|
|
||
| componentDidMount = () => { | ||
| const { mapboxMapRef } = this.state; | ||
| const { style } = this.props; | ||
| const mapBounds = [[-116.3656827, 43.50939634], [-116.0941571, 43.69918141]]; | ||
| const options = { | ||
| container: mapboxMapRef.current, | ||
| style, | ||
| bounds: mapBounds, | ||
| maxBounds: this.getLooseBounds(mapBounds, 1.25), | ||
| }; | ||
| const map = new mapboxgl.Map(options); | ||
| this.setState({map}); | ||
| }; | ||
|
|
||
| componentDidUpdate = (prevProps, prevState) => { | ||
| const {maxBounds: prevMaxBounds, style: prevStyle } = prevProps; | ||
| const {maxBounds: currMaxBounds, style: currStyle } = this.props; | ||
| const {map} = this.state; | ||
| if (JSON.stringify(prevMaxBounds) !== JSON.stringify(currMaxBounds)) { | ||
| // Since we're re-using a map and div container, we need to re-size between loads to ensure that it gets the | ||
| // size of its new container. | ||
| map.resize(); | ||
|
|
||
| // Before we can fly to a new location, we need to allow the camera to move | ||
| map.setMaxBounds(null); | ||
| map.fitBounds(currMaxBounds, {animate: false, padding: 10}); | ||
| // Once we've moved, we can set the new panning bounds | ||
| map.setMaxBounds(this.getLooseBounds(currMaxBounds, 2)); | ||
| } | ||
| if (prevStyle !== currStyle) | ||
| { | ||
| map.setStyle(currStyle); | ||
| } | ||
| }; | ||
|
|
||
| render = () => { | ||
| const { classes } = this.props; | ||
| const { mapboxMapRef } = this.state; | ||
| return <div ref={mapboxMapRef} className={classes.map}/>; | ||
| }; | ||
| } | ||
|
|
||
| export default withStyles(styles)(Map); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,22 @@ | ||
| import React from 'react'; | ||
|
|
||
| const MapLegend = () => { | ||
| return (<div className='horizontalLegend'> | ||
| <div className='horizontalLegend-scale'> | ||
| <p>Map Errors</p> | ||
| <ul className='horizontalLegend-labels'> | ||
| <li><span style={{ background: '#ffffb2', opacity: 0.62 }}/>Low</li> | ||
| <li><span style={{ background: '#fd8d3c', opacity: 0.62 }}/>Medium</li> | ||
| <li><span style={{ background: '#bd0026', opacity: 0.62 }}/>High</li> | ||
| </ul> | ||
| </div> | ||
| </div>); | ||
| return <svg width="400" height="45"> | ||
| <defs> | ||
| <linearGradient id="gradient" x1="0%" y1="100%" x2="100%" y2="100%" spreadMethod="pad"> | ||
| <stop offset="0%" stopColor="#f7f0ed" stopOpacity="1"/> | ||
| <stop offset="50%" stopColor="#f2ac9b" stopOpacity="1"/> | ||
| <stop offset="100%" stopColor="#e3645b" stopOpacity="1"/> | ||
| </linearGradient> | ||
| </defs> | ||
| <rect width="200" height="15" transform="translate(0,0)" style={{fill: "url(\"#gradient\")"}}/> | ||
| <g className="y axis" transform="translate(0,30)"> | ||
| <text y="-2" x="0">Low</text> | ||
| </g> | ||
| <g className="y axis" transform="translate(0,30)"> | ||
| <text y="-2" x="174">High</text> | ||
| </g> | ||
| </svg> | ||
| }; | ||
|
|
||
| export default MapLegend; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import React, { Component } from 'react'; | ||
|
|
||
| class Reparentable extends Component { | ||
| ref = React.createRef(); | ||
|
|
||
| componentDidMount() { | ||
| const { el } = this.props; | ||
| if (this.ref.current) { | ||
| this.ref.current.appendChild(el); | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| return <div ref={this.ref}/>; | ||
| } | ||
| } | ||
|
|
||
| export default Reparentable; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import {createContext} from 'react'; | ||
|
|
||
| const MapContext = createContext(null); | ||
|
|
||
| export default MapContext; |