From 1a8133a1268a1948d75b02d381cc0ad5f15e919a Mon Sep 17 00:00:00 2001 From: thaddmt <68032955+thaddmt@users.noreply.github.com> Date: Wed, 8 Sep 2021 13:07:13 -0700 Subject: [PATCH] feat: Updated drawPoints method to take NamedLocation data (#46) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 | 5 ++++- CHANGELOG.md | 2 ++ src/drawClusterLayer.ts | 4 ++-- src/drawPoints.ts | 9 +++++++-- src/popupRender.ts | 24 +++++++++++++++--------- src/types.ts | 6 ++++++ src/utils.ts | 27 ++++++++++++++++++++++++--- 7 files changed, 60 insertions(+), 17 deletions(-) diff --git a/API.md b/API.md index 3a5f09d..f3cb647 100644 --- a/API.md +++ b/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]\ | [Array][13]\)** An array of coordinate data or GeoJSON Features used as the data source for maplibre +- `data` **([Array][13]\ | [Array][13]\ | [Array][13]\)** 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 diff --git a/CHANGELOG.md b/CHANGELOG.md index 4eff946..6dddd3d 100644 --- a/CHANGELOG.md +++ b/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 🚀 diff --git a/src/drawClusterLayer.ts b/src/drawClusterLayer.ts index dc24743..c0989fe 100644 --- a/src/drawClusterLayer.ts +++ b/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`; diff --git a/src/drawPoints.ts b/src/drawPoints.ts index 04cabf5..e18ce0a 100644 --- a/src/drawPoints.ts +++ b/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, diff --git a/src/popupRender.ts b/src/popupRender.ts index c203996..18300ec 100644 --- a/src/popupRender.ts +++ b/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 ` -
-
- ${title} -
-
- ${address} -
-
`; + const titleHtml = `
${title}
`; + const addressHtml = `
${address}
`; +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 = `
`; + if (title) popupHtml += titleHtml; + if (address) popupHtml += addressHtml; + popupHtml += "
"; + + return popupHtml; }; } diff --git a/src/types.ts b/src/types.ts index 4aaae59..1e1d575 100644 --- a/src/types.ts +++ b/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 diff --git a/src/utils.ts b/src/utils.ts index 4d084ab..e9e0e28 100644 --- a/src/utils.ts +++ b/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"); -} +};