Draw Shapes

Draw Point

Location: src/screens/DrawPointScreen.tsx

Demonstrates adding GeoJSON point features dynamically by tapping on the map.

<GeoJSONSource id="point-source" data={geoJson}>
  <Layer
    id="point-layer"
    type="circle"
    paint={{
      'circle-radius': 10,
      'circle-color': '#FF3B30',
    }}
  />
</GeoJSONSource>

Draw Line & Polygon

Location: src/screens/DrawLineScreen.tsx and src/screens/DrawPolygonScreen.tsx

Shows how to draw lines and closed polygons connecting multiple tapped points, using data-driven styling for dynamic coloring.

<GeoJSONSource id="polygon-source" data={geoJson}>
  <Layer
    id="polygon-layer"
    type="fill"
    paint={{
      'fill-color': ['get', 'color'], // Uses color property from feature
      'fill-opacity': 0.5,
      'fill-outline-color': '#000',
    }}
  />
</GeoJSONSource>

---

See also: React Native Map SDK overview.