@xyo-network/react-map 7.5.7 → 7.5.11

package/src/hooks/useDynamicPositioning.tsx

@@ -1,68 +0,0 @@
-import { useWindowSize } from '@xylabs/react-shared'
-import type { MapOptions } from 'mapbox-gl'
-import { useMemo } from 'react'
-
-/**
- * Zoom level for the map
- *
- * Note: Changing zoom will require changes to Lat/Lng Ranges
- */
-const defaultZoom = 1.6
-
-/**
- * Range of aspect ratio values (width / height = aspect ratio) to scale against degrees
- * On lower aspect ratios, the width is larger than the height and vice-versa for higher
- */
-const defaultAspectRatioRange = [0.5, 2]
-
-/**
- * Lat/Lng ranges, the first index is the minimum and the second is the maximum
- * Index 0 is for portrait screens and centers on the Eastern Hemisphere
- * Index 1 is for wider screens near the Prime Meridian and north of the Equator
- *
- * Note: Values are based off the zoom level
- */
-const latRange = [0.912_164_420_526_366_4, 1.717_850_315_594_39]
-const lngRange = [-81.474_201_485_195_9, 12.788_958_675_506_933]
-
-/**
- * Function to interpolate an aspect ratio value across a range of degrees and aspect ratios
- *
- * Inspired by - https://stackoverflow.com/questions/14224535/scaling-between-two-number-ranges
- *
- * @param aspectRatio aspect ratio to scale
- * @param degreeRange A latitude or longitude range (i.e. [minLat, maxLat])
- * @param aspectRatioRange A range of aspect ratios to scale against degreeRange parameter
- * @returns number
- */
-const linearInterpolate = (aspectRatio: number, degreeRange: number[], aspectRatioRange?: number[]): number => {
-  const [degreeMin, degreeMax] = degreeRange
-  const [aspectRatioMin, aspectRatioMax] = aspectRatioRange || defaultAspectRatioRange
-
-  const aspectRatioRangeSpan = aspectRatioMax - aspectRatioMin
-  const degreeRangeSpan = degreeMax - degreeMin
-
-  const percent = (aspectRatio - aspectRatioMin) / aspectRatioRangeSpan
-  const scaledDegree = percent * degreeRangeSpan + degreeMin
-
-  return scaledDegree
-}
-
-const useDynamicPositioning = () => {
-  const { width, height } = useWindowSize()
-
-  const options = useMemo(() => {
-    if (width && height) {
-      const aspectRatio = width / height
-
-      return {
-        center: [linearInterpolate(aspectRatio, lngRange), linearInterpolate(aspectRatio, latRange)],
-        zoom: defaultZoom,
-      } as Partial<MapOptions>
-    }
-  }, [height, width])
-
-  return { options }
-}
-
-export { useDynamicPositioning }

package/src/hooks/useQuadKeyPayloadsToFeatures.tsx

@@ -1,54 +0,0 @@
-import { GeoJson } from '@xylabs/geo'
-import { exists } from '@xylabs/sdk-js'
-import type { NetworkLocationHeatmapQuadkeyAnswerPayload } from '@xyo-network/react-map-model'
-import type { Feature, Geometry } from 'geojson'
-import { useEffect, useState } from 'react'
-
-const quadKeyToFeature = ({ density, quadkey }: { density: number; quadkey: string }) => {
-  const polygonFeature = new GeoJson(quadkey).polygonFeature()
-  polygonFeature.properties = {
-    count: density,
-    density,
-  }
-  return polygonFeature
-}
-
-const setDensity = (feature: Feature) => {
-  if (feature.properties) {
-    feature.properties.value = feature.properties.density / 5
-  }
-  return feature
-}
-
-const useQuadKeyPayloadsToFeatures = (payloads?: NetworkLocationHeatmapQuadkeyAnswerPayload[] | NetworkLocationHeatmapQuadkeyAnswerPayload) => {
-  const [multipleFeatureSets, setMultipleFeatureSets] = useState<Feature<Geometry>[][]>([[]])
-  const [features, setFeatures] = useState<Feature<Geometry>[]>([])
-  const [error, setError] = useState<Error>()
-
-  useEffect(() => {
-    // Convert Multiple Payloads from Quadkey to GeoJson
-    if (Array.isArray(payloads)) {
-      if ((payloads)?.filter(exists).length > 0) {
-        const mappedFeatures = payloads?.map(payload => payload?.result.map(quadKeyToFeature))
-
-        setMultipleFeatureSets(mappedFeatures.map(features => features?.map(setDensity) ?? []))
-      } else {
-        setError(new Error('Cannot find payloads for provided hashes'))
-      }
-    }
-
-    // Convert Single Payload from Quadkey to GeoJson
-    if (payloads && (payloads as NetworkLocationHeatmapQuadkeyAnswerPayload).result) {
-      const singlePayload = payloads as NetworkLocationHeatmapQuadkeyAnswerPayload
-      const mappedFeatures = singlePayload.result.map(quadKeyToFeature)
-
-      setFeatures(mappedFeatures.map(setDensity))
-    }
-  }, [payloads])
-
-  return {
-    error, features, multipleFeatureSets,
-  }
-}
-
-export { useQuadKeyPayloadsToFeatures }

package/src/index.ts

@@ -1,5 +0,0 @@
-export * from './Components/index.ts'
-export * from './Contexts/index.ts'
-export * from './hooks/index.ts'
-export * from './Layers/index.ts'
-export * from './MapBoxClasses/index.ts'

package/src/lib/MapBoxBaseProps.ts

@@ -1,20 +0,0 @@
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import type { Feature } from 'geojson'
-import type { MapOptions } from 'mapbox-gl'
-import type { ReactNode } from 'react'
-
-import type { MapLayer } from '../Layers/index.ts'
-
-export interface MapboxFlexBoxProps extends FlexBoxProps {
-  accessToken: string
-  developerMode?: boolean
-  disableControls?: boolean
-  disableFitToPoints?: boolean
-  features?: Feature[]
-  fitToPointsPadding?: number
-  layers?: MapLayer[]
-  legend?: ReactNode
-  mapBoxOptions?: Partial<MapOptions>
-  requestLocation?: boolean
-  zoom?: number
-}

package/src/lib/index.ts

@@ -1 +0,0 @@
-export * from './MapBoxBaseProps.ts'