How to draw polygon on React native mapbox GL?

Question

I am trying to draw the polygon in React native mapbox GL library. Reference : https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/

so here in React webapp they have introduced feature and by adding control we can achieve it. I want to achieve this in React native mapbox GL library. reference: https://github.com/rnmapbox/maps

so please guide me with sample that how can I draw this on RN map.

Answer 1

Here is simple example:

import React from 'react';
import MapboxGL from '@react-native-mapbox-gl/maps';

// raster style for map
const MapStyle = JSON.stringify({
    sources: {
        osm: {
            type: 'raster',
            tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
            tileSize: 256,
            maxzoom: 19,
        },
    },
    layers: [
        {
            id: 'osm',
            type: 'raster',
            source: 'osm',
        },
    ],
});

// random generated geojson feature
const GeoJson: GeoJSON.FeatureCollection = {
    type: 'FeatureCollection',
    features: [
        {
            type: 'Feature',
            properties: {},
            geometry: {
                type: 'Polygon',
                coordinates: [
                    [
                        [-18.984375, 35.460669951495305],
                        [-11.953125, -41.50857729743933],
                        [66.4453125, -38.272688535980954],
                        [101.25, 18.646245142670608],
                        [73.125, 66.08936427047088],
                        [2.109375, 65.5129625532949],
                        [-18.984375, 35.460669951495305],
                    ],
                ],
            },
        },
    ],
};

// map component
const Map = () => {
    return (
        <MapboxGL.MapView style={{ flex: 1 }} styleJSON={MapStyle}>
            <MapboxGL.Camera
                defaultSettings={{
                    centerCoordinate: [39.7265625, 23.563987128451217],
                    zoomLevel: 0,
                }}
            />

            <MapboxGL.ShapeSource id={'some-feature'} shape={GeoJson}>
                <MapboxGL.LineLayer
                    sourceID="some-feature"
                    id="some-feature-line"
                    style={{
                        lineColor: '#ffffff',
                        lineWidth: 10,
                    }}
                />
                <MapboxGL.FillLayer
                    sourceID="some-feature"
                    id="some-feature-fill"
                    style={{
                        // Example of color interpolation using zoom
                        // more info: https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/
                        fillColor: ['interpolate', ['linear'], ['zoom'], 0, '#eeddbb', 2, '#0daa00', 3, '#bbbbee'],
                    }}
                />
            </MapboxGL.ShapeSource>
        </MapboxGL.MapView>
    );
};

Documentation reference:

about TileJson (styleJSON)

<MapboxGL.MapView />

<MapboxGL.Camera />

<MapboxGL.FillLayer />

<MapboxGL.LineLayer />

Answer 2

You can use ShapeSource to make polygon, pass valid geojson in "shape" param.

  const style_MB = {
    neighborhoodsD: {
      fillColor: RED_SELECTED_PLOT,
    },
      selectedBorder: {
      lineColor: COLOR_WHITE,
      lineWidth: 3.5,
    },

  };

Filled Polygon:

      <MapboxGL.ShapeSource id="selectedNYC" shape={selectedDist}>
        <MapboxGL.FillLayer
          sourceID="nyc"
          id="nycSelectedFillRed"
          style={style_MB.neighborhoodsD}
        />
      </MapboxGL.ShapeSource>

Bordered polygon:

      <MapboxGL.ShapeSource id="borderSrc" shape={selectedPolySides}>
        <MapboxGL.LineLayer
          sourceID="borderSrc"
          id="borderLine"
          style={style_MB.selectedBorder}
        />
      </MapboxGL.ShapeSource>

Follow the link for example. https://dev.to/ajmal_hasan/react-native-mapbox-v10-usage-4gbp