I have a requirement to draw a Creeping Line Ahead (CLA) pattern using Leaflet.js over a tasking area (squares, rectangles, and generic polygons). The CLA pattern includes parallel lines with shorter straight-line segments than the total width of the area to be searched.
Here's an example of the CLA pattern: 
.
The search pattern options include:
- Track spacing (distance between each parallel line segment)
- Initial heading
- First turn direction
- Distance from the edge of the search area
Here's the relevant code I've written:
<!DOCTYPE html><html><head><title>Leaflet Creeping Line Ahead Pattern</title><!-- Include Leaflet CSS --><link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /><!-- Include Leaflet JavaScript --><script src="https://unpkg.com/leaflet/dist/leaflet.js"></script><style> /* Set the size of the map */ #map { height: 500px; width: 100%; }</style></head><body><h2>Leaflet Creeping Line Ahead Pattern</h2><!-- Create a div element to hold the map --><div id="map"></div><script> // Initialize the map and set its view to a given location and zoom level var map = L.map('map').setView([9.5415, 35.2651], 14); // Add an OpenStreetMap layer to the map L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); // Define the coordinates of the rectangle const rectangleCoords = [ [9.531347, 35.25444], // top-left corner (latitude, longitude) [9.552678, 35.25444], // top-right corner (latitude, longitude) [9.552678, 35.27577], // bottom-right corner (latitude, longitude) [9.531347, 35.27577] // bottom-left corner (latitude, longitude) ]; // Create a polygon (rectangle) using the provided coordinates const rectangle = L.polygon(rectangleCoords, { color: 'blue', // Color of the rectangle border weight: 3, // Thickness of the rectangle border fillColor: 'blue', // Fill color of the rectangle fillOpacity: 0.2 // Opacity of the fill color }).addTo(map); // Function to draw the creeping line ahead pattern function drawCLA(bounds, start, initialHeading, firstTurn, trackSpacing, distanceFromEdge) { // Get the start and end points of the rectangle's longer side (e.g. east-west direction) let startPoint = start; let endPoint = [ start[0] + (bounds.getNorthEast().lng - bounds.getSouthWest().lng) * Math.cos(initialHeading * Math.PI / 180), start[1] + (bounds.getNorthEast().lng - bounds.getSouthWest().lng) * Math.sin(initialHeading * Math.PI / 180) ]; // Calculate the length of the rectangle's longer side const lineLength = bounds.getNorthEast().lng - bounds.getSouthWest().lng; // Initialize an array to hold the drawn lines const lines = []; const greyColor = 'grey'; // Draw parallel lines while (startPoint[0] <= bounds.getNorthEast().lat) { // Draw a line from the current start point to the end point const line = L.polyline([startPoint, endPoint], { color: greyColor, weight: 2 }).addTo(map); lines.push(line); // Calculate the next start and end points startPoint = [ startPoint[0] + trackSpacing, startPoint[1] ]; endPoint = [ endPoint[0] + trackSpacing, endPoint[1] ]; } return lines; } // Define the commence search point (CSP) const csp = [9.531347, 35.25444]; // CSP at the top-left corner of the rectangle // Set the initial heading, first turn, and track spacing const initialHeading = 90; // East direction (heading in degrees) const firstTurn = 'left'; // Direction of the first turn ('left' or 'right') const trackSpacing = 0.0003; // Spacing between each parallel line segment const distanceFromEdge = 0.0005; // Distance from the edge // Draw the creeping line ahead pattern inside the rectangle drawCLA(rectangle.getBounds(), csp, initialHeading, firstTurn, trackSpacing, distanceFromEdge); // Zoom the map to fit the bounds of the rectangle map.fitBounds(rectangle.getBounds());</script></body></html>However, my current implementation does not produce the expected CLA pattern. Any help on how to correctly implement the CLA pattern using Leaflet.js would be greatly appreciated.