Skip to content

POLYGON.md

Latest commit

 

History

History
58 lines (51 loc) · 1.72 KB

POLYGON.md

File metadata and controls

58 lines (51 loc) · 1.72 KB

Polygon

Polygon component for drawing filled shapes on the map.

Usage

import { MapView, Polygon } from '@lugg/maps';

<MapView style={{ flex: 1 }}>
  {/* Simple polygon */}
  <Polygon
    coordinates={[
      { latitude: 37.784, longitude: -122.428 },
      { latitude: 37.784, longitude: -122.422 },
      { latitude: 37.779, longitude: -122.422 },
      { latitude: 37.779, longitude: -122.428 },
    ]}
    fillColor="rgba(66, 133, 244, 0.3)"
    strokeColor="#4285F4"
    strokeWidth={2}
    onPress={() => console.log('Polygon pressed')}
  />

  {/* Polygon with a hole */}
  <Polygon
    coordinates={[
      { latitude: 37.790, longitude: -122.435 },
      { latitude: 37.790, longitude: -122.420 },
      { latitude: 37.775, longitude: -122.420 },
      { latitude: 37.775, longitude: -122.435 },
    ]}
    holes={[
      [
        { latitude: 37.787, longitude: -122.432 },
        { latitude: 37.787, longitude: -122.423 },
        { latitude: 37.778, longitude: -122.423 },
        { latitude: 37.778, longitude: -122.432 },
      ],
    ]}
    fillColor="rgba(244, 67, 54, 0.3)"
    strokeColor="#F44336"
    strokeWidth={2}
  />
</MapView>

Props

Prop Type Default Description
coordinates Coordinate[] required Array of coordinates forming the polygon boundary
holes Coordinate[][] - Array of coordinate arrays representing interior holes
fillColor ColorValue - Fill color of the polygon
strokeColor ColorValue - Stroke (outline) color
strokeWidth number - Stroke width in points
zIndex number - Z-index for layering
onPress () => void - Called when the polygon is tapped