react-map-gl#FullscreenControl JavaScript Examples

The following examples show how to use react-map-gl#FullscreenControl. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Map.js    From circles-website with GNU Affero General Public License v3.0 6 votes vote down vote up
render() {
    const { viewport } = this.state;

    return (
      <div style={{ height: 600 }}>
        <MapGL
          {...viewport}
          width="100%"
          height="100%"
          mapStyle="mapbox://styles/mapbox/dark-v9"
          onViewportChange={this._updateViewport}
          mapboxApiAccessToken={TOKEN}
        >
          <Pins data={CITIES} onClick={this._onClickMarker} />

          {this._renderPopup()}

          <div style={geolocateStyle}>
            <GeolocateControl />
          </div>
          <div style={fullscreenControlStyle}>
            <FullscreenControl />
          </div>
          <div style={navStyle}>
            <NavigationControl />
          </div>
          <div style={scaleControlStyle}>
            <ScaleControl />
          </div>

          {/* <ControlPanel containerComponent={this.props.containerComponent} /> */}
        </MapGL>
      </div>
    );
  }
Example #2
Source File: TemporalMap.js    From sampo-ui with MIT License 5 votes vote down vote up
render () {
    const { viewport, memory, dates } = this.state
    const { classes, animateMap, portalConfig } = this.props
    const { mapboxAccessToken, mapboxStyle } = portalConfig.mapboxConfig
    return (
      <div id='temporal-map-root' ref={this.mapElementRef} className={classes.root}>
        <ReactMapGL
          {...viewport}
          width='100%'
          height='100%'
          reuseMaps
          mapStyle={`mapbox://styles/mapbox/${mapboxStyle}`}
          preventStyleDiffing
          mapboxApiAccessToken={mapboxAccessToken}
          onViewportChange={this.handleOnViewportChange}
        >
          <div className={classes.navigationContainer}>
            <NavigationControl />
            <FullscreenControl
              className={classes.fullscreenButton}
              container={document.querySelector('temporal-map-root')}
            />
          </div>
          <DeckGL
            layers={this._renderLayers()}
            viewState={viewport}
          />
          <TemporalMapTimeSlider
            mapElementRef={this.mapElementRef}
            memory={memory}
            dates={dates}
            animateMap={animateMap}
            initialValue={this.props.animationValue[0]}
            sliderDuration={portalConfig.temporalMapConfig.sliderDuration}
          />
          {this._renderTooltip()}
        </ReactMapGL>
      </div>
    )
  }
Example #3
Source File: Deck.js    From sampo-ui with MIT License 4 votes vote down vote up
render () {
      const { classes, layerType, fetching, results, showTooltips, portalConfig } = this.props
      const { mapboxAccessToken, mapboxStyle } = portalConfig.mapboxConfig
      const { hoverInfo } = this.state
      const showTooltip = showTooltips && hoverInfo && hoverInfo.object
      const hasData = !fetching && results && results.length > 0 &&
      (
        (results[0].lat && results[0].long) ||
        (results[0].from && results[0].to) ||
        results[0].polygon
      )
      // console.log(hasData)

      /* It's OK to create a new Layer instance on every render
       https://github.com/uber/deck.gl/blob/master/docs/developer-guide/using-layers.md#should-i-be-creating-new-layers-on-every-render
      */
      let layer = null
      if (hasData) {
        switch (layerType) {
          case 'arcLayer':
            layer = this.createArcLayer(results)
            break
          case 'heatmapLayer':
            layer = this.createHeatmapLayer(results)
            break
          case 'hexagonLayer':
            layer = this.createHexagonLayer(results)
            break
          case 'polygonLayer':
            layer = this.createPolygonLayer(results)
            break
          default:
            layer = this.createHeatmapLayer(results)
            break
        }
      }
      return (
        <div className={classes.root}>
          <ReactMapGL
            {...this.state.viewport}
            width='100%'
            height='100%'
            reuseMaps
            mapStyle={`mapbox://styles/mapbox/${mapboxStyle}`}
            preventStyleDiffing
            mapboxApiAccessToken={mapboxAccessToken}
            onViewportChange={this.handleOnViewportChange}
          >
            <div className={classes.navigationContainer}>
              <NavigationControl />
              <FullscreenControl
                className={classes.fullscreenButton}
                container={document.querySelector('mapboxgl-map')}
              />
            </div>
            {layerType === 'arcLayer' &&
              <HTMLOverlay redraw={() =>
                <DeckArcLayerLegend
                  title={this.props.legendTitle}
                  fromText={this.props.legendFromText}
                  toText={this.props.legendToText}
                />}
              />}
            <DeckGL
              viewState={this.state.viewport}
              layers={[layer]}
              getCursor={() => 'initial'}
              {...(layerType === 'polygonLayer'
                ? {
                    getTooltip: ({ object }) => object && {
                      html: `
                      <h2>${object.prefLabel}</h2>
                      <div>${object.instanceCount}</div>
                    `
                    // style: {
                    //   backgroundColor: '#f00',
                    //   fontSize: '0.8em'
                    // }
                    }
                  }
                : {})
              }
            />
            {this.renderSpinner()}
            {layerType === 'arcLayer' && this.props.instanceAnalysisData && this.state.dialog.open &&
              <DeckArcLayerDialog
                onClose={this.closeDialog.bind(this)}
                data={this.props.instanceAnalysisData}
                from={this.state.dialog.from}
                to={this.state.dialog.to}
                fromText={this.props.fromText}
                toText={this.props.toText}
                countText={this.props.countText}
                listHeadingSingleInstance={this.props.listHeadingSingleInstance}
                listHeadingMultipleInstances={this.props.listHeadingMultipleInstances}
                instanceVariable={[this.props.instanceVariable]}
                resultClass={this.props.resultClass}
                facetClass={this.props.facetClass}
              />}
            {layerType === 'arcLayer' && showTooltip &&
              <DeckArcLayerTooltip
                data={hoverInfo}
                fromText={this.props.fromText}
                toText={this.props.toText}
                countText={this.props.countText}
                showMoreText={this.props.showMoreText}
              />}
          </ReactMapGL>
        </div>
      )
    }
Example #4
Source File: index.js    From covid-trials-dashboard with MIT License 4 votes vote down vote up
Map = ({ pins, handleSelectedId }) => {
  const {
    state: { prefersDarkMode },
  } = useContext(store) || { state: { prefersDarkMode: false } }
  const [popUp, setPopUp] = useState()
  const [viewport, setViewport] = useState({
    latitude: 40.67,
    longitude: -73.94,
    zoom: 0.8,
    bearing: 0,
    pitch: 0,
  })

  useEffect(() => {
    if (typeof navigator !== 'undefined' && 'geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition(
        location => {
          setViewport({
            latitude: location.coords.latitude,
            longitude: location.coords.longitude,
            altitude: location.coords.altitude,
            zoom: 9,
          })
        },
        error => {
          console.log('User did not allow location', error)
        }
      )
    }
  }, [])

  const PinComponent = useMemo(() => {
    const onClick = popupInfo => {
      setPopUp(popupInfo)
      handleSelectedId(popupInfo.productId)
    }
    return (
      <Pins data={pins} onClick={onClick} handleSelectedId={handleSelectedId} />
    )
  }, [pins, handleSelectedId])

  const PopUpComponent = useMemo(() => {
    const onClose = () => {
      setPopUp(null)
      handleSelectedId('clear')
    }
    return (
      <>
        <PopUpDisplay popupInfo={popUp} onClose={onClose} />
      </>
    )
  }, [popUp, handleSelectedId])

  const Controls = useMemo(() => {
    return (
      <>
        <FullscreenControlDiv>
          <FullscreenControl />
        </FullscreenControlDiv>
        <NavDiv>
          <NavigationControl />
        </NavDiv>
        <ScaleControlDiv>
          <ScaleControl />
        </ScaleControlDiv>
      </>
    )
  }, [])

  return (
    <ReactMapGL
      {...viewport}
      onViewportChange={nextViewport => setViewport(nextViewport)}
      mapStyle={
        prefersDarkMode
          ? 'mapbox://styles/mapbox/dark-v10?optimize=true'
          : 'mapbox://styles/adibi2011/ckgtx36fp09lk19n2csgrxnu4'
      }
      mapboxApiAccessToken={mapboxApiKey}
      width='100%'
      height='100%'
    >
      {PinComponent}
      {PopUpComponent}
      {Controls}
    </ReactMapGL>
  )
}