Skip to main content

​
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

​
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

Use polygon simplification algorithms for shapes with many vertices. Reduce detail for lower zoom levels.
Multiple holes can impact performance. Consider breaking complex shapes into multiple simpler polygons.
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