-
(this.mapContainer = el)}
- className={classes.map}
- />
- {this.state.lngLat &&
}
-
- )
- }
-
- centerMap (geojson) {
- this.map.fitBounds(getBoundsOrWorld(geojson), {padding: 15, duration: 0})
- if (this.map.getZoom() > 13) {
- this.map.setZoom(13)
- }
- }
-
- // The first time our component mounts, render a new map into `mapDiv`
- // with settings from props.
- componentDidMount () {
- const { center, interactive, mapStyle, zoom, mapControls } = this.props
-
- const mapDiv = document.createElement('div')
- mapDiv.style.height = '100%'
- mapDiv.style.width = '100%'
- this.mapContainer.appendChild(mapDiv)
-
- const map = window.map = this.map = new mapboxgl.Map({
- style: mapStyle,
- container: mapDiv,
- center: center || [0, 0],
- zoom: zoom || 0
- })
- map._prevStyle = mapStyle
-
- if (!interactive) {
- map.scrollZoom.disable()
- }
-
- // Add zoom and rotation controls to the map.
- map.addControl(new mapboxgl.NavigationControl())
- map.dragRotate.disable()
- map.touchZoomRotate.disableRotation()
-
- this.geojson = this.getGeoJson(this.props)
-
- map.once('load', () => {
- if (interactive) {
- map.on('click', this.handleMapClick)
- map.on('mousemove', this.handleMouseMove)
- }
- map.on('moveend', this.handleMapMoveOrZoom)
- this.setupLayers(this.props)
- })
- map.once('style.load', () => {
- mapControls.forEach(function (control) {
- map.addControl.bind(map)(control)
- })
+ addLayers = memoize((style, showLabels) => {
+ const layers = showLabels ? [pointStyleLayer, labelStyleLayer] : [pointStyleLayer]
+ log('Adding layers to base style:', layers.map(l => l.id))
+ return assign({}, style, {
+ layers: style.layers.concat(layers)
})
+ })
- // If no map center or zoom passed, set map extent to extent of marker layer
- if (!center || !zoom) {
- this.centerMap(this.geojson)
- }
- }
-
- componentWillReceiveProps (nextProps) {
- this.updateIfNeeded(nextProps, this.props)
- }
-
- componentWillUnmount () {
- this.map.off('moveend', this.handleMapMoveOrZoom)
- this.map.off('click', this.handleMapClick)
- this.map.off('mousemove', this.handleMouseMove)
- this.map.remove()
- }
-
- setupLayers (props) {
- const {filter, labelPoints} = props
- this.map.addSource('features', {type: 'geojson', data: this.geojson})
- // TODO: Should choose style based on whether features are point, line or polygon
- this.map.addSource('hover', {type: 'geojson', data: emptyGeoJson})
- this.map.addLayer(pointStyleLayer)
- this.map.addLayer(pointHoverStyleLayer)
- this.map.addLayer(labelStyleLayer)
- this.map.setFilter('points', filter)
- this.map.setFilter('labels', filter)
- if (labelPoints) {
- this.map.setLayoutProperty('labels', 'text-field', '{__mf_label}')
- this.map.setPaintProperty('points', 'circle-radius', 7)
- }
- }
-
- updateIfNeeded (nextProps, props = {}) {
- const {disableScrollToZoom} = props
-
- if (this.map._prevStyle !== nextProps.mapStyle) {
- log('updating style')
- this._styleDirty = true
- this.map.setStyle(nextProps.mapStyle)
- this.map._prevStyle = nextProps.mapStyle
- this.map.once('style.load', () => {
- this.setupLayers(nextProps)
- this._styleDirty = false
- if (!this.map._loaded) return
- this.map.fire('load')
+ addSource = memoize((style, data) => {
+ log('Adding GeoJSON source to base style')
+ return assign({}, style, {
+ sources: assign({}, style.sources, {
+ features: {
+ type: 'geojson',
+ data: data
+ }
})
- }
-
- var shouldMapZoom = this.map.getZoom() !== nextProps.zoom
- var shouldMapMove = !deepEqual(this.map.getCenter().toArray(), nextProps.center)
-
- if (shouldMapZoom || shouldMapMove) {
- this.map.flyTo({center: nextProps.center, zoom: nextProps.zoom}, {internal: true})
- }
-
- let shouldDataUpdate = nextProps.features !== props.features ||
- nextProps.fieldMapping !== props.fieldMapping ||
- nextProps.colorIndex !== props.colorIndex ||
- (nextProps.filter !== props.filter && props.labelPoints)
-
- this.ready(() => {
- if (shouldDataUpdate) {
- this.geojson = this.getGeoJson(nextProps)
-
- log('updating source', this.geojson)
- this.map.getSource('features').setData(this.geojson)
-
- this.centerMap(this.geojson)
- }
-
- this.updateFilterIfNeeded(nextProps.filter)
-
- if (disableScrollToZoom !== nextProps.disableScrollToZoom) {
- nextProps.disableScrollToZoom ? this.map.scrollZoom.disable() : this.map.scrollZoom.enable()
- }
-
- const textField = nextProps.labelPoints ? '{__mf_label}' : ''
-
- if (this.map.getLayoutProperty('labels', 'text-field') !== textField) {
- log('updating labels "' + textField + '"')
- this.map.setLayoutProperty('labels', 'text-field', textField)
- }
})
- }
-
- /**
- * Moves the map to a new position if it is different from the current position
- * @param {array} center new coordinates for center of map
- * @param {number} zoom new zoom level for map
- * @return {boolean} true if map has moved, otherwise false
- */
- moveIfNeeded (center, zoom) {
- const currentPosition = {
- center: this.map.getCenter().toArray(),
- zoom: this.map.getZoom()
- }
- const newMapPosition = {
- center,
- zoom
- }
- const shouldMapMove = center && zoom &&
- !deepEqual(currentPosition, newMapPosition)
- if (shouldMapMove) {
- log('Moving map')
- this.map.jumpTo(newMapPosition)
- return true
- }
- return false
- }
-
- updateFilterIfNeeded (filter) {
- if (filter !== this.props.filter && filter) {
- log('updating filter')
- this.map.setFilter('points', filter)
- this.map.setFilter('labels', filter)
- }
- }
+ })
- // Construct GeoJSON for map
- getGeoJson ({features = [], fieldMapping = {}, colorIndex = {}, filter = []}) {
- let i = 0
+ getGeoJson = memoize((
+ features = [],
+ fieldMapping = {},
+ colorIndex = {},
+ filter = []
+ ) => {
+ log('Updating GeoJSON with current filter')
const ff = featureFilter(filter)
return {
type: 'FeatureCollection',
features: features
- .filter(f => f.geometry)
- .map(f => {
+ .filter(f => f.geometry && ff(f))
+ .map((f, i) => {
+ const colorValue = f.properties[fieldMapping.color] ||
+ f.properties[fieldMapping.color + '.0']
const newFeature = {
+ // Mapbox-gl still (2019-01-22) does not support string ids,
+ // so we need to generate an id here and save the real is to props
+ id: i,
type: 'feature',
geometry: f.geometry,
properties: assign({}, f.properties, {
__mf_id: f.id,
- __mf_color: colorIndex[f.properties[fieldMapping.color] || f.properties[fieldMapping.color + '.0']]
+ __mf_color: colorIndex[colorValue],
+ __mf_label: LABEL_CHARS.charAt(i)
})
}
- if (ff(f)) newFeature.properties.__mf_label = config.labelChars.charAt(i++)
return newFeature
})
}
+ })
+
+ onViewStateChange = ({viewState, interactionState, oldViewState}) => {
+ console.log('nextvp', viewState, interactionState, oldViewState)
+ const { viewport, moveMap } = this.props
+ const propsSpecifyMapLocation = viewport && typeof viewport.longitude === 'number'
+ if (propsSpecifyMapLocation) return moveMap(viewState)
+ // If the props for viewport are not set, zoom to bounds of data
+ const fittedViewport = new WebMercatorViewport(viewState)
+ const {longitude, latitude, zoom} = fittedViewport.fitBounds(
+ getBoundsOrWorld(this.props.features),
+ {padding: 15}
+ )
+ log('viewport not set on props, zooming to bounding box:', longitude, latitude, zoom)
+ moveMap(assign({}, viewState, {
+ longitude,
+ latitude,
+ zoom
+ }))
+ }
+
+ onHover = event => {
+ if (!this.props.interactive) return
+ // The more declarative way of doing this would be to set a new style on
+ // every render of the map if hoverId changes, but we use map feature state
+ // for performance reasons here
+ const map = this.mapRef.current.getMap()
+ const hoveredId = event.features.length ? event.features[0].id : null
+ if (hoveredId !== this.state.hoveredId) {
+ if (hoveredId) log('Hover of feature id:', event.features[0].properties.__mf_id)
+ map.setFeatureState({source: 'features', id: hoveredId}, { hover: true })
+ map.setFeatureState({source: 'features', id: this.state.hoveredId}, { hover: false })
+ this.setState({hoveredId})
+ }
+ }
+
+ onClick = event => {
+ if (!this.props.interactive) return
+ if (!event.features.length) return log('Click detected but no feature')
+ log('Clicked feature id:', event.features[0].properties.__mf_id)
+ this.props.showFeatureDetail(event.features[0].properties.__mf_id)
+ }
+
+ getCursor = ({isHovering, isDragging}) => {
+ if (isDragging) return 'grabbing'
+ if (isHovering && this.props.interactive) return 'pointer'
+ return 'grab'
+ }
+
+ render () {
+ const { features, fieldMapping, colorIndex, filter,
+ labelPoints, mapStyle, mapboxToken, classes, viewport } = this.props
+ const { hoveredId } = this.state
+ return
+ {(error, mapStyle) => {
+ if (error) return {error.text}
+ if (!mapStyle) return null // TODO: show loading indicator
+ const geojson = this.getGeoJson(features, fieldMapping, colorIndex, filter)
+ const styleWithLayers = this.addLayers(mapStyle, labelPoints)
+ const styleWithData = this.addSource(styleWithLayers, geojson)
+ const hoveredFeature = hoveredId !== null && geojson.features[hoveredId]
+ console.log(viewport)
+ return
+
+
+
+ {hoveredFeature &&
+
+ }
+
+ }}
+
}
}
diff --git a/src/components/MapView/Popup.js b/src/components/MapView/Popup.js
deleted file mode 100644
index e196990..0000000
--- a/src/components/MapView/Popup.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import React from 'react'
-import {compose} from 'redux'
-import {connect} from 'react-redux'
-import Typography from '@material-ui/core/Typography'
-import { withStyles } from '@material-ui/core/styles'
-import classNames from 'classnames'
-
-import Image from '../Image'
-import FormattedValue from '../Shared/FormattedValue'
-import getFeaturesById from '../../selectors/features_by_id'
-import getFieldMapping from '../../selectors/field_mapping'
-import getColorIndex from '../../selectors/color_index'
-import getFieldAnalysis from '../../selectors/field_analysis'
-
-const styles = {
- wrapper: {
- width: 200,
- padding: 0,
- backgroundColor: 'black',
- cursor: 'pointer',
- position: 'absolute',
- willChange: 'transform',
- top: 0,
- left: 0,
- pointerEvents: 'none'
- },
- wrapperImage: {
- height: 200
- },
- image: {
- width: 200,
- height: 200,
- objectFit: 'cover',
- display: 'block',
- background: '#000000'
- },
- titleBox: {
- position: 'absolute',
- bottom: 0,
- width: '100%',
- backgroundColor: 'rgba(0,0,0,0.5)',
- color: 'white',
- padding: '0.25em 0.5em',
- boxSizing: 'border-box'
- },
- title: {
- color: 'white'
- },
- subheading: {
- color: 'white'
- }
-}
-
-class Popup extends React.Component {
- static defaultProps = {
- offset: {
- x: 0,
- y: 0
- }
- }
- constructor (props) {
- super(props)
- this.map = props.map
- }
-
- state = {}
-
- update = (lngLat) => {
- if (!Array.isArray(lngLat) || lngLat.length !== 2) lngLat = this.props.lngLat
- const w = this._el.offsetWidth
- const h = this._el.offsetHeight
- this.setState({
- transform: getPopupTransform(this.map, lngLat, w, h, this.props.offset)
- })
- }
-
- componentDidMount () {
- const {lngLat} = this.props
- this.map.on('move', this.update)
- this.update(lngLat)
- }
-
- componentWillReceiveProps ({lngLat}) {
- this.update(lngLat)
- }
-
- componentWillUnmount () {
- this.map.off('move', this.update)
- }
-
- render () {
- const {media, title, subtitle, classes, titleType, subtitleType} = this.props
- const {transform} = this.state
-
- return
(this._el = el)}>
- {media &&
}
-
- {title &&
-
- }
- {subtitle &&
-
- }
-
-
- }
-}
-
-function getPopupTransform (map, lngLat, width, height, offset = {x: 0, y: 0}) {
- const pos = map.project(lngLat).round()
- let anchor
-
- if (pos.y < height) {
- anchor = 'top'
- } else {
- anchor = 'bottom'
- }
-
- if (pos.x > map.transform.width - width) {
- anchor += '-right'
- } else {
- anchor += '-left'
- }
-
- const anchorTranslate = {
- 'top-left': 'translate(0,0)',
- 'top-right': 'translate(-100%,0)',
- 'bottom-left': 'translate(0,-100%)',
- 'bottom-right': 'translate(-100%,-100%)'
- }
-
- return `${anchorTranslate[anchor]} translate(${pos.x + offset.x}px,${pos.y + offset.y}px)`
-}
-
-const mapStateToProps = (state, ownProps) => {
- const featuresById = getFeaturesById(state)
- const colorIndex = getColorIndex(state)
- const fieldMapping = getFieldMapping(state)
- const feature = featuresById[ownProps.id]
- if (!feature) return {}
- const geojsonProps = feature.properties
- const fieldAnalysisProps = getFieldAnalysis(state).properties
- return {
- media: geojsonProps[fieldMapping.media],
- title: geojsonProps[fieldMapping.title],
- subtitle: geojsonProps[fieldMapping.subtitle],
- color: colorIndex[geojsonProps[fieldMapping.color]],
- titleType: fieldAnalysisProps[fieldMapping.title] && fieldAnalysisProps[fieldMapping.title].type,
- subtitleType: fieldAnalysisProps[fieldMapping.subtitle] && fieldAnalysisProps[fieldMapping.subtitle].type
- }
-}
-
-export default compose(
- connect(mapStateToProps),
- withStyles(styles)
-)(Popup)
diff --git a/src/components/MapView/PopupContent.js b/src/components/MapView/PopupContent.js
new file mode 100644
index 0000000..9bba332
--- /dev/null
+++ b/src/components/MapView/PopupContent.js
@@ -0,0 +1,84 @@
+import React from 'react'
+import {compose} from 'redux'
+import {connect} from 'react-redux'
+import Typography from '@material-ui/core/Typography'
+import { withStyles } from '@material-ui/core/styles'
+import classNames from 'classnames'
+
+import Image from '../Image'
+import FormattedValue from '../Shared/FormattedValue'
+import getFeaturesById from '../../selectors/features_by_id'
+import getFieldMapping from '../../selectors/field_mapping'
+import getFieldAnalysis from '../../selectors/field_analysis'
+
+const styles = {
+ wrapper: {
+ width: 200,
+ padding: 0,
+ backgroundColor: 'black',
+ cursor: 'pointer',
+ position: 'relative',
+ willChange: 'transform',
+ pointerEvents: 'none'
+ },
+ wrapperImage: {
+ height: 200
+ },
+ image: {
+ width: 200,
+ height: 200,
+ objectFit: 'cover',
+ display: 'block',
+ background: '#000000'
+ },
+ titleBox: {
+ position: 'absolute',
+ bottom: 0,
+ width: '100%',
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ color: 'white',
+ padding: '0.25em 0.5em',
+ boxSizing: 'border-box'
+ },
+ title: {
+ color: 'white'
+ },
+ subheading: {
+ color: 'white'
+ }
+}
+
+const PopupContent = ({media, title, subtitle, classes, titleType, subtitleType}) => (
+
+ {media &&
}
+
+ {title &&
+
+ }
+ {subtitle &&
+
+ }
+
+
+)
+
+const mapStateToProps = (state, ownProps) => {
+ const featuresById = getFeaturesById(state)
+ const fieldMapping = getFieldMapping(state)
+ const feature = featuresById[ownProps.id]
+ if (!feature) return {}
+ const geojsonProps = feature.properties
+ const fieldAnalysisProps = getFieldAnalysis(state).properties
+ return {
+ media: geojsonProps[fieldMapping.media],
+ title: geojsonProps[fieldMapping.title],
+ subtitle: geojsonProps[fieldMapping.subtitle],
+ titleType: fieldAnalysisProps[fieldMapping.title] && fieldAnalysisProps[fieldMapping.title].type,
+ subtitleType: fieldAnalysisProps[fieldMapping.subtitle] && fieldAnalysisProps[fieldMapping.subtitle].type
+ }
+}
+
+export default compose(
+ connect(mapStateToProps),
+ withStyles(styles)
+)(PopupContent)
diff --git a/src/components/ReportView/ReportView.js b/src/components/ReportView/ReportView.js
index a626397..acc10a6 100644
--- a/src/components/ReportView/ReportView.js
+++ b/src/components/ReportView/ReportView.js
@@ -183,11 +183,12 @@ class ReportView extends React.Component {
})
}
- memoizedSlice = memoize((arr, begin, end) => arr.slice(begin, end))
+ memoizedSlice = memoize((arr, start, end) => arr.slice(start, end))
render () {
const { filteredFeatures, featuresById, showFeatureDetail, fieldAnalysis, classes, requestPrint, paperSize, viewState } = this.props
const featuresSlice = this.memoizedSlice(filteredFeatures, 0, MAX_REPORT_LEN)
+ console.log('report render')
return (
-
+
{actionButton && {createElement(actionButton)}
}
diff --git a/src/containers/MapFilter.js b/src/containers/MapFilter.js
index 77d2f21..7c3717d 100644
--- a/src/containers/MapFilter.js
+++ b/src/containers/MapFilter.js
@@ -70,7 +70,7 @@ const controllableProps = [
'filters',
'filterFields',
'features',
- 'mapPosition',
+ 'mapViewState',
'mapStyle',
'fieldTypes',
'fieldOrder',
@@ -202,15 +202,6 @@ class MapFilter extends React.Component {
viewToolbarButtons: PropTypes.arrayOf(PropTypes.shape({
MfViewId: PropTypes.string.isRequired,
button: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
- })),
- /**
- * An array of controls to add to the map. Each control should implement
- * the IControl interface of mapbox-gl-js https://www.mapbox.com/mapbox-gl-js/api/#icontrol
- * To set the position of the control, add a `getDefaultPosition()` method.
- */
- mapControls: PropTypes.arrayOf(PropTypes.shape({
- onAdd: PropTypes.func.isRequired,
- onRemove: PropTypes.func.isRequired
}))
}
@@ -242,6 +233,9 @@ class MapFilter extends React.Component {
persistStore(this.store, assign({}, reduxPersistOptions, {
keyPrefix: 'reduxPersist:' + props.datasetName + ':'
}))
+ if (props.mapStyle.startsWith('mapbox:') && !props.mapboxToken) {
+ console.warn('To use a Mapbox style you must pass a mapboxToken prop')
+ }
}
componentWillReceiveProps (nextProps) {
@@ -251,11 +245,26 @@ class MapFilter extends React.Component {
}
render () {
- const {actionButton, detailViewButtons, views, appBarButtons, appBarMenuItems, appBarTitle, locale, mapControls} = this.props
+ const {
+ actionButton,
+ detailViewButtons,
+ mapboxToken,
+ views,
+ appBarButtons,
+ appBarMenuItems,
+ appBarTitle,
+ locale
+ } = this.props
return
-
+
}
diff --git a/src/containers/ViewContainer.js b/src/containers/ViewContainer.js
index cc7f75b..eda6980 100644
--- a/src/containers/ViewContainer.js
+++ b/src/containers/ViewContainer.js
@@ -28,8 +28,6 @@ function mapStateToProps (state, ownProps) {
viewState: state.viewStates[component.MfViewId],
willPrint: state.print.willPrint,
paperSize: state.print.paperSize,
- center: state.mapPosition.center,
- zoom: state.mapPosition.zoom,
mapStyle: state.mapStyle,
settings: state.settings,
features: getFilterableFeatures(state),
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 4c10b12..49be409 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -4,7 +4,7 @@ import {intlReducer} from 'react-intl-redux'
import features from './features'
import filters from './filters'
import filterFields from './filter_fields'
-import mapPosition from './map_position'
+import mapViewState from './map_view_state'
import mapStyle from './map_style'
import ui from './ui'
import fieldMapping from './field_mapping'
@@ -19,7 +19,7 @@ export default combineReducers({
features,
filters,
filterFields,
- mapPosition,
+ mapViewState,
mapStyle,
ui,
print,
diff --git a/src/reducers/map_position.js b/src/reducers/map_view_state.js
similarity index 69%
rename from src/reducers/map_position.js
rename to src/reducers/map_view_state.js
index 48c5d3e..d19c187 100644
--- a/src/reducers/map_position.js
+++ b/src/reducers/map_view_state.js
@@ -1,6 +1,6 @@
import assign from 'object-assign'
-const mapPosition = (state = {}, action) => {
+const mapViewState = (state = {}, action) => {
switch (action.type) {
case 'MOVE_MAP':
return assign({}, state, action.payload)
@@ -9,4 +9,4 @@ const mapPosition = (state = {}, action) => {
}
}
-export default mapPosition
+export default mapViewState
diff --git a/src/util/map_helpers.js b/src/util/map_helpers.js
index b1fead1..2fbe031 100644
--- a/src/util/map_helpers.js
+++ b/src/util/map_helpers.js
@@ -2,22 +2,23 @@ import extent from 'turf-extent'
/**
* @private
- * For a given geojson FeatureCollection, return the geographic bounds.
+ * For a given an array of geojson Features, return the geographic bounds.
* For a missing or invalid FeatureCollection, return the bounds for
* the whole world.
- * @param {object} fc Geojson FeatureCollection
- * @return {array} Bounds in format `[minLng, minLat, maxLng, maxLat]``
+ * @param {array} features Array of GeoJson Features
+ * @return {array} Bounds in format `[[minLng, minLat], [maxLng, maxLat]]``
*/
-export function getBoundsOrWorld (fc) {
+export function getBoundsOrWorld (features) {
// If we don't have data, default to the extent of the whole world
// NB. Web mercator goes to infinity at lat 90! Use lat 85.
- if (!fc || !fc.features || !fc.features.length) {
- return [-180, -85, 180, 85]
+ if (!features || !features.length) {
+ return [[-180, -85], [180, 85]]
}
- return extent({
+ const [minLng, minLat, maxLng, maxLat] = extent({
type: 'FeatureCollection',
- features: fc.features.filter(f => f.geometry)
+ features: features.filter(f => f.geometry)
})
+ return [[minLng, minLat], [maxLng, maxLat]]
}
/**
diff --git a/src/util/mapbox.js b/src/util/mapbox.js
new file mode 100644
index 0000000..6697813
--- /dev/null
+++ b/src/util/mapbox.js
@@ -0,0 +1,53 @@
+// Code from https://github.com/mapbox/mapbox-gl-js/blob/master/src/util/mapbox.js
+
+const urlRe = /^(\w+):\/\/([^/?]*)(\/[^?]+)?\??(.+)?/
+const MAPBOX_API_URL = 'https://api.mapbox.com'
+
+export const normalizeStyleURL = function (url, accessToken) {
+ if (!isMapboxURL(url)) return url
+ const urlObject = parseUrl(url)
+ urlObject.path = `/styles/v1${urlObject.path}`
+ return makeAPIURL(urlObject, accessToken)
+}
+
+function isMapboxURL (url) {
+ return url.indexOf('mapbox:') === 0
+}
+
+function makeAPIURL (urlObject, accessToken) {
+ const apiUrlObject = parseUrl(MAPBOX_API_URL)
+ urlObject.protocol = apiUrlObject.protocol
+ urlObject.authority = apiUrlObject.authority
+
+ if (apiUrlObject.path !== '/') {
+ urlObject.path = `${apiUrlObject.path}${urlObject.path}`
+ }
+
+ if (!accessToken) {
+ throw new Error(`An API access token is required to use Mapbox GL.`)
+ }
+ if (accessToken[0] === 's') {
+ throw new Error(`Use a public access token (pk.*) with Mapbox GL, not a secret access token (sk.*). ${help}`)
+ }
+
+ urlObject.params.push(`access_token=${accessToken}`)
+ return formatUrl(urlObject)
+}
+
+function parseUrl (url) {
+ const parts = url.match(urlRe)
+ if (!parts) {
+ throw new Error('Unable to parse URL object')
+ }
+ return {
+ protocol: parts[1],
+ authority: parts[2],
+ path: parts[3] || '/',
+ params: parts[4] ? parts[4].split('&') : []
+ }
+}
+
+function formatUrl (obj) {
+ const params = obj.params.length ? `?${obj.params.join('&')}` : ''
+ return `${obj.protocol}://${obj.authority}${obj.path}${params}`
+}