How to use react-mapbox-gl - 10 common examples

const DatePicker = require('react-datepicker').default;
// tslint:disable-next-line:no-submodule-imports
import 'react-datepicker/dist/react-datepicker.css';

const NavBar = styled.div`
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  min-height: 120px;
  justify-content: center;
  align-items: center;
`;

const Map = ReactMapboxGl({
  accessToken:
    'pk.eyJ1IjoiYWxleDMxNjUiLCJhIjoiY2o0MHp2cGtiMGFrajMycG5nbzBuY2pjaiJ9.QDApU0XH2v35viSwQuln5w',
  attributionControl: false
});

const containerStyle = {
  height: '100vh',
  width: '100vw'
};

export interface Props {
  getLocations: any;
  locations: any;
}

export interface State {

/* eslint react/no-danger: off, react/style-prop-object: off */
import React from 'react'
import PropTypes from 'prop-types'
import ReactMapboxGl from 'react-mapbox-gl'

// eslint-disable-next-line new-cap
const Map = ReactMapboxGl({})

const containerStyle = {
  height: '100%',
  width: '100%',
  boxShadow: '0 1px 4px #C9D3DF'
}

class Mapbox extends React.Component {
  render() {
    const {center, zoom, onStyleLoad, onDrag, onZoom, onClick, children} = this.props

    return (

import * as React from 'react';
import ReactMapboxGl from "react-mapbox-gl";
import * as dat from 'dat.gui';
import { TextLayer } from '../../src';
// import { featureEach } from '@turf/meta';

const Map = ReactMapboxGl({
  accessToken: 'pk.eyJ1IjoieGlhb2l2ZXIiLCJhIjoiY2pxcmc5OGNkMDY3cjQzbG42cXk5NTl3YiJ9.hUC5Chlqzzh0FFd_aEc-uQ'
});

export default class VectorLineLayer extends React.Component {

  private gui: dat.GUI;
  private $stats: Node;

  componentWillUnmount() {
    if (this.gui) {
      this.gui.destroy();
    }
    if (this.$stats) {
      document.body.removeChild(this.$stats);
    }
  }

render() {
    const Marker = ReactMapboxGl.Marker;
    const ZoomControl = ReactMapboxGl.ZoomControl;
    const { buckets, tooltip } = this.props;
    if (StringUtils.notEmpty(this.props.mapboxKey)) {
      const Map = ReactMapboxGl.Map({
        accessToken: this.props.mapboxKey,
        attributionControl: false,
      });

      let locationPointer = ;
      if (this.props.pointerImageUri) {
        locationPointer = <img style="{{" alt="location pointer" src="{this.props.pointerImageUri}">;
      } else if (this.props.pointerGlyph) {
        locationPointer = ;
      }
      const points = this.props.buckets.map((bucket) =&gt; {
        // Return null if getCoordinatesFromBucket() returns null value
        const coordinates = MapFacetContents.getCoordinatesFromBucket(bucket);
        if (!coordinates) {
          return null;
        }

render() {
    const Marker = ReactMapboxGl.Marker;
    const ZoomControl = ReactMapboxGl.ZoomControl;
    const { buckets, tooltip } = this.props;
    if (StringUtils.notEmpty(this.props.mapboxKey)) {
      const Map = ReactMapboxGl.Map({
        accessToken: this.props.mapboxKey,
        attributionControl: false,
      });

      let locationPointer = ;
      if (this.props.pointerImageUri) {
        locationPointer = <img style="{{" alt="location pointer" src="{this.props.pointerImageUri}">;
      } else if (this.props.pointerGlyph) {
        locationPointer = ;
      }
      const points = this.props.buckets.map((bucket) =&gt; {
        // Return null if getCoordinatesFromBucket() returns null value

render() {
    const Marker = ReactMapboxGl.Marker;
    const ZoomControl = ReactMapboxGl.ZoomControl;
    const { buckets, tooltip } = this.props;
    if (StringUtils.notEmpty(this.props.mapboxKey)) {
      const Map = ReactMapboxGl.Map({
        accessToken: this.props.mapboxKey,
        attributionControl: false,
      });

      let locationPointer = ;
      if (this.props.pointerImageUri) {
        locationPointer = <img style="{{" alt="location pointer" src="{this.props.pointerImageUri}">;
      } else if (this.props.pointerGlyph) {
        locationPointer = ;
      }
      const points = this.props.buckets.map((bucket) =&gt; {
        // Return null if getCoordinatesFromBucket() returns null value
        const coordinates = MapFacetContents.getCoordinatesFromBucket(bucket);

color: 'white',
    border: '2px solid #56C498'
  },
  marker: {
    width: 30,
    height: 30,
    borderRadius: '50%',
    backgroundColor: '#E0E0E0',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    border: '2px solid #C9C9C9'
  }
}

const Map = ReactMapboxGl({
  accessToken: config.accessToken
});

export default class ClusterExample extends Component {

  onMarkerClick(coords) {
    console.log(coords);
  }

  clusterMarker = (coordinates, pointCount) => (
    
  );

  render() {

import React, {Component} from 'react';
import ReactMapboxGl from 'react-mapbox-gl';
import {ReactMapboxGlCluster} from './lib';
import {data} from './data';
import './App.css';

const Map = ReactMapboxGl({
  accessToken: process.env.REACT_APP_MAPBOX_GL_TOKEN,
});

const mapProps = {
  center: [-95.7129, 37.0902],
  zoom: [3],
  style: 'mapbox://styles/mapbox/streets-v8',
};

const CustomSpiralComponent = ({properties, ...restProps}) => {
  const onClick = e => {
    console.log(`Receive event onClick in spiral at properties: ${JSON.stringify(properties)}`);
  };
  return <div></div>;
};

email,
      address,
      website,
      description,
      hours,
      city,
      languages,
      requiredDocuments,
      cost,
      category,
      subcategory,
      resourceExists,
      eligibility,
    } = this.state;

    const Map = ReactMapboxGl({
      accessToken:
        'pk.eyJ1IjoiYW5vb2psYWwiLCJhIjoiY2syemtiYjZoMGp1' +
        'eDNscXQ3azJzajl0bCJ9.FDSFjP1IfSisbm4uvd70vg',
      interactive: false,
    });

    const { authed, match, authRoleIsEquivalentTo } = this.props;

    if (!resourceExists) {
      return ;
    }

    return (
      <div>
        </div>

import React from "react";
import ReactDOM from "react-dom";
import ReactMapboxGl, { Source, Layer } from "react-mapbox-gl";
import config from "./config";
import stateBounds from "./state-bounds.js";

const Map = ReactMapboxGl({
  accessToken: config.MAPBOX_ACCESS_TOKEN,
});

export default class DistrictMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bounds: stateBounds[props.state],
      display: true,
    };
  }

  componentDidMount() {
    const map = this;
    fetch(
      "https://data.openstates.org/boundaries/2018/" +