Plot polygon using react map gl

Question

I am getting started with react map gl. I am failing on plotting basic polygon on map. I have searched multiple examples but i couldn't get proper solution. Till now this is my code:

        <Source id="polylineLayer" type="geojson" data={{
            type: "Feature",
            properties: {},
            geometry: {
              type: "fill",
              coordinates: [[72.5497762170623, 31.758420926179284], [75.71927578293769, 31.758420926179284],
              [75.6761122711823, 29.06347507382072], [72.59293972881768, 29.06347507382072]]
            }
          }}>
          <Layer
            id="polylineLayer"
            type="fill"
            source="my-data"
            paint= {{
              'fill-color': '#FFAA01', // orange color fill
              'fill-opacity': 0.5
            }}
          />
        </Source>

I am following long-lat format and provided four coordinates to create a polygon. But, polygon plotting is failing on map. I would greatly appreciate if you can point out what is missing in this snippet of code

score 1 · Answer 1 · answered Jun 28 '22 at 09:36

problem was simple and with basic follow-up examples, I was able to solve this:

<Source type="geojson" data={{
          "type": "FeatureCollection",
          "features": [
          {"type":"Feature",
          "properties":{},
          "geometry":
            {"type":"MultiPolygon",
            "coordinates":[[[[72.5497762170623, 31.758420926179284], [75.71927578293769, 31.758420926179284],
              [75.6761122711823, 29.06347507382072], [72.59293972881768, 29.06347507382072]]]]
            }
          }]
        }}>
        <Layer {...{
          id: 'data',
          type: 'fill',
          paint: {
            'fill-color': {
              property: 'percentile',
              stops: [
                [0, '#3288bd'],
              ]
            },
            'fill-opacity': 0.5
          }}} />
      </Source>

With this, we can have multiple polygons in one source. I hope it will help someone in future.

Plot polygon using react map gl

1 Answers1