Polyline

Draw lines on the map between multiple points

Polyline

The Polyline component draws lines on the map connecting multiple coordinate points. Useful for routes, paths, and connections.

Props

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

Array of coordinates defining the polyline path

options · object

Polyline styling and behavior options

Show options properties

style · object

Visual styling for the polyline

Show style properties

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

Line color (hex, rgb, or named color)

lineWidth · number · default: 4

Line width in pixels

lineDash · number[]

Dash pattern for dashed lines. Example: [10, 5] creates 10px dashes with 5px gaps

lineCap · 'butt' | 'round' | 'square' · default: "'round'"

Line cap style

lineJoin · 'bevel' | 'miter' | 'round' · default: "'round'"

Line join style at corners

Basic Usage

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

function MapWithPolyline() {
  const routePoints = [
    { lat: 40.7128, lng: -74.0060 },
    { lat: 40.7614, lng: -73.9776 },
    { lat: 40.7589, lng: -73.9851 },
  ];

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

Styled Polyline

<Polyline
  points={[
    { lat: 52.52, lng: 13.405 },
    { lat: 52.53, lng: 13.415 },
    { lat: 52.54, lng: 13.425 },
  ]}
  options={{
    style: {
      strokeColor: '#FF5733',
      lineWidth: 6,
      lineCap: 'round',
      lineJoin: 'round',
    }
  }}
/>

Dashed Line

<Polyline
  points={routePoints}
  options={{
    style: {
      strokeColor: '#007BFF',
      lineWidth: 4,
      lineDash: [10, 5], // 10px dash, 5px gap
    }
  }}
/>

Multiple Routes

const routes = [
  {
    id: 'route-1',
    points: [
      { lat: 40.7128, lng: -74.0060 },
      { lat: 40.7614, lng: -73.9776 },
    ],
    color: '#FF5733',
  },
  {
    id: 'route-2',
    points: [
      { lat: 40.7589, lng: -73.9851 },
      { lat: 40.7489, lng: -73.9680 },
    ],
    color: '#33FF57',
  },
];

<HereMap apikey="YOUR_API_KEY" options={{ center: { lat: 40.7489, lng: -73.9851 }, zoom: 12 }}>
  {routes.map((route) => (
    <Polyline
      key={route.id}
      points={route.points}
      options={{
        style: {
          strokeColor: route.color,
          lineWidth: 5,
        }
      }}
    />
  ))}
</HereMap>

Drawing Path with Markers

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

function RouteWithWaypoints() {
  const waypoints = [
    { lat: 40.7128, lng: -74.0060, label: 'Start' },
    { lat: 40.7614, lng: -73.9776, label: 'Stop 1' },
    { lat: 40.7589, lng: -73.9851, label: 'End' },
  ];

  return (
    <HereMap
      apikey="YOUR_API_KEY"
      options={{ center: waypoints[0], zoom: 13 }}
    >
      <Polyline
        points={waypoints}
        options={{
          style: {
            strokeColor: '#1EA7FD',
            lineWidth: 4,
          }
        }}
      />

      {waypoints.map((point, index) => (
        <Marker
          key={index}
          position={point}
          label={point.label}
        />
      ))}
    </HereMap>
  );
}

Dynamic Polyline

import { useState } from 'react';

function DynamicPolyline() {
  const [points, setPoints] = useState([
    { lat: 40.7128, lng: -74.0060 },
  ]);

  const addPoint = (lat: number, lng: number) => {
    setPoints([...points, { lat, lng }]);
  };

  return (
    <HereMap
      apikey="YOUR_API_KEY"
      options={{ center: points[0], zoom: 12 }}
    >
      {points.length > 1 && (
        <Polyline
          points={points}
          options={{
            style: {
              strokeColor: '#28A745',
              lineWidth: 4,
            }
          }}
        />
      )}

      {points.map((point, index) => (
        <Marker key={index} position={point} label={`${index + 1}`} />
      ))}
    </HereMap>
  );
}

Use Cases

Routes

Display navigation routes between locations

Boundaries

Show property or region boundaries

Trails

Visualize hiking or biking trails

Connections

Connect related points or locations

Performance Tips

Simplify complex paths

For paths with many points, consider simplifying using the Douglas-Peucker algorithm to reduce the number of coordinates while maintaining visual accuracy.

Batch updates

When updating polylines dynamically, batch coordinate changes instead of updating on every point change.

Visibility culling

Remove or don’t render polylines that are outside the visible map bounds.

See Also

Polygon

Draw filled polygons

Marker

Add markers to polyline endpoints

Examples

Interactive examples