import * as _angular_core from '@angular/core'; import { AfterViewInit } from '@angular/core'; import * as L$1 from 'leaflet'; import { DivIcon, MapOptions as MapOptions$1, CircleMarkerOptions, PolylineOptions, MarkerCluster, DivIconOptions } from 'leaflet'; export { L$1 as L }; import { DomSanitizer } from '@angular/platform-browser'; import { MaterialIconFonts } from '@michelin/theme'; declare module 'leaflet' { interface MarkerCluster extends L.Marker { getAllChildMarkers(): L.Marker[]; getChildCount(): number; zoomToBounds(options?: L.FitBoundsOptions): void; getBounds(): L.LatLngBounds; spiderfy(): void; unspiderfy(): void; } interface MarkerClusterGroupOptions extends L.LayerOptions { maxClusterRadius?: number | ((zoom: number) => number); iconCreateFunction?: (cluster: MarkerCluster) => Icon | DivIcon; } interface MarkerClusterGroup extends L.FeatureGroup { addLayer(layer: L.Layer): this; addLayers(layers: L.Layer[]): this; removeLayer(layer: L.Layer): this; removeLayers(layers: L.Layer[]): this; clearLayers(): this; zoomToShowLayer(layer: L.Layer, callback?: () => void): void; } function markerClusterGroup(options?: MarkerClusterGroupOptions): MarkerClusterGroup; } /** * Map layer */ declare class MapLayer { /** * Label to describe layer on the map selector */ label: string; /** * Url to retrieve the layer tiles usefull with custom layers */ url: string | string[]; /** * Is the layer darkmode friendly */ darkmode: boolean; constructor(label: string, url: string | string[], darkmode?: boolean); } /** * Map options * Extends leaflet MapOptions */ interface MapOptions extends MapOptions$1 { /** * Fit markers bounds */ fitMarkersBounds?: number; /** * Fit trips bounds */ fitTripsBounds?: number; /** * Define some options for markers */ marker?: CircleMarkerOptions; /** * Define some options for lines */ line?: PolylineOptions; } /** * Define a marker that could be display on the map */ declare class MapMarker { /** * Marker latitude */ latitude: number; /** * Marker longitude */ longitude: number; /** * Material icon key */ icon: string; /** * Information text (displayed in infobulle) */ info?: string; /** * Marker color */ color?: string; /** * Font set for icon * Ex for material : filled, round, outlined, sharp, twotone */ fontSet?: MaterialIconFonts; constructor(marker: Partial); /** * Get icon for a giving color using a html container */ getDivIcon(sanitizer: DomSanitizer): DivIcon; } /** * Marker cluster configuration */ declare class MapMarkerClusterConfig { /** * Enable the clustering */ clusterEnabled: boolean; /** * Icon function * Use to draw custom cluster */ iconCreateFunction?: (cluster: MarkerCluster) => DivIconOptions; constructor(mapMarkerClusterConfig: Partial); getMarkerClusterDivIcon(cluster: MarkerCluster, _sanitizer: DomSanitizer): DivIcon; } /** * Map point use in trip */ declare class MapPoint { /** * Point latitude */ latitude: number; /** * Point longitude */ longitude: number; /** * Point color */ color?: string; /** * Optional point size (radius in pixels) for bubble maps */ size?: number; /** * Data value for color mapping and legend (e.g., population, revenue, temperature) * When provided, this value is used for color interpolation instead of size */ value?: number; /** * Point tooltip. Accepts String and HTML content. */ tooltip?: string; } /** * Define a trip that could displayed on the map */ declare class MapTrip { /** * List of points */ waypoints: MapPoint[]; /** * Optional color */ color?: string; /** * Display mode (route, line, point) */ mode?: MapMode; /** * Label for the data value displayed in bubble maps (e.g., "Population", "Revenue", "Temperature") * This label appears in the legend to describe what the bubble colors represent */ valueLabel?: string; } /** * Define enumeration for map trip mode */ declare enum MapMode { LINE = "LINE", POINT = "POINT" } /** * GeoJSON layer configuration for displaying polygons, countries, regions, etc. * Useful for choropleth maps and country-wise data visualization */ declare class MapGeoJSONLayer { /** * GeoJSON data (FeatureCollection or Feature) */ data: any; /** * Style function to customize appearance based on feature properties * @param feature - The GeoJSON feature being styled * @returns Style options for the layer */ style?: (feature: any) => L.PathOptions; /** * Function called for each feature in the layer * Useful for adding popups, tooltips, or event handlers * @param feature - The GeoJSON feature * @param layer - The Leaflet layer representing the feature */ onEachFeature?: (feature: any, layer: L.Layer) => void; /** * Optional name/label for this GeoJSON layer */ label?: string; /** * Data map for choropleth coloring (country/region name -> value) */ dataMap?: { [key: string]: number; }; /** * Property key to use for matching features with dataMap (e.g., 'ADMIN', 'name') */ featurePropertyKey?: string; /** * Minimum value for color scale (defaults to 0) */ zmin?: number; /** * Maximum value for color scale (auto-calculated if not provided) */ zmax?: number; constructor(geoJsonLayer: Partial); } declare class MapComponent implements AfterViewInit { private readonly themingService; private readonly sanitizer; private readonly destroyRef; readonly height: _angular_core.InputSignal; readonly options: _angular_core.InputSignal; readonly markers: _angular_core.InputSignal; readonly trips: _angular_core.InputSignal; readonly layers: _angular_core.InputSignal; readonly markerClusterConfig: _angular_core.InputSignal; readonly extrapolation: _angular_core.InputSignal; readonly geoJsonLayers: _angular_core.InputSignal; readonly colorPalette: _angular_core.InputSignal<"sequential-accent" | "divergent-accent">; readonly colorMode: _angular_core.InputSignal<"rdbu" | "oranges" | "storm" | "divergent" | "temperature">; readonly mapInit: _angular_core.OutputEmitterRef; readonly darkTheme: _angular_core.WritableSignal; readonly layerSupportDarkmode: _angular_core.WritableSignal; private map; private controlsInstances; private linesInstances; private circlesInstances; private markersInstances; private clusterInstance; private geoJsonInstances; private legendControl; id: number; private isMapInitialized; private shouldInitializeMap; private readonly cssVariableCache; private cssVariablesAvailable; private retryCount; constructor(); /** * Lifecycle hook: After view init */ ngAfterViewInit(): void; /** * Initialize the map when layers are ready */ private initializeMap; /** * Reset the map */ resetMap(): void; /** * Load layers */ private loadLayers; /** * Load all trips * * @private */ private loadTrips; /** * Get leaflet point from map point * * @param mapPoint the map point */ getPoint(mapPoint: MapPoint): L$1.LatLng; /** * Get a color * * @param color the input color */ getColor(color: string): string; /** * Draw lines on calculated route * * @param coordinates all coordinates * @param colors all colors * @param tooltips all tooltips * @private */ private drawLines; /** * Get an average dot * * @param point1 the first dot * @param point2 the second dot * @param color1 the first color * @param color2 the second color * @param ratio the ratio * @private */ private static getAveragePoint; /** * Draw a line between start and destination with a color * * @param start * @param destination * @param color * @param tooltipContent * @private */ private drawLine; /** * Draw points on calculated route * * @param coordinates all coordinates * @param colors all colors * @param tooltips all tooltips * @private */ private drawPoints; /** * Draw a point on a position with a color * * @param position * @param color * @param tooltipContent * @private */ private drawPoint; /** * Load markers onto the map * Markers can be grouped with clustering functionality for better performance and visualization * This method handles both individual markers and clustered markers based on configuration * * @see markers input property for marker data */ private loadMarkers; /** * Add individual markers to either the cluster group or directly to the map * This method processes each marker from the markers array and creates Leaflet marker instances * * @param markerCluster - The cluster group to add markers to (if clustering is enabled) * @private */ private addMarkersToInstance; /** * Generate a color between two colors * * @param startColor * @param endColor * @param percent * @private */ private static generateColor; /** * Adds a tooltip to the given 'Leaflet' element * * @param element 'Leaflet' element to add the tooltip to * @param tooltipContent Content of the tooltip to create * @private */ private addTooltip; /** * Resolve theme color palette from CSS variables (same as Plotly) */ private resolveThemePalette; /** * Resolve a single color from the theme palette */ private resolveSingleColor; /** * Get CSS variable value with fallback and caching */ private getCSSVariable; /** * Convert RGB/RGBA to hex color */ private rgbToHex; /** * Interpolate color from a palette based on value and min/max range */ private interpolateColor; /** * Blend two hex colors */ private blendColors; /** * Load GeoJSON layers onto the map * Used for displaying polygons, countries, regions, and other geographic features * Supports choropleth maps and country-wise data visualization * * @private */ private loadGeoJsonLayers; /** * Create and add a legend control to the map * * @param min Minimum data value * @param max Maximum data value * @param palette Array of color hex codes * @param label Optional label for the legend * @private */ private addLegend; /** * Remove the legend control from the map * @private */ private removeLegend; /** * Calculate nice round step values for legend labels * @param min Minimum value * @param max Maximum value * @param desiredSteps Desired number of steps (approximate) * @returns Array of nice round values * @private */ private calculateNiceSteps; /** * Format a numeric value for display in the legend * @param value The value to format (already rounded by calculateNiceSteps) * @returns Formatted string with K/M suffix * @private */ private formatLegendValue; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * * Requirements: * * For standalone components, you can now import MapComponent directly: * * import { MapComponent } from '@michelin/maps'; * * For legacy module-based imports: * * import { MapModule } from '@michelin/maps'; */ declare class MapModule { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵmod: _angular_core.ɵɵNgModuleDeclaration; static ɵinj: _angular_core.ɵɵInjectorDeclaration; } /** * Choropleth Map Helper Utilities * * This module provides helper functions for working with choropleth maps. * * Usage Example: * ```typescript * import { processCountryData, MapGeoJSONLayer } from '@michelin/maps'; * * // 1. Load your data * const response = await fetch('api/country-data'); * const apiData = await response.json(); * * // 2. Process with helper (handles country name normalization) * const countryData = processCountryData(apiData); * * // 3. Create choropleth layer * const layer = new MapGeoJSONLayer({ * data: geoJsonData, * dataMap: countryData, * featurePropertyKey: 'name', * zmin: 0 * }); * * // 4. Pass to map component - it handles all coloring automatically! * ``` */ /** * Normalize country names from various API formats to match GeoJSON property names * This helps match data from different sources to the standard country names in GeoJSON files * * @param apiName - Country name from API (e.g., "USA", "UK", "Russian Federation") * @returns Normalized country name matching GeoJSON properties (e.g., "United States of America", "United Kingdom", "Russia") */ declare function normalizeCountryName(apiName: string): string; /** * Process country data from an API response * * Expects response with structure: * ```json * { * "count_by_country": [ * { "country": "USA", "count": 90000 }, * { "country": "China", "count": 95000 } * ] * } * ``` * * @param apiResponse - API response object with count_by_country array * @returns Normalized country data map { [countryName]: value } * * @example * ```typescript * const response = await fetch('assets/sample-map-data.json'); * const apiResponse = await response.json(); * const countryData = processCountryData(apiResponse); * // Returns: { "United States of America": 90000, "China": 95000, ... } * ``` */ declare function processCountryData(apiResponse: any): { [key: string]: number; }; export { MapComponent, MapGeoJSONLayer, MapLayer, MapMarker, MapMarkerClusterConfig, MapMode, MapModule, MapPoint, MapTrip, normalizeCountryName, processCountryData }; export type { MapOptions };