1. import React from 'react'
  2. import PropTypes from 'prop-types'
  3. import olLayerVector from 'ol/layer/Vector'
  4. import olSourceVector from 'ol/source/Vector'
  5. import { BasemapOption, BasemapThumbnail, Label } from './styled'
  6. import { connectToContext } from 'Provider'; // eslint-disable-line
  8. /**
  9.  * Blank white basemap option
  10.  * @component
  11.  * @category Basemap
  12.  * @since 0.1.0
  13.  */
  14. class BasemapBlankWhite extends React.Component {
  15.   handleLayersChange = () => {
  16.     this.forceUpdate()
  17.   }
  19.   componentDidMount () {
  20.     this.props.map.getLayers().on('change', this.handleLayersChange)
  21.   }
  23.   componentWillUnmount () {
  24.     this.props.map.getLayers().un('change', this.handleLayersChange)
  25.   }
  27.   onClick = () => {
  28.     const { map, layerTypeID, onBasemapChanged } = this.props
  29.     const layer = new olLayerVector({
  30.       className: '_ol_kit_basemap_layer',
  31.       [layerTypeID]: 'blankWhite', // make sure we can identify this layer as a layer that has been created from the ol-kit basemap component.
  32.       source: new olSourceVector()
  33.     })
  34.     const layers = map.getLayers()
  35.     const layerArray = layers.getArray()
  36.     const hasBasemap = layerTypeID && layerArray.length ? layerArray[0].get(layerTypeID) : false
  38.     if (hasBasemap) {
  39.       layers.setAt(0, layer)
  40.     } else {
  41.       layers.insertAt(0, layer)
  42.     }
  43.     layers.changed() // ol.Collection insertAt and setAt do not trigger a change event so we fire one manually so that we can rerender to display the active and inactive BasemapOptions
  44.     onBasemapChanged(layer)
  45.   }
  47.   render () {
  48.     const { translations, thumbnail, map, layerTypeID } = this.props
  49.     const layerArray = map.getLayers().getArray()
  50.     const isActive = layerArray.length ? layerArray[0].get(layerTypeID) === 'blankWhite' : false
  52.     return (
  53.       <BasemapOption className='_ol_kit_basemapOption' isActive={isActive} onClick={this.onClick}>
  54.         <BasemapThumbnail thumbnail={thumbnail} />
  55.         <Label>{translations['_ol_kit.BlankWhite.title']}</Label>
  56.       </BasemapOption>
  57.     )
  58.   }
  59. }
  61. BasemapBlankWhite.propTypes = {
  62.   /** reference to Openlayers map object */
  63.   map: PropTypes.object.isRequired,
  64.   /** Object with key/value pairs for translated strings */
  65.   translations: PropTypes.shape({
  66.     '_ol_kit.BlankWhite.title': PropTypes.string
  67.   }),
  68.   /** A string containing an http url or data url to a thumbnail image */
  69.   thumbnail: PropTypes.string,
  70.   /** 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.  */
  71.   layerTypeID: PropTypes.oneOfType([PropTypes.symbol, PropTypes.string]),
  72.   /** A callback that is fired when the basemap layer has been changed.  It is called with the updated layer. */
  73.   onBasemapChanged: PropTypes.func
  74. }
  76. BasemapBlankWhite.defaultProps = {
  77.   thumbnail: '',
  78.   onBasemapChanged: () => {},
  79.   layerTypeID: '_ol_kit_basemap'
  80. }
  82. export default connectToContext(BasemapBlankWhite)