Add GeoJSON overlay component

[jkasprzyk17]

Context

react-native-maps provides a <Geojson> component that renders GeoJSON FeatureCollection data as native map overlays (points, lines, polygons) with styling and press handlers.

react-native-nitro-maps requires manually mapping each feature to <Marker>, <Polyline>, or <Polygon>. That does not scale when:

• Backend returns GeoJSON (delivery zones, administrative boundaries, routes)
• A single file contains mixed geometry types
• Features carry properties used for styling and onPress payloads

GeoJSON is a common format in logistics, GIS, and analytics apps. Missing GeoJSON is a visible gap in the migration compatibility matrix (#13).

Reference: GeoJSON spec · react-native-maps Geojson

Goal

Render GeoJSON on the map with a single component:

<MapView>
  <Geojson
    geojson={deliveryZones}
    strokeColor="#FF0000"
    fillColor="rgba(255,0,0,0.3)"
    strokeWidth={2}
    onPress={(feature) => console.log(feature.properties)}
  />
</MapView>

Or bulk prop:

<MapView geojson={[zoneA, zoneB]} />

Proposed API

interface GeojsonProps {
  id?: string;
  /** GeoJSON object or FeatureCollection JSON string */
  geojson: GeoJSON.GeoJsonObject | string;
  strokeColor?: string;
  fillColor?: string;
  strokeWidth?: number;
  /** Default marker color for Point features */
  markerColor?: string;
  tappable?: boolean;
  zIndex?: number;
  onPress?: (feature: GeoJSON.Feature) => void;
}

Support geometry types:

GeoJSON type	Rendered as
Point / MultiPoint	Marker(s)
LineString / MultiLineString	Polyline(s)
Polygon / MultiPolygon	Polygon(s) (including holes from GeoJSON rings)
FeatureCollection	Recursive flatten
Feature	By inner geometry
GeometryCollection	Each sub-geometry

Scope

• Add Geojson React component + OverlayType.Geojson for child collection.
• Optional geojson / geojsonLayers bulk prop on MapView (evaluate one vs many layers).
• JS parser: normalize GeoJSON → internal overlay descriptors (reuse existing polyline/polygon/marker pipeline where possible).
• Style resolution:
  • component-level defaults (strokeColor, fillColor)
  • per-feature override from properties (document convention, e.g. properties.strokeColor)
• onPress returns the tapped Feature with properties.
• iOS + Android native rendering via existing overlay controllers (prefer descriptor conversion over new native GeoJSON parser if feasible).
• Polygon holes from GeoJSON interior rings (coordinate with polygon holes issue if separate).
• Example app: delivery zone polygon loaded from bundled .geojson file.
• Document limits: max feature count recommendation, performance notes for large FeatureCollections.
• Update migration matrix (Add migration guide from react-native-maps with compatibility matrix #13).

Out of scope

• GeoJSON Feature 3D coordinates (Z ignored).
• TopoJSON (convert externally first).
• Real-time streaming GeoJSON updates at high frequency (optimize separately).
• Server-side tile conversion.

Acceptance criteria

• FeatureCollection with Polygon features renders filled regions on iOS and Android.
• LineString features render as polylines.
• Point features render as markers.
• onPress returns correct feature properties when tappable.
• Bundled .geojson example works in example app.
• Invalid GeoJSON fails gracefully (dev warning, no crash).
• Document supported geometry types and unsupported cases.

Implementation notes

Suggested JS module:

package/src/
  components/Geojson.tsx
  geojson/parseGeojson.ts
  geojson/geojsonToDescriptors.ts

Prefer converting GeoJSON to existing MarkerDescriptor / PolylineDescriptor / PolygonDescriptor arrays in JS rather than adding native GeoJSON parsers on both platforms — keeps one source of truth and reuses overlay diffing.

For large datasets (1000+ features), consider internal simplification or warning. Bulk polygons prop may outperform child components.

Notes

Polygon holes in GeoJSON use interior rings — align with polygon holes support if tracked separately. GeoJSON is vector data (interactive shapes); distinct from raster tile overlays (#17).