Polygon

Draw filled polygons on the map with optional holes

Polygon

The Polygon component draws filled polygons on the map. Supports custom styling and holes for complex shapes.

Props

points · Array<{ lat: number; lng: number }> · required

Array of coordinates defining the polygon boundary. The polygon automatically closes between the last and first point.

holes · Array<Array<{ lat: number; lng: number }>>

Optional array of hole polygons (areas to cut out from the main polygon)

options · object

Polygon styling options

Show options properties

style · object

Visual styling for the polygon

Show style properties

fillColor · string · default: "'rgba(30, 167, 253, 0.4)'"

Fill color (supports rgba for transparency)

strokeColor · string · default: "'#1EA7FD'"

Border color

lineWidth · number · default: 2

Border width in pixels

lineDash · number[]

Dash pattern for border. Example: [5, 5]

Basic Usage

import { HereMap, Polygon } from '@rodrito/react-here-maps';

function MapWithPolygon() {
  const area = [
    { lat: 40.7128, lng: -74.0060 },
    { lat: 40.7228, lng: -74.0060 },
    { lat: 40.7228, lng: -73.9960 },
    { lat: 40.7128, lng: -73.9960 },
  ];

  return (
    <HereMap
      apikey="YOUR_API_KEY"
      options={{ center: area[0], zoom: 13 }}
    >
      <Polygon points={area} />
    </HereMap>
  );
}

Styled Polygon

<Polygon
  points={[
    { lat: 52.51, lng: 13.395 },
    { lat: 52.52, lng: 13.395 },
    { lat: 52.52, lng: 13.405 },
    { lat: 52.51, lng: 13.405 },
  ]}
  options={{
    style: {
      fillColor: 'rgba(0, 255, 0, 0.6)',
      strokeColor: '#00FF00',
      lineWidth: 3,
    }
  }}
/>

Polygon with Hole

Create a donut-shaped polygon by defining holes:

<Polygon
  points={[
    // Outer boundary
    { lat: 52.5, lng: 13.39 },
    { lat: 52.54, lng: 13.39 },
    { lat: 52.54, lng: 13.42 },
    { lat: 52.5, lng: 13.42 },
  ]}
  holes={[
    [
      // Inner hole
      { lat: 52.515, lng: 13.4 },
      { lat: 52.525, lng: 13.4 },
      { lat: 52.525, lng: 13.41 },
      { lat: 52.515, lng: 13.41 },
    ],
  ]}
  options={{
    style: {
      fillColor: 'rgba(255, 0, 0, 0.4)',
      strokeColor: '#FF0000',
      lineWidth: 2,
    }
  }}
/>

Multiple Polygons

const zones = [
  {
    id: 'zone-1',
    points: [
      { lat: 40.7128, lng: -74.0060 },
      { lat: 40.7228, lng: -74.0060 },
      { lat: 40.7228, lng: -73.9960 },
      { lat: 40.7128, lng: -73.9960 },
    ],
    color: 'rgba(255, 0, 0, 0.3)',
  },
  {
    id: 'zone-2',
    points: [
      { lat: 40.7248, lng: -74.0060 },
      { lat: 40.7348, lng: -74.0060 },
      { lat: 40.7348, lng: -73.9960 },
      { lat: 40.7248, lng: -73.9960 },
    ],
    color: 'rgba(0, 255, 0, 0.3)',
  },
];

<HereMap apikey="YOUR_API_KEY" options={{ center: { lat: 40.7288, lng: -74.0010 }, zoom: 13 }}>
  {zones.map((zone) => (
    <Polygon
      key={zone.id}
      points={zone.points}
      options={{
        style: {
          fillColor: zone.color,
          strokeColor: zone.color.replace('0.3', '1'),
          lineWidth: 2,
        }
      }}
    />
  ))}
</HereMap>

Interactive Polygons

import { useState } from 'react';

function InteractivePolygons() {
  const [selected, setSelected] = useState<string | null>(null);

  const areas = [
    { id: 'area-1', points: [...], name: 'Area 1' },
    { id: 'area-2', points: [...], name: 'Area 2' },
  ];

  return (
    <HereMap apikey="YOUR_API_KEY" options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}>
      {areas.map((area) => (
        <Polygon
          key={area.id}
          points={area.points}
          options={{
            style: {
              fillColor: selected === area.id
                ? 'rgba(30, 167, 253, 0.6)'
                : 'rgba(30, 167, 253, 0.3)',
              strokeColor: '#1EA7FD',
              lineWidth: selected === area.id ? 3 : 2,
            }
          }}
          onClick={() => setSelected(area.id)}
        />
      ))}
    </HereMap>
  );
}

Dashed Border

<Polygon
  points={boundaryPoints}
  options={{
    style: {
      fillColor: 'rgba(255, 165, 0, 0.2)',
      strokeColor: '#FFA500',
      lineWidth: 2,
      lineDash: [10, 5], // 10px dash, 5px gap
    }
  }}
/>

Use Cases

Zones

Define delivery zones, service areas

Properties

Show property boundaries and parcels

Regions

Highlight geographic regions or districts

Coverage

Display coverage or accessibility areas

Drawing Complex Shapes

Circle (Approximate)

const createCircle = (center: { lat: number; lng: number }, radiusKm: number) => {
  const points = [];
  const earthRadius = 6371; // km

  for (let i = 0; i <= 360; i += 10) {
    const angle = i * Math.PI / 180;
    const lat = center.lat + (radiusKm / earthRadius) * (180 / Math.PI) * Math.cos(angle);
    const lng = center.lng + (radiusKm / earthRadius) * (180 / Math.PI) * Math.sin(angle) / Math.cos(center.lat * Math.PI / 180);
    points.push({ lat, lng });
  }

  return points;
};

<Polygon
  points={createCircle({ lat: 40.7128, lng: -74.0060 }, 5)}
  options={{
    style: {
      fillColor: 'rgba(30, 167, 253, 0.3)',
      strokeColor: '#1EA7FD',
      lineWidth: 2,
    }
  }}
/>

Performance Tips

Simplify complex polygons

Use polygon simplification algorithms for shapes with many vertices. Reduce detail for lower zoom levels.

Limit holes

Multiple holes can impact performance. Consider breaking complex shapes into multiple simpler polygons.

Visibility culling

Don’t render polygons that are completely outside the visible map bounds.

See Also

Polyline

Draw lines without fill

Marker

Add markers to polygon vertices

Examples

Interactive examples