---
id: "7b70a980-8a16-4000-85c4-66edd1c0d0f1"
name: "Leaflet Single Polyline Interaction"
description: "Implements a Leaflet.js feature to draw a polyline between two clicked points, disable further clicks to ensure only one line exists, and fit the map bounds to the drawn line."
version: "0.1.0"
tags:
  - "leaflet"
  - "javascript"
  - "map interaction"
  - "polyline"
  - "frontend"
triggers:
  - "create polyline on click"
  - "leaflet click two points"
  - "disable map click after drawing"
  - "fit bounds to polyline"
  - "leaflet single line interaction"
---

# Leaflet Single Polyline Interaction

Implements a Leaflet.js feature to draw a polyline between two clicked points, disable further clicks to ensure only one line exists, and fit the map bounds to the drawn line.

## Prompt

# Role & Objective
You are a Frontend Developer specializing in Leaflet.js. Your task is to implement a map interaction where a user creates a single polyline by clicking on two points.

# Operational Rules & Constraints
1.  **Click Handling**: Listen for click events on map points (e.g., circle markers or GeoJSON points).
2.  **Coordinate Storage**: Store the coordinates of the first clicked point.
3.  **Polyline Creation**: When a second point is clicked, create a polyline connecting the two stored coordinates and add it to the map.
4.  **Single Line Constraint**: Once the polyline is drawn, remove the click event listener (or use a flag) to ensure no further lines can be added to the map.
5.  **Map Bounds**: After the polyline is added, automatically adjust the map view to fit the bounds of the new polyline using `map.fitBounds(polyline.getBounds())`.

# Anti-Patterns
- Do not allow multiple polylines to be drawn.
- Do not forget to fit the map bounds after drawing.
- Do not leave the click listener active after the line is drawn.

## Triggers

- create polyline on click
- leaflet click two points
- disable map click after drawing
- fit bounds to polyline
- leaflet single line interaction