1. import React, { Component } from 'react'
  2. import PropTypes from 'prop-types'
  3. import { BasemapThumbnail, Label, BasemapSliderContainer, BasemapOption } from './styled'
  4. import { stamenTerrain, osm, stamenTonerDark, stamenTonerLite } from './thumbnails'
  5. import OpenStreetMap from './OpenStreetMap'
  6. import BlankWhite from './BlankWhite'
  7. import StamenTerrain from './StamenTerrain'
  8. import StamenTonerDark from './StamenTonerDark'
  9. import StamenTonerLite from './StamenTonerLite'
  10. import { connectToContext } from 'Provider'
  12. /**
  13.  * A floating basemap selector that slides options up to toggle basemap
  14.  * @component
  15.  * @category Basemap
  16.  * @since 0.7.0
  17.  */
  18. class BasemapContainer extends Component {
  19.   constructor (props) {
  20.     super(props)
  22.     this.state = {
  23.       showBasemaps: false,
  24.       basemapOptions: props.basemapOptions
  25.     }
  26.   }
  28.   hideBasemaps = () => {
  29.     this.setState({ showBasemaps: false })
  30.   }
  32.   componentDidUpdate (_, prevState) {
  33.     if (prevState.showBasemaps !== this.state.showBasemaps && this.state.showBasemaps === true) {
  34.       this.props.map.on('click', this.hideBasemaps)
  35.     } else {
  36.       this.props.map.un('click', this.hideBasemaps)
  37.     }
  38.   }
  40.   onBasemapChanged = (layer) => {
  41.     const { layerTypeID } = this.props
  42.     const clonedBasemapOptions = [...this.state.basemapOptions]
  43.     const newBasemap = clonedBasemapOptions.find(basemap => basemap.key === layer.get(layerTypeID))
  44.     const newIndexOfBasemap = clonedBasemapOptions.indexOf(newBasemap)
  45.     const selectedBasemap = clonedBasemapOptions.splice(newIndexOfBasemap, 1)
  47.     this.setState({ showBasemaps: false, basemapOptions: [...selectedBasemap, ...clonedBasemapOptions] })
  48.   }
  50.   render () {
  51.     const { showBasemaps, basemapOptions } = this.state
  52.     const { variation, style, translations } = this.props
  54.     return basemapOptions.map((basemap, i) => {
  55.       const zIndex = basemapOptions.length - i
  56.       const translationKey = (key) => {
  57.         if (key === 'osm') {
  58.           return 'OpenStreetMap'
  59.         } else {
  60.           return key[0].toUpperCase() + key.slice(1)
  61.         }
  62.       }
  64.       if (showBasemaps) {
  65.         return (
  66.           <BasemapSliderContainer
  67.             variation={variation}
  68.             style={style}
  69.             zIndex={zIndex}
  70.             left={0}
  71.             bottom={14 + (i * 90)}
  72.             key={i}>
  73.             {React.cloneElement(basemap, { onBasemapChanged: (layer) => this.onBasemapChanged(layer) })}
  74.           </BasemapSliderContainer>
  75.         )
  76.       } else {
  77.         return (
  78.           <BasemapSliderContainer
  79.             variation={variation}
  80.             style={style}
  81.             zIndex={zIndex}
  82.             onClick={() => this.setState({ showBasemaps: true })}
  83.             key={i}
  84.             noBoxShadow={i !== 0}>
  85.             <BasemapOption>
  86.               <BasemapThumbnail thumbnail={basemap.props.thumbnail} />
  87.               <Label>{translations[`_ol_kit.${translationKey(basemap.key)}.title`]}</Label>
  88.             </BasemapOption>
  89.           </BasemapSliderContainer>
  90.         )
  91.       }
  92.     })
  93.   }
  94. }
  96. BasemapContainer.defaultProps = {
  97.   basemapOptions: [
  98.     <OpenStreetMap key='osm' thumbnail={osm} />,
  99.     <StamenTerrain key='stamenTerrain' thumbnail={stamenTerrain} />,
  100.     <StamenTonerDark key='stamenTonerDark' thumbnail={stamenTonerDark} />,
  101.     <StamenTonerLite key='stamenTonerLite' thumbnail={stamenTonerLite} />,
  102.     <BlankWhite key='blankWhite' />
  103.   ],
  104.   layerTypeID: '_ol_kit_basemap'
  105. }
  107. BasemapContainer.propTypes = {
  108.   /** array of basemaps i.e. BasemapOpenStreetMap, BasemapStamenTerrain */
  109.   basemapOptions: PropTypes.array,
  110.   /** A unique string or symbol property name that will be set directly on the layer when it is created with a value containing a string identifying the type of basemap layer (e.g. '_ol_kit_basemap': 'osm').  This property should be a shared ID used to identify individual layers as 'basemap' layers. */
  111.   layerTypeID: PropTypes.oneOfType([PropTypes.symbol, PropTypes.string]),
  112.   /** reference to Openlayers map object */
  113.   map: PropTypes.object.isRequired,
  114.   /** apply inline styles to the map container */
  115.   style: PropTypes.object,
  116.   /** object of string key/values (see: locales) */
  117.   translations: PropTypes.shape({
  118.     '_ol_kit.BingMaps.title': PropTypes.string,
  119.     '_ol_kit.BlankWhite.title': PropTypes.string,
  120.     '_ol_kit.OpenStreetMap.title': PropTypes.string,
  121.     '_ol_kit.StamenTerrain.title': PropTypes.string,
  122.     '_ol_kit.StamenTonerDark.title': PropTypes.string,
  123.     '_ol_kit.StamenTonerLite.title': PropTypes.string
  124.   }).isRequired,
  125.   /** light or dark variation for styling */
  126.   variation: PropTypes.string
  127. }
  129. export default connectToContext(BasemapContainer)