@tracktor/map 1.1.2 → 1.2.1

package/dist/services/getRoute.d.ts

@@ -0,0 +1,3 @@
+import { Feature, GeoJsonProperties, LineString } from 'geojson';
+declare const getRoute: (from: [number, number], to: [number, number], profile?: "driving" | "walking" | "cycling") => Promise<Feature<LineString, GeoJsonProperties> | null>;
+export default getRoute;

package/dist/types/MarkerMapProps.d.ts

@@ -1,73 +1,84 @@
 import { SxProps } from '@tracktor/design-system';
-import { LngLatLike, MapOptions } from 'mapbox-gl';
-import { MarkerProps } from './MarkerProps.ts';
+import { Feature, FeatureCollection } from 'geojson';
+import { LngLatLike } from 'mapbox-gl';
+import { ProjectionSpecification as ReactMapProjection } from 'react-map-gl';
+import { MarkerProps } from './MarkerProps';
 export interface MarkerMapProps {
     /**
-     * Determines if the map should automatically adjust its zoom to include all markers.
+     * Automatically adjusts the map's zoom and center
+     * to ensure all markers are visible within the viewport.
      */
     fitBounds?: boolean;
     /**
-     * Padding in pixels to add around bounds when using fitBounds.
+     * Additional padding (in pixels) around the bounds
+     * when using `fitBounds`.
      */
     fitBoundsPadding?: number;
     /**
-     * Coordinates for the center of the map (longitude, latitude).
+     * Coordinates for the initial center of the map.
+     * Format: [longitude, latitude].
      */
     center?: LngLatLike | number[];
     /**
-     * Map style to use (URL or style identifier).
+     * Mapbox style URL or predefined style ID
+     * (e.g., "mapbox://styles/mapbox/streets-v11").
      */
     mapStyle?: string;
     /**
      * Initial zoom level of the map.
+     * A higher number means a closer zoom.
      */
     zoom?: number;
     /**
-     * Maximum width of popups in pixels or another CSS unit.
+     * Maximum width of popups in pixels or any valid CSS unit.
      */
     popupMaxWidth?: string;
     /**
      * Width of the map container.
+     * Can be a number (px) or any CSS unit (e.g. "100%").
      */
     width?: number | string;
     /**
      * Height of the map container.
+     * Can be a number (px) or any CSS unit (e.g. "100vh").
      */
     height?: number | string;
     /**
-     * Indicates if the map is currently loading.
+     * Indicates whether the map is currently in a loading state.
+     * Displays a skeleton overlay when true.
      */
     loading?: boolean;
     /**
-     * URL of the image to use for markers.
+     * URL of a custom image used as the default marker icon.
      */
     markerImageURL?: string;
     /**
-     * Style to apply to the map container (uses MUI's SxProps system).
+     * Custom styles applied to the map container.
+     * Uses MUI's `SxProps` system.
      */
     containerStyle?: SxProps;
     /**
-     * Disables the animation
+     * Disables the map's fitBounds animation.
      */
     disableAnimation?: boolean;
     /**
-     * Duration of the fit bounds animation in milliseconds.
+     * Duration (in ms) of the fitBounds animation.
      */
     fitBoundDuration?: number;
     /**
-     * Optional key to trigger fitBounds animation.
+     * Optional key that can be updated to re-trigger the fitBounds animation.
      */
     fitBoundsAnimationKey?: unknown;
     /**
-     * Forces the map container to be square.
+     * Forces the map container to have a square shape.
      */
     square?: boolean;
     /**
-     * ID of the marker whose popup should be open by default.
+     * ID of the marker whose popup should be open when the map loads.
      */
     openPopup?: number | string;
     /**
-     * Automatically opens popups when hovering over markers.
+     * Opens marker popups automatically when hovering over them.
      */
     openPopupOnHover?: boolean;
     /**
@@ -75,29 +86,65 @@ export interface MarkerMapProps {
      */
     markers?: MarkerProps[];
     /**
-     * Function called when clicking on the map, with coordinates of the clicked point.
+     * Callback triggered when the map is clicked.
+     * Returns the longitude and latitude of the clicked point.
      */
     onMapClick?: (lng: number, lat: number) => void;
     /**
-     * The theme of Map.
+     * The color theme of the map UI.
      * @default "light"
      */
     theme?: "dark" | "light";
     /**
-     * Coordinate projection to use for the map (default is 'mercator').
+     * Map projection type to use.
+     * @default "mercator"
      */
-    projection?: MapOptions["projection"];
+    projection?: ReactMapProjection;
     /**
-     * Optional base map view
-     * @default "default"
+     * Base map view mode.
+     * @default "street"
      */
-    baseMapView?: "default" | "satellite" | "streets" | "3d";
+    baseMapView?: "satellite" | "street";
     /**
-     * Optional key to activate zoom on scroll without restriction (default is true).
+     * Enables or disables cooperative gestures
+     * (e.g. requiring two-finger pan on touch devices).
+     * @default true
      */
     cooperativeGestures?: boolean;
     /**
-     * Optional key to activate double-click zoom (default is true).
+     * Enables or disables double-click zoom.
+     * @default true
      */
     doubleClickZoom?: boolean;
+    /**
+     * One or multiple GeoJSON line features to display on the map.
+     */
+    features?: Feature | Feature[] | FeatureCollection;
+    /**
+     * Starting point of the route.
+     * Format: [longitude, latitude].
+     * If both `from` and `to` are provided, a route will be calculated.
+     */
+    from?: [number, number];
+    /**
+     * Ending point of the route.
+     * Format: [longitude, latitude].
+     * If both `from` and `to` are provided, a route will be calculated.
+     */
+    to?: [number, number];
+    /**
+     * Transportation profile used for route calculation.
+     * @default "driving"
+     */
+    profile?: "driving" | "walking" | "cycling";
+    /**
+     * Custom styles for the itinerary line displayed on the map.
+     * If not provided, default styles will be used.
+     * @default { color: "#3b82f6", width: 4, opacity: 0.8 }
+     */
+    itineraryLineStyle?: Partial<{
+        color: string;
+        width: number;
+        opacity: number;
+    }>;
 }

package/dist/types/MarkerProps.d.ts

@@ -1,5 +1,23 @@
 import { ComponentType, ReactNode } from 'react';
-import { CustomMarkerMapProps } from '../utils/loadMarkers.tsx';
+import { VariantMarker } from '../Features/Markers/DefaultMarkers.tsx';
+interface CustomMarkerMapProps {
+    geometry: {
+        coordinates: number[];
+        type: string;
+    };
+    properties: {
+        description?: string;
+        id?: string | number;
+        size: number;
+        zIndex: number;
+        pointerEvents?: string;
+        name?: string;
+        iconProps?: Record<string, unknown>;
+        onClick?: (markerData?: CustomMarkerMapProps) => void;
+        IconComponent?: ComponentType<unknown>;
+    };
+    type: string;
+}
 export interface MarkerProps<T = Record<string, unknown>> {
     /**
      * Optional unique identifier for the marker.
@@ -58,4 +76,7 @@ export interface MarkerProps<T = Record<string, unknown>> {
      * Overrides iconImage if provided.
      */
     IconComponent?: ComponentType<any>;
+    color?: string;
+    variant?: string | VariantMarker;
 }
+export {};

package/dist/utils/getCoreMapOptions.d.ts

@@ -1,42 +1,50 @@
 import { MapOptions } from 'mapbox-gl';
+import { BaseMapView } from '../constants/baseMap.ts';
 interface MapOptionsProps {
     mapStyle?: string;
     projection?: MapOptions["projection"];
-    baseMapView?: "default" | "satellite" | "streets" | "3d";
+    baseMapView?: BaseMapView;
     cooperativeGestures?: boolean;
     doubleClickZoom?: boolean;
     theme?: "light" | "dark";
 }
+export declare const getBaseMapStyle: (baseMapView?: BaseMapView, theme?: "dark" | "light") => string;
 /**
- * Generates configuration options for initializing a Mapbox map
+ * Generates standardized configuration options for initializing a Mapbox map.
  *
- * This utility function creates a standardized configuration object for Mapbox GL JS
- * by processing various input parameters. It handles:
- * - Center point calculation (with fallback to marker positions or default)
- * - Style application
- * - Initial zoom level
+ * This utility function returns a base configuration object compatible with **Mapbox GL JS**.
+ * It applies a default style based on the selected **base map view** and **theme** if no explicit style is provided.
  *
- * @param {Object} params - Configuration parameters
- * @param {string} params.mapStyle - Mapbox style URL or specification
- * @param {MarkerProps[]} [params.markers] - Array of marker definitions
- * @param {LngLatLike|number[]} [params.center] - Optional center coordinates (either as LngLat object or [lng, lat] array)
- * @param {MapOptions["projection"]} [params.projection] - Optional coordinate projection
- * @param {string} [params.baseMapView] - Optional base map view type (default, satellite, streets, dark, 3d)
- * @param {boolean} [params.cooperativeGestures=true] - Enable cooperative gestures (default: true)
- * @param {boolean} [params.doubleClickZoom=true] - Enable double-click zoom (default: true)
+ * ### Features
+ * - Supports both **light** and **dark** themes.
+ * - Supports multiple base map types (e.g., streets, satellite).
+ * - Enables optional Mapbox interaction settings (e.g., cooperative gestures, double-click zoom).
+ * - Disables `failIfMajorPerformanceCaveat` by default for broader compatibility.
  *
- * @returns {object} Mapbox-compatible configuration object with:
- *   - center: Calculated center coordinates
- *   - cooperativeGestures: Enabled by default
- *   - failIfMajorPerformanceCaveat: Disabled by default
- *   - style: The provided map style
- *   - zoom: Initial zoom level
+ * @param {Object} params - Configuration parameters.
+ * @param {string} [params.mapStyle] - Custom Mapbox style URL or specification.
+ * If not provided, a default style is derived from `baseMapView` and `theme`.
+ * @param {"light" | "dark"} [params.theme] - Theme mode that determines which default style to use.
+ * @param {BaseMapView} [params.baseMapView] - Base map view type (`"satellite"`, `"street"`, etc.).
+ * @param {boolean} [params.doubleClickZoom] - Enable or disable double-click zoom.
+ * @param {boolean} [params.cooperativeGestures] - Enable or disable cooperative gestures.
+ *
+ * @returns {Omit<MapOptions, "container"> & { style: string }} - A configuration object ready to be passed to the Mapbox constructor.
  *
  * @example
  * const options = getCoreMapOptions({
- *   mapStyle: 'mapbox://styles/mapbox/streets-v11',
- *   markers: [{ lat: 48.8584, lng: 2.2945 }],
+ *   theme: "dark",
+ *   baseMapView: "satellite",
+ *   cooperativeGestures: true,
+ *   doubleClickZoom: false,
+ * });
+ *
+ * new mapboxgl.Map({
+ *   container: "map",
+ *   ...options,
  * });
  */
-declare const getCoreMapOptions: ({ mapStyle, theme, baseMapView, doubleClickZoom, cooperativeGestures, }: MapOptionsProps) => Omit<MapOptions, "container">;
+declare const getCoreMapOptions: ({ mapStyle, theme, baseMapView, doubleClickZoom, cooperativeGestures, }: MapOptionsProps) => Omit<MapOptions, "container"> & {
+    style: string;
+};
 export default getCoreMapOptions;

package/package.json

@@ -3,7 +3,7 @@
   "description": "A React library to easily display map with multiple tools",
   "private": false,
   "license": "UNLICENSED",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "type": "module",
   "main": "dist/main.umd.cjs",
   "module": "dist/main.js",
@@ -22,8 +22,14 @@
     "lint:fix": "bunx biome check . --write",
     "prepublishOnly": "bun run build",
     "preview": "bunx vite preview",
-    "release": "bun run build && bun publish --access public",
-    "version": "bunx standard-version"
+    "release": "bun run build && bun publish --access example/public",
+    "version": "bunx standard-version",
+    "prepare": "husky",
+    "test": "bun test --preload ./test/setup.ts",
+    "test:watch": "bun test --watch --preload ./test/setup.ts",
+    "dev:example": "vite --config vite.config.example.ts",
+    "build:example": "vite build --config vite.config.example.ts",
+    "deploy:example": "bun run build:example && cp dist-example/index.html dist-example/404.html && gh-pages -d dist-example"
   },
   "files": [
     "dist"
@@ -36,17 +42,28 @@
     "@mui/x-license": "^8.6.0",
     "@tracktor/design-system": "^4.3.1",
     "@tracktor/react-utils": "^1.24.0",
-    "mapbox-gl": "^3.12.0"
+    "@types/react-map-gl": "^6.1.7",
+    "mapbox-gl": "^3.16.0",
+    "react-map-gl": "7.0.20"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
     "@tracktor/biome-config-react": "^1.3.0",
+    "@types/jsdom": "^27.0.0",
     "@types/mapbox-gl": "^3.4.1",
     "@types/node": "^22.14.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.6.0",
+    "bun-types": "^1.3.1",
+    "gh-pages": "^6.3.0",
+    "husky": "^9.1.7",
+    "jsdom": "^27.0.1",
+    "prism-react-renderer": "^2.4.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-router-dom": "^7.9.4",
     "standard-version": "^9.5.0",
     "typescript": "~5.8.3",
     "vite": "^7.0.0",

package/dist/components/MarkerMap/MarkerMap.d.ts

@@ -1,4 +0,0 @@
-import { ReactElement } from 'react';
-import { MarkerMapProps } from '../../types/MarkerMapProps.ts';
-declare const _default: import('react').MemoExoticComponent<({ containerStyle, square, loading, height, width, ...props }: MarkerMapProps) => ReactElement>;
-export default _default;

package/dist/components/MarkerMap/useMarkerMap.d.ts

@@ -1,23 +0,0 @@
-import { Map as MapboxMap } from 'mapbox-gl';
-import { MarkerMapProps } from '../../types/MarkerMapProps';
-export declare const DEFAULT_CENTER_LNG = 2.333;
-export declare const DEFAULT_CENTER_LAT = 46.8677;
-/**
- * Custom React hook to integrate and manage a Mapbox map instance with dynamic markers,
- * popups, zooming, centering, and click handling.
- *
- * This hook:
- * - Initializes a Mapbox map inside a container
- * - Loads and displays markers on the map
- * - Adds popups to specific markers when requested
- * - Adjusts the map center or fits bounds based on markers
- * - Handles map click events with a provided callback
- */
-declare const useMarkerMap: ({ markers, center, disableAnimation, openPopup, onMapClick, projection, theme, mapStyle, fitBoundsAnimationKey, baseMapView, zoom, fitBoundsPadding, fitBoundDuration, fitBounds, cooperativeGestures, doubleClickZoom, }: MarkerMapProps) => {
-    containerRef: import('react').RefObject<string | HTMLDivElement>;
-    currentTheme: import('@tracktor/design-system').PaletteMode;
-    isMapInitialized: boolean;
-    map: import('react').RefObject<MapboxMap | null>;
-    markers: import('../../main').MarkerProps<Record<string, unknown>>[];
-};
-export default useMarkerMap;

package/dist/hooks/useFitBounds.d.ts

@@ -1,15 +0,0 @@
-import { Map as MapboxMap } from 'mapbox-gl';
-import { RefObject } from 'react';
-import { MarkerProps } from '../types/MarkerProps.ts';
-type useFitBoundsProps = {
-    map: RefObject<MapboxMap | null>;
-    disableAnimation: boolean | undefined;
-    fitBounds?: boolean;
-    fitBoundDuration?: number;
-    fitBoundsPadding?: number;
-    isMapInitialized: boolean;
-    markers?: MarkerProps[];
-    fitBoundsAnimationKey?: unknown;
-};
-declare const useFitBounds: ({ map, disableAnimation, fitBounds, markers, fitBoundDuration, fitBoundsPadding, isMapInitialized, fitBoundsAnimationKey, }: useFitBoundsProps) => void;
-export default useFitBounds;

package/dist/hooks/useMarkers.d.ts

@@ -1,14 +0,0 @@
-import { Palette } from '@tracktor/design-system';
-import { LngLatLike, Map as MapboxMap } from 'mapbox-gl';
-import { RefObject } from 'react';
-import { MarkerProps } from '../types/MarkerProps.ts';
-type UseInitializeMapProps = {
-    map: RefObject<MapboxMap | null>;
-    markers?: MarkerProps[];
-    palette: Palette;
-    isMapInitialized: boolean;
-    fitBounds?: boolean;
-    center?: LngLatLike | number[];
-};
-declare const useMarkers: ({ map, markers, palette, isMapInitialized, fitBounds, center }: UseInitializeMapProps) => void;
-export default useMarkers;

package/dist/hooks/useOnMapClick.d.ts

@@ -1,9 +0,0 @@
-import { Map as MapboxMap } from 'mapbox-gl';
-import { RefObject } from 'react';
-type UseCorrectedMapClickProps = {
-    map: RefObject<MapboxMap | null>;
-    onMapClick?: (lng: number, lat: number) => void;
-    isMapInitialized?: boolean;
-};
-declare const useCorrectedMapClick: ({ map, onMapClick, isMapInitialized }: UseCorrectedMapClickProps) => void;
-export default useCorrectedMapClick;

package/dist/hooks/usePopups.d.ts

@@ -1,11 +0,0 @@
-import { Map as MapboxMap } from 'mapbox-gl';
-import { RefObject } from 'react';
-import { MarkerProps } from '../types/MarkerProps';
-type UsePopupsProps = {
-    map: RefObject<MapboxMap | null>;
-    markers?: MarkerProps[];
-    openPopup: string | number | undefined;
-    isMapInitialized: boolean;
-};
-declare const usePopups: ({ openPopup, map, markers, isMapInitialized }: UsePopupsProps) => void;
-export default usePopups;

package/dist/utils/addPopup.d.ts

@@ -1,43 +0,0 @@
-import { Map as MapboxMap, Popup } from 'mapbox-gl';
-import { ReactNode, RefObject } from 'react';
-interface AddPopupProps {
-    coordinates?: [number, number];
-    tooltip?: ReactNode;
-    map: RefObject<MapboxMap | null>;
-}
-/**
- * Adds a React-based popup to a Mapbox map
- *
- * This function creates and displays a popup on a Mapbox map with custom content rendered
- * using React. The popup includes a styled close button and properly handles React component
- * lifecycle to prevent memory leaks.
- *
- * @param {Object} options - The configuration options
- * @param {MutableRefObject<Map | null>} options.map - Reference to the Mapbox map instance
- * @param {ReactNode} [options.tooltip] - React node to render inside the popup
- * @param {[number, number]} [options.coordinates] - [longitude, latitude] where the popup should appear
- * @returns {void}
- *
- * @example
- * // Basic usage
- * addPopup({
- *   map: mapRef,
- *   coordinates: [-73.985, 40.748],
- *   tooltip: <div>Empire State Building</div>
- * });
- *
- * @example
- * // With complex React content
- * addPopup({
- *   map: mapRef,
- *   coordinates: marker.position,
- *   tooltip: (
- *     <InfoWindow title={marker.title}>
- *       <p>{marker.description}</p>
- *       <button onClick={handleAction}>More Info</button>
- *     </InfoWindow>
- *   )
- * });
- */
-declare const addPopup: ({ map, tooltip, coordinates }: AddPopupProps) => Popup | null;
-export default addPopup;

package/dist/utils/coordinateConverter.d.ts

@@ -1,16 +0,0 @@
-import { LngLatLike } from 'mapbox-gl';
-/**
- * Converts coordinates to a format compatible with Mapbox's LngLatLike type
- *
- * This utility function ensures coordinates are properly formatted for Mapbox operations.
- * It handles different input formats and converts them to the expected LngLatLike format,
- * which requires longitude and latitude values in the form [lng, lat].
- *
- * @param {LngLatLike | number[] | undefined} center - Coordinates to convert, which can be:
- *   - LngLatLike object (already in Mapbox format)
- *   - number array in [longitude, latitude] format
- *   - undefined (no coordinates provided)
- * @returns {LngLatLike | undefined} - Properly formatted coordinates or undefined if invalid
- */
-declare const coordinateConverter: (center: LngLatLike | number[] | undefined) => LngLatLike | undefined;
-export default coordinateConverter;

package/dist/utils/getFeature.d.ts

@@ -1,18 +0,0 @@
-import { Map as MapboxMap, PointLike } from 'mapbox-gl';
-import { RefObject } from 'react';
-interface GetFeatureProps {
-    map: RefObject<MapboxMap | null>;
-    point: PointLike;
-}
-/**
- * Handles map click events to display popups
- *
- * This function:
- * 1. Detects if a GeoJSON marker was clicked
- * 2. If a marker was clicked, displays its popup
- * 3. If no marker was clicked, displays a popup at clicked location
- *
- * @param {GetFeatureProps} options - Configuration params
- */
-declare const getFeature: ({ map, point }: GetFeatureProps) => (import('mapbox-gl').GeoJSONFeature & import('./typeguard').ClickedFeature) | null | undefined;
-export default getFeature;

package/dist/utils/loadMarkers.d.ts

@@ -1,73 +0,0 @@
-import { Palette } from '@tracktor/design-system';
-import { Map as MapboxMap } from 'mapbox-gl';
-import { ComponentType, RefObject } from 'react';
-import { MarkerProps } from '../types/MarkerProps.ts';
-export interface CustomMarkerMapProps {
-    geometry: {
-        coordinates: number[];
-        type: string;
-    };
-    properties: {
-        description?: string;
-        id?: string | number;
-        size: number;
-        zIndex: number;
-        pointerEvents?: string;
-        name?: string;
-        iconProps?: Record<string, unknown>;
-        onClick?: (markerData?: CustomMarkerMapProps) => void;
-        IconComponent?: ComponentType<unknown>;
-    };
-    type: string;
-}
-interface GenerateMarkersProps {
-    palette: Palette;
-    type?: string;
-}
-interface LoadMarkersProps {
-    map: RefObject<MapboxMap | null>;
-    palette: Palette;
-    markers: MarkerProps[];
-}
-/**
- * Generates visual styles for map markers based on theme palette and marker type
- *
- * Creates consistent styling for different marker types with:
- * - Dynamic color theming (light/dark mode support)
- * - Type-specific visual differentiation
- * - Responsive sizing
- *
- * @param {Object} params - Configuration parameters
- * @param {Palette} params.palette - Design system color palette
- * @param {string} [params.type] - Optional marker type identifier (e.g. "dropOff")
- *
- * @returns {Object} Mapbox GL paint properties object containing:
- *   - circle-color: Center fill color
- *   - circle-radius: Size of marker
- *   - circle-stroke-color: Border color
- *   - circle-stroke-width: Border thickness
- *
- * @example
- * const markerStyle = generateMarkers({
- *   palette: theme.palette,
- *   type: "dropOff"
- * });
- */
-export declare const generateMarkers: ({ palette, type }: GenerateMarkersProps) => object;
-/**
- * Main entry point for loading markers onto a Mapbox GL map
- *
- * Orchestrates:
- * - Data conversion to GeoJSON
- * - Marker type classification
- * - Parallel loading of different marker types
- * - Loading state management
- * - zIndex-based ordering
- *
- * @param {Object} params - Configuration parameters
- * @param {MutableRefObject<Map|null>} params.map - React ref to Mapbox GL instance
- * @param {Palette} params.palette - Design system color palette
- * @param {MarkerProps[]} params.markers - Array of marker definitions
- */
-export declare const loadMarkers: ({ map, palette, markers }: LoadMarkersProps) => void;
-export {};

package/dist/utils/typeguard.d.ts

@@ -1,25 +0,0 @@
-type Coordinates = [number, number];
-interface GeometryPoint {
-    type: string;
-    coordinates: Coordinates;
-}
-interface FeatureProperties {
-    id: string | number;
-    [key: string]: unknown;
-}
-export interface ClickedFeature {
-    geometry: GeometryPoint;
-    properties: FeatureProperties;
-    [key: string]: unknown;
-}
-/**
- * Type guard to check if the given geometry is a valid GeoJSON Point geometry
- * @param geometry
- */
-export declare const isFeatureGeometry: (geometry: unknown) => geometry is GeometryPoint;
-/**
- * Type guard to check if the given feature is a ClickedFeature
- * @param feature
- */
-export declare const isClickedFeature: (feature: unknown) => feature is ClickedFeature;
-export {};