@xyo-network/react-map 2.81.10 → 2.82.0

package/src/Components/Legends/ColorGradient.tsx

@@ -1,7 +1,8 @@
 import { Typography, useTheme } from '@mui/material'
 import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import React from 'react'
 
-import { ColorGradientLegendProps } from '../../Colors/index.js'
+import { ColorGradientLegendProps } from '../../Colors/index.ts'
 
 const ColorGradientLegend: React.FC<ColorGradientLegendProps> = ({ startColor, endColor, startLabel, endLabel, heading, textColor, ...props }) => {
   const theme = useTheme()

package/src/Components/Legends/index.ts

@@ -1 +1 @@
-export * from './ColorGradient.js'
+export * from './ColorGradient.tsx'

package/src/Components/MapBox.stories.tsx

@@ -1,12 +1,12 @@
 import { Button } from '@mui/material'
 import { Decorator, Meta, StoryFn } from '@storybook/react'
 import { FlexGrowCol } from '@xylabs/react-flexbox'
-import { useRef } from 'react'
+import React, { useRef } from 'react'
 
-import { MapBoxInstanceProvider, MapSettingsProvider } from '../Contexts/index.js'
-import { DefaultMapSettings } from '../Settings/index.js'
-import { MapBox } from './MapBox.js'
-import { MapSettingsBox } from './MapSettingsComponents/index.js'
+import { MapBoxInstanceProvider, MapSettingsProvider } from '../Contexts/index.ts'
+import { DefaultMapSettings } from '../Settings/index.ts'
+import { MapBox } from './MapBox.tsx'
+import { MapSettingsBox } from './MapSettingsComponents/index.ts'
 
 const WithMapboxProviders: Decorator = (Story, props) => {
   const defaultSettings = DefaultMapSettings()
@@ -31,7 +31,6 @@ const WithMapSettingsDecorator: Decorator = (Story, args) => {
   )
 }
 
-// eslint-disable-next-line import/no-default-export
 export default {
   args: {
     accessToken: process.env.STORYBOOK_MAPBOX_TOKEN,
@@ -69,7 +68,7 @@ const ContainerResizeTemplate: StoryFn<typeof MapBox> = (args) => {
         Toggle Container minWidth
       </Button>
       <div
-        ref={(ref) => (containerRef.current = ref)}
+        ref={ref => (containerRef.current = ref)}
         style={{ minHeight: 'calc(100vh - 2rem)', minWidth: '100%', position: 'relative', transition: 'min-width 300ms ease' }}
       >
         <MapBox {...args} />

package/src/Components/MapBox.tsx

@@ -2,11 +2,11 @@
 import 'mapbox-gl/dist/mapbox-gl.css'
 
 import { Map, MapOptions } from 'mapbox-gl'
-import { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
-import { useMapBoxInstance, useMapSettings } from '../Contexts/index.js'
-import { useDynamicMapResize } from '../hooks/index.js'
-import { MapStyle } from '../lib/index.js'
+import { useMapBoxInstance, useMapSettings } from '../Contexts/index.ts'
+import { useDynamicMapResize } from '../hooks/index.ts'
+import { MapStyle } from '../lib/index.ts'
 
 export interface MapBoxProps {
   accessToken: string
@@ -60,7 +60,7 @@ export const MapBox: React.FC<MapBoxProps> = ({ accessToken, darkMode = false, o
 
   return (
     <div
-      ref={(el) => (mapContainerRef.current = el)}
+      ref={el => (mapContainerRef.current = el)}
       style={{
         bottom: 0,
         left: 0,

package/src/Components/MapBoxHeat.tsx

@@ -1,8 +1,9 @@
 import { FlexCol } from '@xylabs/react-flexbox'
+import React from 'react'
 
-import { MapboxFlexBoxProps } from '../lib/index.js'
-import { MapBox } from './MapBox.js'
-import { MapSettingsBox } from './MapSettingsComponents/index.js'
+import { MapboxFlexBoxProps } from '../lib/index.ts'
+import { MapBox } from './MapBox.tsx'
+import { MapSettingsBox } from './MapSettingsComponents/index.ts'
 
 export const MapboxHeatFlexBox: React.FC<MapboxFlexBoxProps> = ({ accessToken, children, mapBoxOptions, zoom, legend, developerMode, ...props }) => {
   return (

package/src/Components/MapBoxPoints.tsx

@@ -2,13 +2,13 @@ import { Alert } from '@mui/material'
 import { FlexCol } from '@xylabs/react-flexbox'
 import { Feature, Point } from 'geojson'
 import { MapOptions } from 'mapbox-gl'
-import { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 
-import { useMapBoxInstance, useMapSettings } from '../Contexts/index.js'
-import { MapboxFlexBoxProps } from '../lib/index.js'
-import { MapPoints } from '../MapBoxClasses/index.js'
-import { MapBox } from './MapBox.js'
-import { MapSettingsBox } from './MapSettingsComponents/index.js'
+import { useMapBoxInstance, useMapSettings } from '../Contexts/index.ts'
+import { MapboxFlexBoxProps } from '../lib/index.ts'
+import { MapPoints } from '../MapBoxClasses/index.ts'
+import { MapBox } from './MapBox.tsx'
+import { MapSettingsBox } from './MapSettingsComponents/index.ts'
 
 export interface MapboxPointsFlexBoxProps extends MapboxFlexBoxProps {
   accessToken: string
@@ -81,12 +81,14 @@ export const MapboxPointsFlexBox: React.FC<MapboxPointsFlexBoxProps> = ({
 
   return (
     <FlexCol alignItems="stretch" id="xyo-mapbox-wrap" {...props}>
-      {features ?
-        <>
-          <MapBox accessToken={accessToken} zoom={zoom} />
-          <MapSettingsBox />
-        </>
-      : <Alert severity="error">No data to show</Alert>}
+      {features
+        ? (
+            <>
+              <MapBox accessToken={accessToken} zoom={zoom} />
+              <MapSettingsBox />
+            </>
+          )
+        : <Alert severity="error">No data to show</Alert>}
     </FlexCol>
   )
 }

package/src/Components/MapSettingsComponents/Setting.tsx

@@ -1,6 +1,7 @@
 import { FormControlLabel, Switch, SwitchProps } from '@mui/material'
+import React from 'react'
 
-import { useMapSettings } from '../../Contexts/index.js'
+import { useMapSettings } from '../../Contexts/index.ts'
 
 export interface MapSettingSwitchProps extends SwitchProps {
   developerMode?: boolean
@@ -24,7 +25,9 @@ export const MapSettingSwitch: React.FC<MapSettingSwitchProps> = ({ developerMod
     return null
   }
 
-  return setting?.hidden ? null : (
-      <FormControlLabel label={setting?.label} control={<Switch checked={setting?.value} onChange={onLocalChange} {...props} />} />
-    )
+  return setting?.hidden
+    ? null
+    : (
+        <FormControlLabel label={setting?.label} control={<Switch checked={setting?.value} onChange={onLocalChange} {...props} />} />
+      )
 }

package/src/Components/MapSettingsComponents/SettingsBox.tsx

@@ -1,9 +1,10 @@
 import { Paper, Stack } from '@mui/material'
 import { FlexBoxProps, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'
 import { useAppSettings } from '@xyo-network/react-app-settings'
+import React from 'react'
 
-import { useMapSettings } from '../../Contexts/index.js'
-import { MapSettingSwitch } from './Setting.js'
+import { useMapSettings } from '../../Contexts/index.ts'
+import { MapSettingSwitch } from './Setting.tsx'
 
 export interface MapSettingsBoxProps extends FlexBoxProps {
   developerMode?: boolean
@@ -14,17 +15,19 @@ export const MapSettingsBox: React.FC<MapSettingsBoxProps> = ({ developerMode, .
   const { developerMode: devModeFromContext } = useAppSettings()
   const resolveDeveloperMode = developerMode ?? devModeFromContext
 
-  return mapSettings && resolveDeveloperMode ?
-      <FlexGrowRow bottom={36} left={10} position="absolute" {...props}>
-        <FlexRow paddingX={2}>
-          <Paper>
-            <Stack direction="row" spacing={1} marginX={1}>
-              {Object.keys(mapSettings).map((key, index) => {
-                return <MapSettingSwitch key={index} field={mapSettings[key].field} developerMode={developerMode} />
-              })}
-            </Stack>
-          </Paper>
-        </FlexRow>
-      </FlexGrowRow>
+  return mapSettings && resolveDeveloperMode
+    ? (
+        <FlexGrowRow bottom={36} left={10} position="absolute" {...props}>
+          <FlexRow paddingX={2}>
+            <Paper>
+              <Stack direction="row" spacing={1} marginX={1}>
+                {Object.keys(mapSettings).map((key, index) => {
+                  return <MapSettingSwitch key={index} field={mapSettings[key].field} developerMode={developerMode} />
+                })}
+              </Stack>
+            </Paper>
+          </FlexRow>
+        </FlexGrowRow>
+      )
     : null
 }

package/src/Components/MapSettingsComponents/index.ts

@@ -0,0 +1,2 @@
+export * from './Setting.tsx'
+export * from './SettingsBox.tsx'

package/src/Components/index.ts

@@ -1,11 +1,11 @@
-export * from './AnimatedHeatMap.js'
-export * from './AnimatedHeatMapLoaded.js'
-export * from './FeaturesToLayersMap.js'
-export * from './HeatMapSettings.js'
-export * from './LayerAnimator.js'
-export * from './Legend.js'
-export * from './Legends/index.js'
-export * from './MapBox.js'
-export * from './MapBoxHeat.js'
-export * from './MapBoxPoints.js'
-export * from './MapSettingsComponents/index.js'
+export * from './AnimatedHeatMap.tsx'
+export * from './AnimatedHeatMapLoaded.tsx'
+export * from './FeaturesToLayersMap.ts'
+export * from './HeatMapSettings.ts'
+export * from './LayerAnimator.tsx'
+export * from './Legend.tsx'
+export * from './Legends/index.ts'
+export * from './MapBox.tsx'
+export * from './MapBoxHeat.tsx'
+export * from './MapBoxPoints.tsx'
+export * from './MapSettingsComponents/index.ts'

package/src/Contexts/HeatMapInitializer/Context.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react'
 
-import { HeatMapInitializerState } from './State.js'
+import { HeatMapInitializerState } from './State.ts'
 
 const HeatMapInitializerContext = createContext<HeatMapInitializerState>({})
 

package/src/Contexts/HeatMapInitializer/Provider.tsx

@@ -1,16 +1,16 @@
 import { forget } from '@xylabs/forget'
 import { WithChildren } from '@xylabs/react-shared'
 import { Feature, Polygon } from 'geojson'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 
-import { AnimatedHeatMapColorProps, HeatMapColorProps } from '../../Colors/index.js'
-import { useDynamicPositioning } from '../../hooks/index.js'
-import { MapLayer } from '../../Layers/index.js'
-import { MapHeat } from '../../MapBoxClasses/index.js'
-import { useMapBoxInstance } from '../MapBoxInstance/index.js'
-import { useMapSettings } from '../MapSettings/index.js'
-import { HeatMapInitializerContext } from './Context.js'
-import { HeatMapInitializerState } from './State.js'
+import { AnimatedHeatMapColorProps, HeatMapColorProps } from '../../Colors/index.ts'
+import { useDynamicPositioning } from '../../hooks/index.ts'
+import { MapLayer } from '../../Layers/index.ts'
+import { MapHeat } from '../../MapBoxClasses/index.ts'
+import { useMapBoxInstance } from '../MapBoxInstance/index.ts'
+import { useMapSettings } from '../MapSettings/index.ts'
+import { HeatMapInitializerContext } from './Context.ts'
+import { HeatMapInitializerState } from './State.ts'
 
 export interface MapInitializerProviderProps {
   featureSets?: Feature<Polygon>[][]
@@ -37,10 +37,10 @@ export const HeatMapInitializerProvider: React.FC<WithChildren<MapInitializerPro
   const { mapSettings } = useMapSettings()
   const { map, mapInitialized } = useMapBoxInstance()
 
-  const value: HeatMapInitializerState = {
+  const value: HeatMapInitializerState = useMemo(() => ({
     MapHeat: mapHeat,
     heatMapColorProps,
-  }
+  }), [mapHeat, heatMapColorProps])
 
   useEffect(() => {
     if (mapInitialized && featureSets?.length && featureSets[0].length > 0 && map && featureSetsLayers?.length) {

package/src/Contexts/HeatMapInitializer/State.ts

@@ -1,5 +1,5 @@
-import { HeatMapColorProps } from '../../Colors/index.js'
-import { MapHeat } from '../../MapBoxClasses/index.js'
+import { HeatMapColorProps } from '../../Colors/index.ts'
+import { MapHeat } from '../../MapBoxClasses/index.ts'
 
 export interface HeatMapInitializerState {
   MapHeat?: MapHeat

package/src/Contexts/HeatMapInitializer/index.ts

@@ -1,3 +1,3 @@
-export * from './Provider.js'
-export * from './State.js'
-export * from './useHeatMapInitializer.js'
+export * from './Provider.tsx'
+export * from './State.ts'
+export * from './useHeatMapInitializer.tsx'

package/src/Contexts/HeatMapInitializer/useHeatMapInitializer.tsx

@@ -1,7 +1,7 @@
 import { assertEx } from '@xylabs/assert'
 import { useContext } from 'react'
 
-import { HeatMapInitializerContext } from './Context.js'
+import { HeatMapInitializerContext } from './Context.ts'
 
 const useHeatMapInitializer = () => {
   const context = useContext(HeatMapInitializerContext)

package/src/Contexts/MapBoxInstance/Context.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react'
 
-import { MapBoxInstanceState } from './State.js'
+import { MapBoxInstanceState } from './State.ts'
 
 const MapBoxInstanceContext = createContext<MapBoxInstanceState>({})
 

package/src/Contexts/MapBoxInstance/Provider.tsx

@@ -1,15 +1,14 @@
 import { WithChildren } from '@xylabs/react-shared'
 import { Map } from 'mapbox-gl'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 
-import { MapBoxInstanceContext } from './Context.js'
-import { MapBoxInstanceState } from './State.js'
+import { MapBoxInstanceContext } from './Context.ts'
 
 export const MapBoxInstanceProvider: React.FC<WithChildren> = ({ children }) => {
   const [map, setMapBoxInstance] = useState<Map>()
   const [mapInitialized, setMapInitialized] = useState(false)
 
-  const value: MapBoxInstanceState = { map, mapInitialized, setMapBoxInstance }
+  const value = useMemo(() => ({ map, mapInitialized, setMapBoxInstance }), [map, mapInitialized, setMapBoxInstance])
 
   useEffect(() => {
     if (!mapInitialized && map) {

package/src/Contexts/MapBoxInstance/index.ts

@@ -1,3 +1,3 @@
-export * from './Provider.js'
-export * from './State.js'
-export * from './useMapBoxInstance.js'
+export * from './Provider.tsx'
+export * from './State.ts'
+export * from './useMapBoxInstance.tsx'

package/src/Contexts/MapBoxInstance/useMapBoxInstance.tsx

@@ -1,7 +1,7 @@
 import { assertEx } from '@xylabs/assert'
 import { useContext } from 'react'
 
-import { MapBoxInstanceContext } from './Context.js'
+import { MapBoxInstanceContext } from './Context.ts'
 
 const useMapBoxInstance = () => {
   const context = useContext(MapBoxInstanceContext)

package/src/Contexts/MapSettings/Context.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react'
 
-import { MapSettingsState } from './State.js'
+import { MapSettingsState } from './State.ts'
 
 const MapSettingsContext = createContext<MapSettingsState>({})
 

package/src/Contexts/MapSettings/Provider.tsx

@@ -1,11 +1,11 @@
 import { WithChildren } from '@xylabs/react-shared'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 
-import { MapSettings } from '../../MapBoxClasses/index.js'
-import { MapSetting } from '../../Settings/index.js'
-import { useMapBoxInstance } from '../MapBoxInstance/index.js'
-import { MapSettingsContext } from './Context.js'
-import { MapSettingsState } from './State.js'
+import { MapSettings } from '../../MapBoxClasses/index.ts'
+import { MapSetting } from '../../Settings/index.ts'
+import { useMapBoxInstance } from '../MapBoxInstance/index.ts'
+import { MapSettingsContext } from './Context.ts'
+import { MapSettingsState } from './State.ts'
 
 export interface MapSettingsProviderProps {
   debugLayerName?: string
@@ -24,10 +24,10 @@ export const MapSettingsProvider: React.FC<WithChildren<MapSettingsProviderProps
   const [mapSettings, setMapSettings] = useState<MapSetting>(defaultMapSettings || {})
   const { map, mapInitialized } = useMapBoxInstance()
 
-  const value: MapSettingsState = {
+  const value: MapSettingsState = useMemo(() => ({
     mapSettings,
     setMapSettings,
-  }
+  }), [mapSettings, setMapSettings])
 
   useEffect(() => {
     if (mapSettings && map && mapInitialized) {

package/src/Contexts/MapSettings/State.ts

@@ -1,6 +1,6 @@
 import { Dispatch } from 'react'
 
-import { MapSetting } from '../../Settings/index.js'
+import { MapSetting } from '../../Settings/index.ts'
 
 export interface MapSettingsState {
   mapSettings?: MapSetting

package/src/Contexts/MapSettings/index.ts

@@ -1,3 +1,3 @@
-export * from './Provider.js'
-export * from './State.js'
-export * from './useMapSettings.js'
+export * from './Provider.tsx'
+export * from './State.ts'
+export * from './useMapSettings.tsx'

package/src/Contexts/MapSettings/useMapSettings.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react'
 
-import { MapSettingsContext } from './Context.js'
+import { MapSettingsContext } from './Context.ts'
 
 const useMapSettings = () => {
   const context = useContext(MapSettingsContext)

package/src/Contexts/MapboxAccessToken/Context.ts

@@ -1,5 +1,5 @@
 import { createContextEx } from '@xyo-network/react-shared'
 
-import { MapboxAccessTokenContextState } from './State.js'
+import { MapboxAccessTokenContextState } from './State.ts'
 
 export const MapboxAccessTokenContext = createContextEx<MapboxAccessTokenContextState>()

package/src/Contexts/MapboxAccessToken/Provider.tsx

@@ -1,7 +1,7 @@
 import { WithChildren } from '@xylabs/react-shared'
-import { useState } from 'react'
+import React, { useState } from 'react'
 
-import { MapboxAccessTokenContext } from './Context.js'
+import { MapboxAccessTokenContext } from './Context.ts'
 
 export interface MapboxAccessTokenProviderProps {
   defaultAccessToken?: string
@@ -10,5 +10,6 @@ export interface MapboxAccessTokenProviderProps {
 export const MapboxAccessTokenProvider: React.FC<WithChildren<MapboxAccessTokenProviderProps>> = ({ defaultAccessToken, ...props }) => {
   const [accessToken, setAccessToken] = useState<string>()
 
+  // eslint-disable-next-line @eslint-react/no-unstable-context-value
   return <MapboxAccessTokenContext.Provider value={{ accessToken: accessToken ?? defaultAccessToken, provided: true, setAccessToken }} {...props} />
 }

package/src/Contexts/MapboxAccessToken/index.ts

@@ -1,4 +1,4 @@
-export * from './Context.js'
-export * from './Provider.js'
-export * from './State.js'
-export * from './use.js'
+export * from './Context.ts'
+export * from './Provider.tsx'
+export * from './State.ts'
+export * from './use.ts'

package/src/Contexts/MapboxAccessToken/use.ts

@@ -1,6 +1,6 @@
 import { useContextEx } from '@xyo-network/react-shared'
 
-import { MapboxAccessTokenContext } from './Context.js'
+import { MapboxAccessTokenContext } from './Context.ts'
 
 export const useMapboxAccessToken = (required = false) => {
   return useContextEx(MapboxAccessTokenContext, 'MapboxAccessToken', required)

package/src/Contexts/index.ts

@@ -1,4 +1,4 @@
-export * from './HeatMapInitializer/index.js'
-export * from './MapboxAccessToken/index.js'
-export * from './MapBoxInstance/index.js'
-export * from './MapSettings/index.js'
+export * from './HeatMapInitializer/index.ts'
+export * from './MapboxAccessToken/index.ts'
+export * from './MapBoxInstance/index.ts'
+export * from './MapSettings/index.ts'

package/src/Layers/Builders/LocationHeatMapLayerBuilder.ts

@@ -1,7 +1,7 @@
-import { HeatMapFillLayerConfig, HeatMapLineLayerConfig, HeatMapSymbolLayerConfig } from '../Configs/index.js'
-import { FillLayerBuilder } from '../FillLayer.js'
-import { LineLayerBuilder } from '../LineLayer.js'
-import { SymbolLayerBuilder } from '../SymbolLayer.js'
+import { HeatMapFillLayerConfig, HeatMapLineLayerConfig, HeatMapSymbolLayerConfig } from '../Configs/index.ts'
+import { FillLayerBuilder } from '../FillLayer.ts'
+import { LineLayerBuilder } from '../LineLayer.ts'
+import { SymbolLayerBuilder } from '../SymbolLayer.ts'
 
 export const MapHeatConstants = {
   LocationDebugLayerId: 'location-debug-id',

package/src/Layers/Builders/LocationHeatMapLayerBuilderAnimated.ts

@@ -1,5 +1,5 @@
-import { HeatMapFillLayerConfig } from '../Configs/index.js'
-import { FillLayerBuilder } from '../FillLayer.js'
+import { HeatMapFillLayerConfig } from '../Configs/index.ts'
+import { FillLayerBuilder } from '../FillLayer.ts'
 
 const MapHeatConstants = (index: number, type: string) => ({
   LocationDebugLayerId: `location-${type}-debug-id-${index}`,

package/src/Layers/Builders/LocationPointsMapLayerBuilder.ts

@@ -1,5 +1,5 @@
-import { CircleLayerBuilder } from '../CircleLayer.js'
-import { LocationPointLayerConfig } from '../Configs/index.js'
+import { CircleLayerBuilder } from '../CircleLayer.ts'
+import { LocationPointLayerConfig } from '../Configs/index.ts'
 
 export const MapPointsConstants = {
   LocationDotsLayerId: 'location-dots',

package/src/Layers/Builders/index.ts

@@ -1,3 +1,3 @@
-export * from './LocationHeatMapLayerBuilder.js'
-export * from './LocationHeatMapLayerBuilderAnimated.js'
-export * from './LocationPointsMapLayerBuilder.js'
+export * from './LocationHeatMapLayerBuilder.ts'
+export * from './LocationHeatMapLayerBuilderAnimated.ts'
+export * from './LocationPointsMapLayerBuilder.ts'

package/src/Layers/CircleLayer.ts

@@ -11,6 +11,7 @@ export class CircleLayerBuilder extends LayerBase<CircleLayerSpecification> {
     super(id, source)
     this.CircleLayerOptions = CircleLayerOptions || { id: this.id, source: this.source, type: 'circle' }
   }
+
   buildLayer(): CircleLayerSpecification {
     return {
       filter: ['==', '$type', 'Point'],

package/src/Layers/Configs/HeatMapFillLayerConfig.ts

@@ -1,6 +1,6 @@
 import { FillLayerSpecification } from 'mapbox-gl'
 
-export const HeatMapFillLayerConfig: (color: string) => Partial<FillLayerSpecification> = (color) => ({
+export const HeatMapFillLayerConfig: (color: string) => Partial<FillLayerSpecification> = color => ({
   paint: {
     'fill-color': color,
     'fill-opacity': [

package/src/Layers/Configs/HeatMapLineLayerConfig.ts

@@ -1,6 +1,6 @@
 import { LineLayerSpecification } from 'mapbox-gl'
 
-export const HeatMapLineLayerConfig: (color: string) => Partial<LineLayerSpecification> = (color) => ({
+export const HeatMapLineLayerConfig: (color: string) => Partial<LineLayerSpecification> = color => ({
   layout: {
     // Enable for debugging
     visibility: 'none',

package/src/Layers/Configs/HeatMapSymbolLayerConfig.ts

@@ -1,6 +1,6 @@
 import { SymbolLayerSpecification } from 'mapbox-gl'
 
-export const HeatMapSymbolLayerConfig: (color: string) => Partial<SymbolLayerSpecification> = (color) => ({
+export const HeatMapSymbolLayerConfig: (color: string) => Partial<SymbolLayerSpecification> = color => ({
   layout: {
     'text-anchor': 'center',
     'text-field': [
@@ -12,7 +12,7 @@ export const HeatMapSymbolLayerConfig: (color: string) => Partial<SymbolLayerSpe
       ['to-string', ['get', 'count']],
     ],
     'text-size': 10,
-    visibility: 'none',
+    'visibility': 'none',
   },
   paint: {
     'text-color': color,

package/src/Layers/Configs/index.ts

@@ -1,4 +1,4 @@
-export * from './HeatMapFillLayerConfig.js'
-export * from './HeatMapLineLayerConfig.js'
-export * from './HeatMapSymbolLayerConfig.js'
-export * from './LocationPointLayerConfig.js'
+export * from './HeatMapFillLayerConfig.ts'
+export * from './HeatMapLineLayerConfig.ts'
+export * from './HeatMapSymbolLayerConfig.ts'
+export * from './LocationPointLayerConfig.ts'

package/src/Layers/FillLayer.ts

@@ -11,6 +11,7 @@ export class FillLayerBuilder extends LayerBase<FillLayerSpecification> {
     super(id, source)
     this.FillLayerOptions = FillLayerOptions || { id: this.id, source: this.source }
   }
+
   buildLayer(): FillLayerSpecification {
     return {
       ...this.FillLayerOptions,

package/src/Layers/LineLayer.ts

@@ -11,6 +11,7 @@ export class LineLayerBuilder extends LayerBase<LineLayerSpecification> {
     super(id, source)
     this.LineLayerOptions = LineLayerOptions || { id: this.id, source: this.source }
   }
+
   buildLayer(): LineLayerSpecification {
     return {
       ...this.LineLayerOptions,

package/src/Layers/SymbolLayer.ts

@@ -11,6 +11,7 @@ export class SymbolLayerBuilder extends LayerBase<SymbolLayerSpecification> {
     super(id, source)
     this.SymbolLayerOptions = SymbolLayerOptions || { id: this.id, source: this.source }
   }
+
   buildLayer(): SymbolLayerSpecification {
     return {
       ...this.SymbolLayerOptions,

package/src/Layers/index.ts

@@ -1,7 +1,7 @@
-export * from './Builders/index.js'
-export * from './CircleLayer.js'
-export * from './Configs/index.js'
-export * from './FillLayer.js'
-export * from './LineLayer.js'
-export * from './MapLayer.js'
-export * from './SymbolLayer.js'
+export * from './Builders/index.ts'
+export * from './CircleLayer.ts'
+export * from './Configs/index.ts'
+export * from './FillLayer.ts'
+export * from './LineLayer.ts'
+export * from './MapLayer.ts'
+export * from './SymbolLayer.ts'

package/src/MapBoxClasses/MapBase.ts

@@ -3,7 +3,7 @@ import { GeoJson } from '@xyo-network/sdk-geo'
 import { Feature, Geometry } from 'geojson'
 import { GeoJSONSource, Map } from 'mapbox-gl'
 
-import { MapLayer } from '../Layers/index.js'
+import { MapLayer } from '../Layers/index.ts'
 
 export interface MapBaseConfig<T extends Geometry> {
   features: Feature<T>[]