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

To help you get started, we’ve selected a few react-mapbox-gl examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github alex3165 / react-typescript-starter / src / containers / main.tsx View on Github external
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 {
github etalab / adresse.data.gouv.fr / components / map / centered-map.js View on Github external
/* 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 (
github xiaoiver / custom-mapbox-layer / stories / components / TextForPolygon.tsx View on Github external
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);
    }
  }
github attivio / suit / src / components / MapFacetContents.js View on Github external
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;
        }
github attivio / suit / src / components / MapFacetContents.js View on Github external
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
github attivio / suit / src / components / MapFacetContents.js View on Github external
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);
github alex3165 / react-mapbox-gl / example / src / cluster.js View on Github external
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) =&gt; (
    
  );

  render() {
github thuanmb / react-mapbox-gl-cluster / src / App.js View on Github external
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}) =&gt; {
  const onClick = e =&gt; {
    console.log(`Receive event onClick in spiral at properties: ${JSON.stringify(properties)}`);
  };
  return <div></div>;
};
github hack4impact-uiuc / ymca / client / src / components / ResourceDetail.js View on Github external
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>
github openstates / openstates.org / js / legislator-map.js View on Github external
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/" +

react-mapbox-gl

A React binding of mapbox-gl-js

MIT
Latest version published 4 years ago

Package Health Score

59 / 100
Full package analysis