<commit_before>import React, { Component } from 'react'
import style from './style.css'
import glStyles from './glstyles'
import Swiper from './swiper'
import GapsFilterButton from '../FilterButton/gaps.js'
import SearchBox from '../SearchBox'
import GapsLegend from '../Legend/gaps.js'
import ThresholdSelector from '../ThresholdSelector'
import DropdownButton from '../DropdownButton'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as MapActions from '../../actions/map'
import { bboxPolygon, area, erase } from 'turf'
import { debounce } from 'lodash'
import regionToCoords from './regionToCoords'
import themes from '../../settings/themes'
import settings from '../../settings/settings'
import { gapsFilters } from '../../settings/options'
import GapsLayer from './gapsLayer.js'

// leaflet plugins
import * as _leafletmapboxgljs from '../../libs/leaflet-mapbox-gl.js'
import * as _leafleteditable from '../../libs/Leaflet.Editable.js'

var map // Leaflet map object
var backgroundLayer
var gapsLayer
var glLayer // mapbox-gl layer
var boundsLayer = null // selected region layer
var moveDirectly = false

var backgrounds = [
  {
    id: 'default',
    description: 'plain base map',
    url: settings['map-background-tile-layer']
  },
  {
    id: 'mapbox-satellite',
    description: 'satellite imagery (mapbox)',
    url: 'https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=<KEY>'
  },
  {
    id: 'esri-satellite',
    description: 'satellite imagery (esri)',
    url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
  },
  {
    id: 'osm',
    description: 'openstreetmap.org',
    url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
  },
  {
    id: 'worldpop',
    description: 'worldpop.org.uk',
    url: 'http://maps.worldpop.org.uk/tilesets/wp-global-100m-ppp-2010-adj/{z}/{x}/{y}.png'
  }
]



class GapsMap extends Component {
  state = {}

  changeBackground(newLayer) {
    backgroundLayer.setUrl(backgrounds.find(bg => bg.id === newLayer[0]).url)
  }

  render() {
    const { view, actions, embed, theme } = this.props
    const containerClassName = (embed === false) ? `${view}View` : '';

    var btn = <button className='background-selector' style={{position: 'absolute', top: '122px', right: '25px'}} title='Select Background Layer'>background map&ensp;▾</button>

    return (
      <div className={containerClassName}>
        <div id="map" style={embed ? { bottom: 30 } : {}}>
        </div>
        {false ? <Swiper onMoved={::this.swiperMoved} theme={themes[theme]} /> : ""}

        {embed === false && <div>
          <SearchBox className="searchbox" selectedRegion={this.props.map.region} {...actions}/>
          <span className="search-alternative">or</span>
          <button className="outline" onClick={::this.setViewportRegion}>Outline Custom Area</button>
          <GapsFilterButton enabledFilters={this.props.map.filters} {...actions}/>
          <DropdownButton
            options={backgrounds}
            btnElement={btn}
            multiple={false}
            selectedKeys={[]}
            onSelectionChange={::this.changeBackground}
          />
        </div>}

        <GapsLegend
          featureType={this.props.map.filters[0]}
          zoom={this.state.mapZoomLevel}
          layer={gapsFilters.find(filter => filter.id === this.props.map.filters[0])}
          theme={theme}
        />
        <ThresholdSelector
          min="1"
          max="50000"
          defaultThreshold="10000"
          thresholdChanged={::this.setThreshold}
          theme={theme}
        />
      </div>
    )
  }

  componentDidMount() {
    const { theme, embed } = this.props

    map = L.map(
      'map', {
      editable: true,
      minZoom: 2,
      scrollWheelZoom: !embed
    })
    .setView([2, 26], 4)
    map.on('editable:editing', debounce(::this.setCustomRegion, 200))
    map.on('zoomend', (e) => { this.setState({ mapZoomLevel:map.getZoom() }) })

    L.control.scale({ position: 'bottomright' }).addTo(map)
    map.zoomControl.setPosition('bottomright')

    backgroundLayer = L.tileLayer(settings['map-background-tile-layer'], {
      attribution: settings['map-attribution'],
      zIndex: -1
    }).addTo(map)

    gapsLayer = (new GapsLayer({tileSize: 512, maxNativeZoom: 13})).addTo(map);

    // init from route params
    if (this.props.region) {
      moveDirectly = true
      this.mapSetRegion(this.props.map.region, this.props.embed === false, this.props.embed === false)
    }
  }

  componentWillReceiveProps(nextProps) {
    const { theme } = this.props

    // ceck for changed url parameters
    if (nextProps.region !== this.props.region) {
      this.props.actions.setRegionFromUrl(nextProps.region)
    }
    if (nextProps.filters !== this.props.filters) {
      this.props.actions.setFiltersFromUrl(nextProps.filters)
    }
    if (nextProps.overlay !== this.props.overlay) {
      this.props.actions.setOverlayFromUrl(nextProps.overlay)
    }
    if (nextProps.overlay !== this.props.overlay) {
      this.props.actions.setOverlayFromUrl(nextProps.overlay)
    }
    if (nextProps.view !== this.props.view) {
      this.props.actions.setViewFromUrl(nextProps.view)
    }
    if (nextProps.times !== this.props.times) {
      this.props.actions.setTimesFromUrl(nextProps.times)
    }
    // check for changed map parameters<commit_msg>show dedicated attribution for selected background imagery layer in gaps mode<commit_after>import React, { Component } from 'react'
import style from './style.css'
import glStyles from './glstyles'
import Swiper from './swiper'
import GapsFilterButton from '../FilterButton/gaps.js'
import SearchBox from '../SearchBox'
import GapsLegend from '../Legend/gaps.js'
import ThresholdSelector from '../ThresholdSelector'
import DropdownButton from '../DropdownButton'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as MapActions from '../../actions/map'
import { bboxPolygon, area, erase } from 'turf'
import { debounce } from 'lodash'
import regionToCoords from './regionToCoords'
import themes from '../../settings/themes'
import settings from '../../settings/settings'
import { gapsFilters } from '../../settings/options'
import GapsLayer from './gapsLayer.js'

// leaflet plugins
import * as _leafletmapboxgljs from '../../libs/leaflet-mapbox-gl.js'
import * as _leafleteditable from '../../libs/Leaflet.Editable.js'

var map // Leaflet map object
var backgroundLayers
var gapsLayer
var glLayer // mapbox-gl layer
var boundsLayer = null // selected region layer
var moveDirectly = false

var backgrounds = [
  {
    id: 'default',
    description: 'plain base map',
    attribution: settings['map-attribution'],
    url: settings['map-background-tile-layer']
  },
  {
    id: 'mapbox-satellite',
    description: 'satellite imagery (mapbox)',
    attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a>',
    url: 'https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiaG90IiwiYSI6ImNpbmx4bWN6ajAwYTd3OW0ycjh3bTZvc3QifQ.KtikS4sFO95Jm8nyiOR4gQ'
  },
  {
    id: 'esri-satellite',
    description: 'satellite imagery (esri)',
    attribution: '© <a href="https://esri.com">ESRI</a>',
    url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
  },
  {
    id: 'osm',
    description: 'openstreetmap.org',
    attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>',
    url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
  },
  {
    id: 'worldpop',
    description: 'worldpop.org.uk',
    attribution: '© <a href="https://worldpop.org.uk">worldpop.org.uk</a>',
    url: 'http://maps.worldpop.org.uk/tilesets/wp-global-100m-ppp-2010-adj/{z}/{x}/{y}.png'
  }
]



class GapsMap extends Component {
  state = {}

  changeBackground(newLayer) {
    backgroundLayers.forEach(layer => layer.removeFrom(map))
    backgroundLayers.find(layer => layer.options.id === newLayer[0]).addTo(map)
  }

  render() {
    const { view, actions, embed, theme } = this.props
    const containerClassName = (embed === false) ? `${view}View` : '';

    var btn = <button className='background-selector' style={{position: 'absolute', top: '122px', right: '25px'}} title='Select Background Layer'>background map&ensp;▾</button>

    return (
      <div className={containerClassName}>
        <div id="map" style={embed ? { bottom: 30 } : {}}>
        </div>
        {false ? <Swiper onMoved={::this.swiperMoved} theme={themes[theme]} /> : ""}

        {embed === false && <div>
          <SearchBox className="searchbox" selectedRegion={this.props.map.region} {...actions}/>
          <span className="search-alternative">or</span>
          <button className="outline" onClick={::this.setViewportRegion}>Outline Custom Area</button>
          <GapsFilterButton enabledFilters={this.props.map.filters} {...actions}/>
          <DropdownButton
            options={backgrounds}
            btnElement={btn}
            multiple={false}
            selectedKeys={[]}
            onSelectionChange={::this.changeBackground}
          />
        </div>}

        <GapsLegend
          featureType={this.props.map.filters[0]}
          zoom={this.state.mapZoomLevel}
          layer={gapsFilters.find(filter => filter.id === this.props.map.filters[0])}
          theme={theme}
        />
        <ThresholdSelector
          min="1"
          max="50000"
          defaultThreshold="10000"
          thresholdChanged={::this.setThreshold}
          theme={theme}
        />
      </div>
    )
  }

  componentDidMount() {
    const { theme, embed } = this.props

    map = L.map(
      'map', {
      editable: true,
      minZoom: 2,
      scrollWheelZoom: !embed
    })
    .setView([2, 26], 4)
    map.on('editable:editing', debounce(::this.setCustomRegion, 200))
    map.on('zoomend', (e) => { this.setState({ mapZoomLevel:map.getZoom() }) })

    L.control.scale({ position: 'bottomright' }).addTo(map)
    map.zoomControl.setPosition('bottomright')

    gapsLayer = (new GapsLayer({
      tileSize: 512,
      maxNativeZoom: 13,
      attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
    })).addTo(map);

    backgroundLayers = backgrounds.map(background => L.tileLayer(background.url, {
      id: background.id,
      attribution: 'background ' + background.attribution,
      zIndex: -1
    }))
    backgroundLayers[0].addTo(map)

    // init from route params
    if (this.props.region) {
      moveDirectly = true
      this.mapSetRegion(this.props.map.region, this.props.embed === false, this.props.embed === false)
    }
  }

  componentWillReceiveProps(nextProps) {
    const { theme } = this.props

    // ceck for changed url parameters
    if (nextProps.region !== this.props.region) {
      this.props.actions.setRegionFromUrl(nextProps.region)
    }
    if (nextProps.filters !== this.props.filters) {
      this.props.actions.setFiltersFromUrl(nextProps.filters)
    }
    if (nextProps.overlay !== this.props.overlay) {
      this.props.actions.setOverlayFromUrl(nextProps.overlay)
    }
    if (nextProps.overlay !== this.props.overlay) {
      this.props.actions.setOverlayFromUrl(nextProps.overlay)
    }
    if (nextProps.view !== this.props.view) {
      this.props.actions.setViewFromUrl(nextProps.view)
    }
    if (nextProps.times !== this.props.times) {
      this.props.actions.setTimesFromUrl(nextProps.times)
    }
    // check for changed map parameters
{'fraction_non_alphanumeric': 0.15658914728682172, 'fraction_numerical': 0.008785529715762274, 'mean_word_length': 3.0941466854724964, 'pattern_counts': {'":': 0, '<': 50, '<?xml version=': 0, '>': 58, 'https://': 9, 'lorem ipsum': 0, 'www.': 3, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5687530', 'n_tokens_mistral': 3778, 'n_tokens_neox': 3647, 'n_words': 703}