feat: Updated drawPoints method to take NamedLocation data

API.md

@@ -41,7 +41,10 @@ DrawPoints utility function for adding points to a map based on coordinate data
 ### Parameters
 
 - `sourceName` **[String][8]** A user defined name used for determining the maplibre data source and the maplibre layers
-- `data` **([Array][13]\<Coordinate> | [Array][13]\<Feature>)** An array of coordinate data or GeoJSON Features used as the data source for maplibre
+- `data` **([Array][13]\<Coordinate> | [Array][13]\<Feature> | [Array][13]\<NamedLocation>)** An array of [coordinate](https://github.com/aws-amplify/maplibre-gl-js-amplify/blob/main/src/types.ts#L6) data, [GeoJSON Features][11], or [Named Locations](https://github.com/aws-amplify/maplibre-gl-js-amplify/blob/main/src/types.ts#L6) used as the data source for maplibre
+  - Coordinate data is an array of `Latitude` followed by `Longitude`
+  - GeoJSON Features should be an array of [Carmen GeoJSON Features][11]
+  - Named Locations is an array of objects containing the required field `coordinates` (same as the Coordinate data above) and the optional fields `title` and `address`. The `title` field will be bolded and on a separate line from the `address` field.
 - `map` **maplibre-gl-js-Map** A maplibre-gl-js [map][10] on which the points will be drawn
 - `options` **[Object][14]** An object containing options for changing the styles and features of the points rendered to the map, see the options for more details on available settings
 

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## master
 
+- Updated `drawPoints` method to take new type `NamedLocation` data so that the title for each data point can be set
+
 ## 1.0.7
 
 ### Features / Improvements 🚀

src/drawClusterLayer.ts

@@ -8,7 +8,7 @@ import {
   SymbolLayer,
 } from "maplibre-gl";
 import { ClusterOptions } from "./types";
-import { COLOR_WHITE, MARKER_COLOR, MAP_STYLES } from "./constants";
+import { COLOR_WHITE, MARKER_COLOR } from "./constants";
 import { isGeoJsonSource } from "./utils";
 import { FONT_DEFAULT_BY_STYLE } from "./constants";
 
@@ -32,7 +32,7 @@ export function drawClusterLayer(
     clusterCountLayout,
     fontColor = COLOR_WHITE,
   }: ClusterOptions,
-  mapStyle?: MAP_STYLES
+  mapStyle?: string
 ): { clusterLayerId: string; clusterSymbolLayerId: string } {
   const clusterLayerId = `${sourceName}-layer-clusters`;
   const clusterSymbolLayerId = `${sourceName}-layer-cluster-count`;

src/drawPoints.ts

@@ -1,7 +1,12 @@
 import { Feature } from "geojson";
 import { Map as maplibreMap } from "maplibre-gl";
 import { getFeaturesFromData } from "./utils";
-import { ClusterOptions, Coordinates, UnclusteredOptions } from "./types";
+import {
+  ClusterOptions,
+  Coordinates,
+  UnclusteredOptions,
+  NamedLocation,
+} from "./types";
 import { drawClusterLayer } from "./drawClusterLayer";
 import { drawUnclusteredLayer } from "./drawUnclusteredLayer";
 import { MAP_STYLES } from "./constants";
@@ -42,7 +47,7 @@ export interface DrawPointsOutput {
  */
 export function drawPoints(
   sourceName: string,
-  data: Coordinates[] | Feature[],
+  data: Coordinates[] | Feature[] | NamedLocation[],
   map: maplibreMap,
   {
     showCluster = true,

src/popupRender.ts

@@ -23,19 +23,25 @@ export function getPopupRenderFunction(
       const placeName = selectedFeature.properties.place_name.split(",");
       title = placeName[0];
       address = placeName.splice(1, placeName.length).join(",");
+    } else if (
+      strHasLength(selectedFeature.properties.title) ||
+      strHasLength(selectedFeature.properties.address)
+    ) {
+      title = selectedFeature.properties.title;
+      address = selectedFeature.properties.address;
     } else {
       title = "Coordinates";
       address = (selectedFeature.geometry as Point).coordinates;
     }
 
-    return `
-      <div class="${unclusteredLayerId}-popup" style="background: ${background}; border: ${borderWidth}px solid ${borderColor}; color: ${fontColor}; border-radius: ${radius}px; padding: ${padding}px; word-wrap: break-word; margin: -10px -10px -15px;">
-        <div class="${unclusteredLayerId}-popup-title" style="font-weight: ${fontWeight};">
-          ${title}
-        </div>
-        <div class="${unclusteredLayerId}-popup-address">
-          ${address}
-        </div>
-      </div>`;
+    const titleHtml = `<div class="${unclusteredLayerId}-popup-title" style="font-weight: ${fontWeight};">${title}</div>`;
+    const addressHtml = `<div class="${unclusteredLayerId}-popup-address">${address}</div>`;
+
+    let popupHtml = `<div class="${unclusteredLayerId}-popup" style="background: ${background}; border: ${borderWidth}px solid ${borderColor}; color: ${fontColor}; border-radius: ${radius}px; padding: ${padding}px; word-wrap: break-word; margin: -10px -10px -15px;">`;
+    if (title) popupHtml += titleHtml;
+    if (address) popupHtml += addressHtml;
+    popupHtml += "</div>";
+
+    return popupHtml;
   };
 }

src/types.ts

@@ -5,6 +5,12 @@ export type Longitude = number;
 
 export type Coordinates = [Latitude, Longitude];
 
+export type NamedLocation = {
+  coordinates: Coordinates;
+  title?: string;
+  address?: string;
+};
+
 /**
  * @param {string} defaultColor Default: #5d8aff, color of a point
  * @param {string} defaultBorderColor Default: #fff, color of the points border

src/utils.ts

@@ -1,6 +1,6 @@
 import { Feature } from "geojson";
 import { AnySourceImpl, GeoJSONSource } from "maplibre-gl";
-import { Coordinates } from "./types";
+import { Coordinates, NamedLocation } from "./types";
 
 export function isCoordinates(array: unknown): array is Coordinates {
   return (
@@ -14,6 +14,19 @@ export function isCoordinatesArray(array: unknown): array is Coordinates[] {
   return isCoordinates(array[0]);
 }
 
+export function isNamedLocation(object: unknown): object is NamedLocation {
+  return (
+    object &&
+    Array.isArray((object as NamedLocation).coordinates) &&
+    typeof (object as NamedLocation).coordinates[0] === "number" &&
+    typeof (object as NamedLocation).coordinates[1] === "number"
+  );
+}
+
+export function isNamedLocationArray(array: unknown): array is NamedLocation[] {
+  return isNamedLocation(array[0]);
+}
+
 export function isGeoJsonSource(
   source: AnySourceImpl
 ): source is GeoJSONSource {
@@ -24,7 +37,7 @@ export const strHasLength = (str: unknown): str is string =>
   typeof str === "string" && str.length > 0;
 
 export const getFeaturesFromData = (
-  data: Coordinates[] | Feature[]
+  data: Coordinates[] | Feature[] | NamedLocation[]
 ): Feature[] => {
   let features;
   if (isCoordinatesArray(data)) {
@@ -35,6 +48,14 @@ export const getFeaturesFromData = (
         properties: { place_name: `Coordinates,${point}` },
       };
     });
+  } else if (isNamedLocationArray(data)) {
+    features = data.map((location) => {
+      return {
+        type: "Feature",
+        geometry: { type: "Point", coordinates: location.coordinates },
+        properties: { title: location.title, address: location.address },
+      };
+    });
   } else {
     features = data;
   }
@@ -43,4 +64,4 @@ export const getFeaturesFromData = (
 
 export const urlEncodePeriods = (str: string): string => {
   return str.replace(/\./g, "%2E");
-}
+};