feat: Updated drawPoints method to take NamedLocation data (#46)

* feat: Updated drawPoints method to take NamedLocation data

* Update src/popupRender.ts

Co-authored-by: Tré Ammatuna <16496746+TreTuna@users.noreply.github.com>

Co-authored-by: Tré Ammatuna <16496746+TreTuna@users.noreply.github.com>

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>`;
+const popupHtmlStyle = `background: ${background}; border: ${borderWidth}px solid ${borderColor}; color: ${fontColor}; border-radius: ${radius}px; padding: ${padding}px; word-wrap: break-word; margin: -10px -10px -15px;`
+let popupHtml = `<div class="${unclusteredLayerId}-popup" style="${popupHtmlStyle}">`;
+ 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");
-}
+};