@smartnet360/svelte-components 0.0.56 → 0.0.58

package/dist/map-v2/core/components/ViewportSync.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	/**
+	 * ViewportSync - Synchronizes map viewport changes with ViewportStore
+	 * 
+	 * This component:
+	 * - Gets map instance from MapboxProvider context
+	 * - Listens to moveend/zoomend events
+	 * - Updates viewport store when map moves/zooms
+	 * - Handles cleanup on unmount
+	 * 
+	 * Usage:
+	 * ```svelte
+	 * <MapboxProvider center={viewport.center} zoom={viewport.zoom}>
+	 *   <ViewportSync store={viewport} />
+	 *   <!-- other layers and controls -->
+	 * </MapboxProvider>
+	 * ```
+	 */
+	import { getContext, onDestroy } from 'svelte';
+	import type { MapStore } from '../types';
+	import type { ViewportStore } from '../stores/viewportStore.svelte';
+	import { MAP_CONTEXT_KEY } from '../types';
+
+	interface Props {
+		/** Viewport store to sync with */
+		store: ViewportStore;
+	}
+
+	let { store }: Props = $props();
+
+	const mapStore = getContext<MapStore>(MAP_CONTEXT_KEY);
+	let map = $derived($mapStore);
+
+	// Track event listener cleanup functions
+	let cleanupFunctions: Array<() => void> = [];
+
+	// Sync map viewport to store on move/zoom end
+	$effect(() => {
+		if (!map) return;
+
+		// Handler to update store with current map viewport
+		const handleViewportChange = () => {
+			const center = map.getCenter();
+			const zoom = map.getZoom();
+			const bearing = map.getBearing();
+			const pitch = map.getPitch();
+
+			// Bulk update for efficiency
+			store.updateViewport({
+				center: [center.lng, center.lat],
+				zoom,
+				bearing,
+				pitch
+			});
+		};
+
+		// Listen to moveend (fires after pan, zoom, rotate, pitch)
+		map.on('moveend', handleViewportChange);
+
+		// Store cleanup function
+		cleanupFunctions.push(() => {
+			map?.off('moveend', handleViewportChange);
+		});
+
+		// Cleanup when effect re-runs or component unmounts
+		return () => {
+			cleanupFunctions.forEach(cleanup => cleanup());
+			cleanupFunctions = [];
+		};
+	});
+
+	onDestroy(() => {
+		// Final cleanup on unmount
+		cleanupFunctions.forEach(cleanup => cleanup());
+		cleanupFunctions = [];
+	});
+</script>
+
+<!-- This component doesn't render anything, it's just for side effects -->

package/dist/map-v2/core/components/ViewportSync.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ViewportStore } from '../stores/viewportStore.svelte';
+interface Props {
+    /** Viewport store to sync with */
+    store: ViewportStore;
+}
+declare const ViewportSync: import("svelte").Component<Props, {}, "">;
+type ViewportSync = ReturnType<typeof ViewportSync>;
+export default ViewportSync;

package/dist/map-v2/core/index.d.ts

@@ -6,6 +6,8 @@
 export type { MapStore } from './types';
 export { MAP_CONTEXT_KEY } from './types';
 export { default as MapboxProvider } from './providers/MapboxProvider.svelte';
+export { default as ViewportSync } from './components/ViewportSync.svelte';
 export { default as MapStyleControl } from './controls/MapStyleControl.svelte';
 export { createMapStore } from './stores/mapStore';
+export { createViewportStore, type ViewportStore, type ViewportState } from './stores/viewportStore.svelte';
 export { useMapbox, tryUseMapbox } from './hooks/useMapbox';

package/dist/map-v2/core/index.js

@@ -6,9 +6,12 @@
 export { MAP_CONTEXT_KEY } from './types';
 // Providers
 export { default as MapboxProvider } from './providers/MapboxProvider.svelte';
+// Components
+export { default as ViewportSync } from './components/ViewportSync.svelte';
 // Controls
 export { default as MapStyleControl } from './controls/MapStyleControl.svelte';
 // Stores
 export { createMapStore } from './stores/mapStore';
+export { createViewportStore } from './stores/viewportStore.svelte';
 // Hooks
 export { useMapbox, tryUseMapbox } from './hooks/useMapbox';

package/dist/map-v2/core/stores/viewportStore.svelte.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Viewport Store - Manages and persists map viewport state (center, zoom, pitch, bearing)
+ *
+ * Features:
+ * - Reactive state using Svelte 5 runes
+ * - Auto-persists to localStorage via $effect
+ * - Namespace isolation for multiple map instances
+ * - Provides getters/setters for direct binding
+ *
+ * Usage:
+ * ```svelte
+ * const viewport = createViewportStore('my-map', {
+ *   center: [-122.4194, 37.7749],
+ *   zoom: 12
+ * });
+ *
+ * <MapboxProvider center={viewport.center} zoom={viewport.zoom}>
+ *   <ViewportSync store={viewport} />
+ * </MapboxProvider>
+ * ```
+ */
+export interface ViewportState {
+    /** Map center [lng, lat] */
+    center: [number, number];
+    /** Zoom level */
+    zoom: number;
+    /** Map bearing (rotation) in degrees */
+    bearing: number;
+    /** Map pitch (tilt) in degrees */
+    pitch: number;
+}
+export interface ViewportStore {
+    readonly center: [number, number];
+    readonly zoom: number;
+    readonly bearing: number;
+    readonly pitch: number;
+    setCenter(center: [number, number]): void;
+    setZoom(zoom: number): void;
+    setBearing(bearing: number): void;
+    setPitch(pitch: number): void;
+    updateViewport(state: Partial<ViewportState>): void;
+    reset(): void;
+}
+/**
+ * Create a viewport store with persistence
+ *
+ * @param namespace - Unique identifier for localStorage key
+ * @param defaults - Default viewport values (used if no saved state exists)
+ * @returns ViewportStore instance
+ */
+export declare function createViewportStore(namespace: string, defaults?: Partial<ViewportState>): ViewportStore;

package/dist/map-v2/core/stores/viewportStore.svelte.js

@@ -0,0 +1,120 @@
+/**
+ * Viewport Store - Manages and persists map viewport state (center, zoom, pitch, bearing)
+ *
+ * Features:
+ * - Reactive state using Svelte 5 runes
+ * - Auto-persists to localStorage via $effect
+ * - Namespace isolation for multiple map instances
+ * - Provides getters/setters for direct binding
+ *
+ * Usage:
+ * ```svelte
+ * const viewport = createViewportStore('my-map', {
+ *   center: [-122.4194, 37.7749],
+ *   zoom: 12
+ * });
+ *
+ * <MapboxProvider center={viewport.center} zoom={viewport.zoom}>
+ *   <ViewportSync store={viewport} />
+ * </MapboxProvider>
+ * ```
+ */
+const DEFAULT_STATE = {
+    center: [0, 0],
+    zoom: 2,
+    bearing: 0,
+    pitch: 0
+};
+/**
+ * Load viewport state from localStorage
+ */
+function loadViewportState(namespace, defaults) {
+    if (typeof window === 'undefined') {
+        return { ...DEFAULT_STATE, ...defaults };
+    }
+    try {
+        const key = `${namespace}:viewport`;
+        const stored = localStorage.getItem(key);
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            return {
+                center: parsed.center || defaults.center || DEFAULT_STATE.center,
+                zoom: parsed.zoom ?? defaults.zoom ?? DEFAULT_STATE.zoom,
+                bearing: parsed.bearing ?? defaults.bearing ?? DEFAULT_STATE.bearing,
+                pitch: parsed.pitch ?? defaults.pitch ?? DEFAULT_STATE.pitch
+            };
+        }
+    }
+    catch (error) {
+        console.warn('Failed to load viewport state:', error);
+    }
+    return { ...DEFAULT_STATE, ...defaults };
+}
+/**
+ * Save viewport state to localStorage
+ */
+function saveViewportState(namespace, state) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        const key = `${namespace}:viewport`;
+        localStorage.setItem(key, JSON.stringify(state));
+    }
+    catch (error) {
+        console.warn('Failed to save viewport state:', error);
+    }
+}
+/**
+ * Create a viewport store with persistence
+ *
+ * @param namespace - Unique identifier for localStorage key
+ * @param defaults - Default viewport values (used if no saved state exists)
+ * @returns ViewportStore instance
+ */
+export function createViewportStore(namespace, defaults = {}) {
+    // Load initial state
+    let state = $state(loadViewportState(namespace, defaults));
+    // Auto-save to localStorage on any change
+    $effect(() => {
+        saveViewportState(namespace, state);
+    });
+    return {
+        // Getters
+        get center() { return state.center; },
+        get zoom() { return state.zoom; },
+        get bearing() { return state.bearing; },
+        get pitch() { return state.pitch; },
+        // Setters
+        setCenter(center) {
+            state.center = center;
+        },
+        setZoom(zoom) {
+            state.zoom = zoom;
+        },
+        setBearing(bearing) {
+            state.bearing = bearing;
+        },
+        setPitch(pitch) {
+            state.pitch = pitch;
+        },
+        // Bulk update (more efficient than individual setters)
+        updateViewport(updates) {
+            if (updates.center !== undefined)
+                state.center = updates.center;
+            if (updates.zoom !== undefined)
+                state.zoom = updates.zoom;
+            if (updates.bearing !== undefined)
+                state.bearing = updates.bearing;
+            if (updates.pitch !== undefined)
+                state.pitch = updates.pitch;
+        },
+        // Reset to defaults
+        reset() {
+            const resetState = { ...DEFAULT_STATE, ...defaults };
+            state.center = resetState.center;
+            state.zoom = resetState.zoom;
+            state.bearing = resetState.bearing;
+            state.pitch = resetState.pitch;
+        }
+    };
+}

package/dist/map-v2/demo/DemoMap.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	/**
-	 * DemoMap - Complete demo of map-v2 site feature
+	 * DemoMap - Complete demo of map-v2 site and cell features
 	 *
 	 * Demonstrates:
 	 * - Simplified MapboxProvider with automatic initialization
@@ -8,14 +8,24 @@
 	 * - SitesLayer rendering sites from store
 	 * - SiteFilterControl for hierarchical filtering
 	 * - SiteSizeSlider for visual property adjustment
+	 * - CellsLayer rendering cells with arc geometries
+	 * - CellFilterControl with dynamic hierarchical grouping
+	 * - CellStyleControl for cell visual settings
 	 */
 	import MapboxProvider from '../core/providers/MapboxProvider.svelte';
 	import MapStyleControl from '../core/controls/MapStyleControl.svelte';
+	import ViewportSync from '../core/components/ViewportSync.svelte';
 	import SitesLayer from '../features/sites/layers/SitesLayer.svelte';
 	import SiteFilterControl from '../features/sites/controls/SiteFilterControl.svelte';
 	import SiteSizeSlider from '../features/sites/controls/SiteSizeSlider.svelte';
+	import CellsLayer from '../features/cells/layers/CellsLayer.svelte';
+	import CellFilterControl from '../features/cells/controls/CellFilterControl.svelte';
+	import CellStyleControl from '../features/cells/controls/CellStyleControl.svelte';
 	import { createSiteStoreContext } from '../features/sites/stores/siteStoreContext.svelte';
+	import { createCellStoreContext } from '../features/cells/stores/cellStoreContext.svelte';
+	import { createViewportStore } from '../core/stores/viewportStore.svelte';
 	import { demoSites } from './demo-data';
+	import { demoCells } from './demo-cells';
 
 	interface Props {
 		/** Mapbox access token */
@@ -32,25 +42,43 @@
 		zoom = 12
 	}: Props = $props();
 
+	// Create viewport store with persistence (uses defaults as fallback)
+	const viewport = createViewportStore('demo-map', { center, zoom });
+
 	// Create site store with demo data
 	const siteStore = createSiteStoreContext(demoSites);
 
+	// Create cell store with demo data
+	const cellStore = createCellStoreContext(demoCells);
+
 </script>
 
 <!-- //		controls={['navigation', 'scale']} -->
 <div class="demo-map-container">
-	<MapboxProvider {accessToken} {center} {zoom}>
+	<MapboxProvider {accessToken} center={viewport.center} zoom={viewport.zoom} bearing={viewport.bearing} pitch={viewport.pitch}>
+		<!-- Sync map viewport changes to store (with localStorage persistence) -->
+		<ViewportSync store={viewport} />
+
 		<!-- Site layer - renders circles from store -->
 		<SitesLayer store={siteStore} namespace="demo-sites" />
 
+		<!-- Cell layer - renders arc sectors from store -->
+		<CellsLayer store={cellStore} namespace="demo-cells" />
+
 		<!-- Map style control - switch between map styles -->
 		<MapStyleControl position="top-right" initiallyCollapsed={true} namespace="demo-map" />
 
 		<!-- Site filter control - updates store.filteredSites -->
 		<SiteFilterControl store={siteStore} position="top-left" title="Site Filter" />
 
+		<!-- Cell filter control - dynamic hierarchical filtering -->
+		<CellFilterControl store={cellStore} position="top-left" title="Cell Filter" initiallyCollapsed={true} />
+
 		<!-- Site size control - updates store visual properties -->
 		<SiteSizeSlider store={siteStore} position="bottom-right" title="Site Display" />
+
+		<!-- Cell style control - visual settings for cells -->
+		<CellStyleControl store={cellStore} position="bottom-left" title="Cell Display" initiallyCollapsed={true} />
 	</MapboxProvider>
 </div>
 

package/dist/map-v2/demo/demo-cells.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Demo Cell Data
+ *
+ * 1 site with 3 sectors (azimuths: 0°, 120°, 240°)
+ * Each sector has 12 cells (all tech-band combinations)
+ * Total: 36 cells
+ */
+import type { Cell } from '../features/cells/types';
+/**
+ * Generate demo cells: 3 sectors × 12 tech-bands = 36 cells
+ */
+export declare const demoCells: Cell[];

package/dist/map-v2/demo/demo-cells.js

@@ -0,0 +1,114 @@
+/**
+ * Demo Cell Data
+ *
+ * 1 site with 3 sectors (azimuths: 0°, 120°, 240°)
+ * Each sector has 12 cells (all tech-band combinations)
+ * Total: 36 cells
+ */
+// Site location: San Francisco
+const SITE_LAT = 37.7749;
+const SITE_LNG = -122.4194;
+const SITE_ID = 'DEMO-SITE-001';
+// Standard beamwidth for sectors
+const BEAMWIDTH = 65;
+// Cell tech-band definitions with proper fband format
+const TECH_BANDS = [
+    // 2G bands
+    { tech: '2G', band: '900', fband: 'GSM900' },
+    { tech: '2G', band: '1800', fband: 'GSM1800' },
+    // 4G bands
+    { tech: '4G', band: '700', fband: 'LTE700' },
+    { tech: '4G', band: '800', fband: 'LTE800' },
+    { tech: '4G', band: '900', fband: 'LTE900' },
+    { tech: '4G', band: '1800', fband: 'LTE1800' },
+    { tech: '4G', band: '2100', fband: 'LTE2100' },
+    { tech: '4G', band: '2600', fband: 'LTE2600' },
+    // 5G bands
+    { tech: '5G', band: '700', fband: '5G-700' },
+    { tech: '5G', band: '2100', fband: '5G-2100' },
+    { tech: '5G', band: '3500', fband: '5G-3500' }
+];
+// Three sector azimuths
+const AZIMUTHS = [0, 120, 240];
+// Status rotation for variety
+const STATUSES = [
+    'On_Air',
+    'On_Air',
+    'On_Air',
+    'On_Air',
+    'On_Air_UNDER_CONSTRUCTION',
+    'On_Air_Locked',
+    'RF_Plan_Ready',
+    'RF_Plan_Ready',
+    'Re-Planned_RF_Plan_Ready',
+    'Tavlati_RF_Plan_Ready',
+    'On_Air',
+    'On_Air'
+];
+/**
+ * Generate demo cells: 3 sectors × 12 tech-bands = 36 cells
+ */
+export const demoCells = [];
+let cellCounter = 1;
+AZIMUTHS.forEach((azimuth, sectorIndex) => {
+    TECH_BANDS.forEach((techBand, techIndex) => {
+        const cellId = `CELL-${String(cellCounter).padStart(3, '0')}`;
+        const status = STATUSES[techIndex];
+        demoCells.push({
+            // Core properties
+            id: cellId,
+            txId: `TX-${String(cellCounter).padStart(3, '0')}`,
+            cellID: cellId,
+            cellID2G: techBand.tech === '2G' ? cellId : '',
+            cellName: `Demo Cell ${techBand.tech} ${techBand.band} - Sector ${sectorIndex + 1}`,
+            siteId: SITE_ID,
+            tech: techBand.tech,
+            fband: techBand.fband,
+            frq: techBand.band,
+            type: 'MACRO',
+            status: status,
+            onAirDate: '2024-01-15',
+            // 2G specific
+            bcch: techBand.tech === '2G' ? 100 + techIndex : 0,
+            ctrlid: techBand.tech === '2G' ? `CTRL-${cellId}` : '',
+            // 4G specific
+            dlEarfn: techBand.tech === '4G' ? 6200 + techIndex * 100 : 0,
+            // Physical properties
+            antenna: 'DEMO-ANTENNA-MODEL',
+            azimuth: azimuth,
+            height: 30, // 30 meters antenna height
+            electricalTilt: '3',
+            beamwidth: BEAMWIDTH,
+            latitude: SITE_LAT,
+            longitude: SITE_LNG,
+            dx: 0,
+            dy: 0,
+            siteLatitude: SITE_LAT,
+            siteLongitude: SITE_LNG,
+            // Planning
+            comment: `Demo ${techBand.tech} ${techBand.band} cell at azimuth ${azimuth}°`,
+            planner: 'Demo User',
+            // Atoll properties
+            atollETP: 43.0,
+            atollPW: 20.0,
+            atollRS: 500.0 + (techBand.band === '700' ? 200 : 0), // Lower freq = longer range
+            atollBW: parseFloat(techBand.band) / 100, // Simplified bandwidth
+            // Network properties
+            cellId3: `${cellId}-3G`,
+            nwtP1: 20,
+            nwtP2: 40,
+            pci1: (cellCounter % 504), // Physical Cell ID for LTE
+            nwtRS: 450.0,
+            nwtBW: 10.0,
+            // Other
+            other: {
+                demoCell: true,
+                sector: sectorIndex + 1,
+                techBandKey: `${techBand.tech}_${techBand.band}`
+            },
+            customSubgroup: `Sector-${sectorIndex + 1}`
+        });
+        cellCounter++;
+    });
+});
+console.log(`Generated ${demoCells.length} demo cells across ${AZIMUTHS.length} sectors`);

package/dist/map-v2/demo/index.d.ts

@@ -5,3 +5,4 @@
  */
 export { default as DemoMap } from './DemoMap.svelte';
 export { demoSites } from './demo-data';
+export { demoCells } from './demo-cells';

package/dist/map-v2/demo/index.js

@@ -7,3 +7,4 @@
 export { default as DemoMap } from './DemoMap.svelte';
 // Demo data
 export { demoSites } from './demo-data';
+export { demoCells } from './demo-cells';

package/dist/map-v2/features/cells/constants/colors.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Technology-Band Color Mappings
+ *
+ * Defines fill colors for each technology-band combination
+ */
+import type { TechnologyBandKey } from '../types';
+export declare const TECHNOLOGY_BAND_COLORS: Record<TechnologyBandKey, string>;

package/dist/map-v2/features/cells/constants/colors.js

@@ -0,0 +1,21 @@
+/**
+ * Technology-Band Color Mappings
+ *
+ * Defines fill colors for each technology-band combination
+ */
+export const TECHNOLOGY_BAND_COLORS = {
+    // 2G bands
+    '2G_900': '#ffcc99',
+    '2G_1800': '#ff9a2e',
+    // 4G bands
+    '4G_700': '#ffcfff',
+    '4G_800': '#ff90ff',
+    '4G_900': '#ff66cc',
+    '4G_1800': '#ff33cc',
+    '4G_2100': '#ccae09',
+    '4G_2600': '#903399',
+    // 5G bands
+    '5G_700': '#00ff00',
+    '5G_2100': '#00cc66',
+    '5G_3500': '#009933'
+};

package/dist/map-v2/features/cells/constants/radiusMultipliers.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Radius Multipliers by Technology-Band
+ *
+ * Lower frequency = larger coverage area
+ * Higher frequency = smaller coverage area
+ */
+import type { TechnologyBandKey } from '../types';
+export declare const RADIUS_MULTIPLIER: Record<TechnologyBandKey, number>;

package/dist/map-v2/features/cells/constants/radiusMultipliers.js

@@ -0,0 +1,22 @@
+/**
+ * Radius Multipliers by Technology-Band
+ *
+ * Lower frequency = larger coverage area
+ * Higher frequency = smaller coverage area
+ */
+export const RADIUS_MULTIPLIER = {
+    // 2G bands
+    '2G_900': 1.2,
+    '2G_1800': 1.0,
+    // 4G bands
+    '4G_700': 1.5,
+    '4G_800': 1.4,
+    '4G_900': 1.1,
+    '4G_1800': 0.9,
+    '4G_2100': 0.8,
+    '4G_2600': 0.6,
+    // 5G bands
+    '5G_700': 1.4,
+    '5G_2100': 0.7,
+    '5G_3500': 0.5
+};

package/dist/map-v2/features/cells/constants/statusStyles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Default Status Styles
+ *
+ * Visual styling for cell sector borders based on status
+ */
+import type { CellStatus, CellStatusStyle } from '../types';
+export declare const DEFAULT_STATUS_STYLES: Record<CellStatus, CellStatusStyle>;

package/dist/map-v2/features/cells/constants/statusStyles.js

@@ -0,0 +1,49 @@
+/**
+ * Default Status Styles
+ *
+ * Visual styling for cell sector borders based on status
+ */
+export const DEFAULT_STATUS_STYLES = {
+    On_Air: {
+        lineType: 'solid',
+        lineWidth: 2,
+        lineColor: '#000000',
+        opacity: 1.0,
+        dashArray: []
+    },
+    On_Air_UNDER_CONSTRUCTION: {
+        lineType: 'solid',
+        lineWidth: 2,
+        lineColor: '#FFA500',
+        opacity: 0.8,
+        dashArray: []
+    },
+    On_Air_Locked: {
+        lineType: 'solid',
+        lineWidth: 2,
+        lineColor: '#FF0000',
+        opacity: 0.9,
+        dashArray: []
+    },
+    RF_Plan_Ready: {
+        lineType: 'dashed',
+        lineWidth: 2,
+        lineColor: '#666666',
+        opacity: 0.6,
+        dashArray: [5, 5]
+    },
+    'Re-Planned_RF_Plan_Ready': {
+        lineType: 'dashed',
+        lineWidth: 2,
+        lineColor: '#888888',
+        opacity: 0.5,
+        dashArray: [5, 5]
+    },
+    Tavlati_RF_Plan_Ready: {
+        lineType: 'dotted',
+        lineWidth: 1,
+        lineColor: '#AAAAAA',
+        opacity: 0.4,
+        dashArray: [2, 4]
+    }
+};

package/dist/map-v2/features/cells/constants/zIndex.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Z-Index Layer Ordering by Technology-Band
+ *
+ * Controls which sectors appear on top when overlapping
+ * Higher frequency bands typically rendered on top
+ */
+import type { TechnologyBandKey } from '../types';
+export declare const Z_INDEX_BY_BAND: Record<TechnologyBandKey, number>;
+/**
+ * Base Z-Index for Mapbox layer ordering
+ * Cells should render below sites but above base map features
+ */
+export declare const CELL_FILL_Z_INDEX = 100;
+export declare const CELL_LINE_Z_INDEX = 101;

package/dist/map-v2/features/cells/constants/zIndex.js

@@ -0,0 +1,28 @@
+/**
+ * Z-Index Layer Ordering by Technology-Band
+ *
+ * Controls which sectors appear on top when overlapping
+ * Higher frequency bands typically rendered on top
+ */
+export const Z_INDEX_BY_BAND = {
+    // 2G bands
+    '2G_900': 5,
+    '2G_1800': 4,
+    // 4G bands
+    '4G_700': 2,
+    '4G_800': 3,
+    '4G_900': 4,
+    '4G_1800': 8,
+    '4G_2100': 9,
+    '4G_2600': 11,
+    // 5G bands
+    '5G_700': 9,
+    '5G_2100': 10,
+    '5G_3500': 12
+};
+/**
+ * Base Z-Index for Mapbox layer ordering
+ * Cells should render below sites but above base map features
+ */
+export const CELL_FILL_Z_INDEX = 100;
+export const CELL_LINE_Z_INDEX = 101;