fix(static-maps): remove path grouping by style (#809)

Author: mrMetalWood

src/libraries/__tests__/create-static-maps-url.test.ts

@@ -203,6 +203,35 @@ describe('createStaticMapsUrl', () => {
     expect(url).toContain(`path=${encodedPath2}`);
   });
 
+  test('handles multiple paths with same styles', () => {
+    const url = createStaticMapsUrl({
+      ...requiredParams,
+      paths: [
+        {
+          coordinates: [{lat: 40.737102, lng: -73.990318}, 'Hamburg, Germany'],
+          color: 'red',
+          weight: 5
+        },
+        {
+          coordinates: [
+            {lat: 40.737102, lng: -73.990318},
+            {lat: 40.736102, lng: -73.989318}
+          ],
+          color: 'red',
+          weight: 5
+        }
+      ]
+    });
+    const encodedPath1 = encodeURIComponent(
+      'color:red|weight:5|40.737102,-73.990318|Hamburg, Germany'
+    ).replace(/%20/g, '+');
+    const encodedPath2 = encodeURIComponent(
+      'color:red|weight:5|40.737102,-73.990318|40.736102,-73.989318'
+    );
+    expect(url).toContain(`path=${encodedPath1}`);
+    expect(url).toContain(`path=${encodedPath2}`);
+  });
+
   test('includes style parameters', () => {
     const url = createStaticMapsUrl({
       ...requiredParams,

src/libraries/create-static-maps-url/assemble-path-params.ts

@@ -1,17 +1,52 @@
 import {formatLocation, formatParam} from './helpers';
 import {StaticMapsPath} from './types';
 
+// Style properties that can be applied to paths in the Static Maps API
+const PATH_STYLE_KEYS = ['color', 'weight', 'fillcolor', 'geodesic'] as const;
+
 /**
- * Assembles path parameters for the Static Maps Api from an array of paths.
+ * Builds the style portion of a path parameter string.
+ * @param path - The path object containing style properties
+ * @returns A string with style parameters in the format "|key:value"
+ */
+function buildStyleParams(path: StaticMapsPath): string {
+  let styleParams = '';
+
+  PATH_STYLE_KEYS.forEach(key => {
+    if (path[key] !== undefined) {
+      styleParams += `|${key}:${path[key]}`;
+    }
+  });
+
+  return styleParams;
+}
+
+/**
+ * Builds the coordinates portion of a path parameter string.
+ * @param coordinates - Either a string or array of location objects
+ * @returns A string with coordinates in the format "|lat,lng|lat,lng"
+ */
+function buildCoordinateParams(
+  coordinates: StaticMapsPath['coordinates']
+): string {
+  if (typeof coordinates === 'string') {
+    return `|${decodeURIComponent(coordinates)}`;
+  }
+
+  return coordinates.map(location => `|${formatLocation(location)}`).join('');
+}
+
+/**
+ * Assembles path parameters for the Static Maps API from an array of paths.
  *
- * This function groups paths by their style properties (color, weight, fillcolor, geodesic)
- * and then constructs a string of path parameters for each group. Each path parameter string
+ * This function constructs a string of path parameters for each path. Each path parameter string
  * includes the style properties and the coordinates of the paths.
  *
  * @param {Array<StaticMapsPath>} [paths=[]] - An array of paths to be assembled into path parameters.
  * @returns {Array<string>} An array of path parameter strings.
  *
  * @example
+ * ```typescript
  * const paths = [
  *   {
  *     color: 'red',
@@ -24,56 +59,18 @@ import {StaticMapsPath} from './types';
  * ];
  *
  * const pathParams = assemblePathParams(paths);
- * Output: [
- *    'color:red|weight:5|40.714728,-73.998672|40.718217,-73.998284'
- *  ]
+ * // Output: ['color:red|weight:5|40.714728,-73.998672|40.718217,-73.998284']
+ * ```
  */
-export function assemblePathParams(paths: Array<StaticMapsPath> = []) {
-  const pathParams: Array<string> = [];
-
-  // Group paths by their style properties (color, weight, fillcolor, geodesic)
-  // to combine paths with identical styles into single parameter strings
-  const pathsByStyle = paths?.reduce(
-    (styles, path) => {
-      const {color = 'default', weight, fillcolor, geodesic} = path;
-
-      // Create unique key for this style combination
-      const key = [color, weight, fillcolor, geodesic]
-        .filter(Boolean)
-        .join('-');
+export function assemblePathParams(
+  paths: Array<StaticMapsPath> = []
+): string[] {
+  return paths.map(path => {
+    const styleParams = buildStyleParams(path);
+    const coordinateParams = buildCoordinateParams(path.coordinates);
 
-      styles[key] = styles[key] || [];
-      styles[key].push(path);
-      return styles;
-    },
-    {} as Record<string, Array<StaticMapsPath>>
-  );
+    const pathParam = styleParams + coordinateParams;
 
-  // Process each group of paths with identical styles
-  Object.values(pathsByStyle ?? {}).forEach(paths => {
-    let pathParam = '';
-
-    // Build style parameter string using properties from first path in group
-    // since all paths in this group share the same style
-    Object.entries(paths[0]).forEach(([key, value]) => {
-      if (['color', 'weight', 'fillcolor', 'geodesic'].includes(key)) {
-        pathParam += `|${key}:${value}`;
-      }
-    });
-
-    // Add location for all marker in style group
-    for (const path of paths) {
-      if (typeof path.coordinates === 'string') {
-        pathParam += `|${decodeURIComponent(path.coordinates)}`;
-      } else {
-        for (const location of path.coordinates) {
-          pathParam += `|${formatLocation(location)}`;
-        }
-      }
-    }
-
-    pathParams.push(pathParam);
+    return formatParam(pathParam);
   });
-
-  return pathParams.map(formatParam);
 }