react-map-gl#Layer JavaScript Examples

CountMap = ({code, map}) => {
  const {date, forcedDate} = useContext(AppContext)
  const [layerData, setLayerData] = useState(null)

  const selectedDate = forcedDate || date

  useEffect(() => {
    async function prepareLayerData() {
      const report = await getReport(selectedDate, code === 'FRA' ? 'REG' : 'DEP')
      setLayerData(reportToGeoJSON(report, selectedDate))
    }

    prepareLayerData()
  }, [selectedDate, code])

  const radiusBounds = map.radiusBounds || [0, 10, 100, 70]

  const circleLayer = {
    id: 'circle-layer',
    type: 'circle',
    source: map.property,
    filter: ['>', map.property, 0],
    paint: {
      'circle-opacity': 0.6,
      'circle-color': map.color,
      'circle-radius': [
        'interpolate',
        ['linear'],
        ['sqrt', ['number', ['get', map.property]]],
        ...radiusBounds
      ]
    }
  }

  const countLayer = {
    id: 'count-layer',
    type: 'symbol',
    source: map.property,
    filter: ['>', map.property, 0],
    layout: {
      'text-field': `{${map.property}}`,
      'text-size': 16
    }
  }

  return (
    <>
      {layerData &&
        <Source
          type='geojson'
          attribution='Données Santé publique France'
          data={layerData}
        >
          <Layer key={circleLayer.id} {...circleLayer} />
          <Layer key={countLayer.id} {...countLayer} />
        </Source>}
    </>
  )
}

IndicatorsMap = ({hovered, isDROM}) => {
  const {selectedLocation, setSelectedLocation, isMobileDevice} = useContext(AppContext)
  const {selectedDate, selectedStat} = useContext(IndicatorsContext)
  const {code = '', region = ''} = hovered && hovered.feature ? hovered.feature.properties : {}

  const [indicators, setIndicators] = useState([])

  const handleBack = event => {
    event.stopPropagation()
    setSelectedLocation('FRA')
  }

  const getSelectedRegion = useCallback(() => {
    const [locationType, code] = selectedLocation.split('-')
    if (locationType !== 'FRA') {
      return locationType === 'REG' ? code : departements.find(d => d.code === code).region
    }

    return null
  }, [selectedLocation])

  const selectedRegion = getSelectedRegion()

  useEffect(() => {
    const getIndicatorsData = async () => {
      const {history} = await getReport(selectedDate, 'DEP')
      setIndicators(history.filter(({date}) => selectedDate === date).map(dep => {
        return {
          ...dep,
          code: dep.code.split('-')[1]
        }
      }))
    }

    getIndicatorsData()
  }, [selectedDate])

  const getColors = useCallback(() => {
    const colors = ['match', ['get', 'code']]

    indicators.forEach(indicator => {
      const color = COLORS[indicator[`${selectedStat}Color`]] || defaultColor
      colors.push(indicator.code, color)
    })

    colors.push(defaultColor)

    return colors.length > 3 ? colors : defaultColor
  }, [indicators, selectedStat])

  const getOpacity = useCallback(() => {
    return ['case', ['==', ['get', 'code'], region || code], 0, 0.5]
  }, [code, region])

  if (indicators) {
    const indicateurSynthese = {
      id: 'indicateur',
      'source-layer': 'departements',
      type: 'fill',
      paint: {
        'fill-color': getColors(),
        'fill-outline-color': '#ffffff'
      }
    }

    const regionsLayer = {
      id: 'regions-fill',
      'source-layer': 'regions',
      type: 'fill',
      filter: selectedRegion ? ['!=', ['get', 'code'], selectedRegion] : ['has', 'code'],
      paint: {
        'fill-opacity': getOpacity(),
        'fill-color': '#fff',
        'fill-outline-color': colors.darkBlue
      }
    }

    return (
      <>
        {!isDROM && selectedLocation !== 'FRA' && (
          <div className={`back ${isMobileDevice ? 'mobile' : ''}`} onClick={handleBack}>
            <ChevronLeft /> Retour
          </div>
        )}
        <Source
          id='decoupage-administratif'
          type='vector'
          attribution='Données Ministère des Solidarités et de la santé'
          url='https://etalab-tiles.fr/data/decoupage-administratif.json'
        >
          <Layer beforeId='place-town' {...indicateurSynthese} />
          <Layer beforeId='place-town' {...regionsLayer} />
        </Source>

        <style jsx>{`
          .back {
            z-index: 2;
            position: absolute;
            display: flex;
            align-items: center;
            top: 0;
            left: calc(240px + 0.5em); // 240px is the width of <MapSelector />
            margin: 0.5em;
            padding: 0.5em;
            border-radius: 4px;
            color: #fff;
            background-color: #000000aa;
          }

          .back.mobile {
            left: 0;
          }

          .back:hover {
            cursor: pointer;
            background-color: #000;
          }
          `}</style>
      </>
    )
  }

  return null
}