How to use the react-mapbox-gl function in react-mapbox-gl

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 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) => (
    
  );

  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}) => {
  const onClick = e => {
    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/" +
github overthq / Auxilium / packages / dashboard / src / pages / Map.tsx View on Github external
import React from 'react';
import mapboxgl from 'mapbox-gl';
import ReactMapboxGL from 'react-mapbox-gl';

const MapContainer = ReactMapboxGL({
	accessToken:
		'pk.eyJ1Ijoia29yZWRlMzYwIiwiYSI6ImNqZno1MGN2YjBhOTgyd2xlbWFhMGQ3dmwifQ.1AbAu_Ga4bu4iQCnOgBfog'
});

interface MapState {
	lng: number;
	lat: number;
	zoom: number;
}

const initialMapState = {
	lng: 1,
	lat: 24,
	zoom: 8
};
github openstates / openstates.org / js / find-your-legislator.js View on Github external
import LegislatorImage from "./legislator-image";
import config from "./config";

function multipolyToPath(coordinates) {
  return coordinates.map(polygon =&gt;
    polygon[0].map(point =&gt; ({ lat: point[1], lng: point[0] }))
  );
}

function chamberColor(leg) {
  return leg.chamber === "lower"
    ? config.LOWER_CHAMBER_COLOR
    : config.UPPER_CHAMBER_COLOR;
}

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

class ResultMap extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    var shapes = [];
    for (var leg of this.props.legislators) {
      if (leg.shape) {
        const color = chamberColor(leg);
        shapes.push(
github xiaoiver / custom-mapbox-layer / stories / components / VectorTileCluster.tsx View on Github external
import * as React from 'react';
import ReactMapboxGl from "react-mapbox-gl";
import * as dat from 'dat.gui';
import { VectorTileClusterLayer } from '../../src';

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);
    }
  }

react-mapbox-gl

A React binding of mapbox-gl-js

MIT
Latest version published 3 years ago

Package Health Score

57 / 100
Full package analysis