Mapbox Polygon

gistfile1.txt

import gql from 'graphql-tag';
import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
import React from 'react';
import { Query } from 'react-apollo';

const MAPBOX_STYLE = 'mapbox://styles/mapbox/streets-v9';

const GET_INFO = gql`
  query getInfo {
    getInfo {
      name
    }
  }
`;

const MapLayer = ReactMapboxGl({
  accessToken:
    'pk.eyJ1Ijoia3VydHRvZGEiLCJhIjoiY2pubjhpZ3p6MHEydDN3bnhvdXRlanlsbSJ9.3lb-hpX-7CKN_eiVshBxug',
});

const PolygonCoords = [
  [
    [-0.13235092163085938, 51.518250335096376],
    [-0.1174163818359375, 51.52433860667918],
    [-0.10591506958007812, 51.51974577545329],
    [-0.10831832885742188, 51.51429786349477],
  ],
];

const polygonPaint = {
  'fill-color': '#6F788A',
  'fill-opacity': 0.7,
};

const Map = () => (
  <Query query={GET_INFO}>
    {({ loading, error, data }) => {
      if (loading) return 'Loading...';
      if (error) return `Error! ${error.message}`;

      return (
        <MapLayer
          style={MAPBOX_STYLE}
          containerStyle={{
            height: '100vh',
            width: '100vw',
          }}
        >
          <Layer type="fill" id="rectangle" paint={polygonPaint}>
            <Feature coordinates={PolygonCoords} />
          </Layer>
        </MapLayer>
      );
    }}
  </Query>
);

export default Map;