+ 
+
+ ),
+ tooltipStyle: {
+ backgroundColor: 'white',
+ border: '1px solid #ccc',
+ borderRadius: '8px',
+ padding: '12px',
+ maxWidth: '160px',
+ textAlign: 'center'
+ }
+ }}
+ />
+ );
+};
+
+export default AdvancedMapExample;
+```
+
+### Minimal Example
+
+```tsx
+{item.name}
++ Click marker to visit location page +
+Interactive Location Map
} + * ``` + */ + title?: string | React.ReactNode; + + /** + * Description text displayed below the title (not currently implemented in UI). + * @example + * ```tsx + * description="Click on markers to view location details" + * ``` + */ + description?: string | React.ReactNode; + + /** + * CSS class name applied to the root container. + * @example + * ```tsx + * className="my-custom-map-class" + * ``` + */ + className?: string; + + /** + * Configuration options for map markers appearance and behavior. + */ + marker?: { + /** + * CSS class name applied to marker elements. + * @example "custom-marker-style" + */ + markerClassName?: string; + + /** + * Custom CSS styles applied to marker elements. + * @example {{ backgroundColor: 'red', borderRadius: '50%' }} + */ + markerStyle?: React.CSSProperties; + + /** + * Size of marker images in pixels. + * @default 40 + * @example 60 + */ + imageSize?: number; + + /** + * Custom function to render tooltip content for markers. + * @param c - The data item for the marker + * @returns React element to display in tooltip + * @example + * ```tsx + * renderToolTip={(item) =>{item.name}
{item.description}
}
+ * ```
+ */
+ renderToolTip?: (c: IData) => React.ReactNode;
+
+ /**
+ * CSS class name applied to tooltip elements.
+ * @example "custom-tooltip-style"
+ */
+ tooltipClassName?: string;
+
+ /**
+ * Custom CSS styles applied to tooltip elements.
+ * @example {{ backgroundColor: 'black', color: 'white', padding: '8px' }}
+ */
+ tooltipStyle?: React.CSSProperties;
+ }
+
+ /**
+ * Configuration options for the search functionality.
+ */
+ search?: {
+ /**
+ * Enable or disable the search feature.
+ * @default true
+ * @example
+ * ```tsx
+ * search={{ enabled: false }} // Disables search
+ * ```
+ */
+ enabled?: boolean;
+
+ /**
+ * Placeholder text displayed in the search input.
+ * @default "Search locations..."
+ * @example
+ * ```tsx
+ * search={{ placeholder: "Find a city or landmark..." }}
+ * ```
+ */
+ placeholder?: string;
+
+ /**
+ * Callback function triggered when search term changes or results are filtered.
+ * @param searchTerm - The current search term
+ * @param filteredData - Array of data items matching the search
+ * @example
+ * ```tsx
+ * onSearchChange={(term, results) => {
+ * console.log(`Search: "${term}" found ${results.length} results`);
+ * }}
+ * ```
+ */
+ onSearchChange?: (searchTerm: string, filteredData: IData[]) => void;
+
+ /**
+ * Field to search on or a custom function to extract the search term from data items.
+ * @default "name"
+ * @example
+ * ```tsx
+ * // Search by specific field
+ * searchField: "id"
+ *
+ * // Custom search function
+ * searchField: (item) => `${item.name} ${item.description}`
+ * ```
+ */
+ searchField?: keyof IData | ((item: IData) => string);
+
+ /**
+ * Zoom level to use when focusing on search results.
+ * @default 8
+ * @example
+ * ```tsx
+ * search={{ zoomLevel: 12 }} // Closer zoom for search results
+ * ```
+ */
+ zoomLevel?: number;
+
+ /**
+ * Position of the search overlay on the map.
+ * @default { top: '10px', left: '10px' }
+ * @example
+ * ```tsx
+ * // Top-right position
+ * search={{ position: { top: '10px', right: '10px' } }}
+ *
+ * // Bottom-left position
+ * search={{ position: { bottom: '20px', left: '20px' } }}
+ * ```
+ */
+ position?: {
+ /** Distance from the top edge of the map */
+ top?: string;
+ /** Distance from the left edge of the map */
+ left?: string;
+ /** Distance from the right edge of the map */
+ right?: string;
+ /** Distance from the bottom edge of the map */
+ bottom?: string;
+ };
+ }
+
+ /**
+ * Fluent UI theme object for consistent styling.
+ * @example
+ * ```tsx
+ * import { useTheme } from '@fluentui/react-components';
+ *
+ * const theme = useTheme();
+ * {item.description}
+
+ }
+ aria-label={strings.worldMapZoomIn}
+ className={buttonStyle}
+ onClick={handleZoomIn}
+ />
+
+
+ }
+ aria-label={strings.worldMapZoomOut}
+ className={buttonStyle}
+ onClick={handleZoomOut}
+ />
+
+
+ }
+ aria-label={strings.worldMapReset}
+ className={buttonStyle}
+ onClick={handleReset}
+ />
+
+
+ );
+};
+
+export default MapNavigation;
diff --git a/src/controls/worldMap/Marker.tsx b/src/controls/worldMap/Marker.tsx
new file mode 100644
index 000000000..5b062b8c7
--- /dev/null
+++ b/src/controls/worldMap/Marker.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+
+import { Tooltip, tokens } from '@fluentui/react-components';
+
+import { IMarkerProps } from './IMarkerProps';
+import { Marker as MapMarker } from 'react-map-gl/maplibre';
+import TooltipContent from './TooltipContent';
+import { css } from '@emotion/css';
+import strings from 'ControlStrings';
+
+const useStyles = (): { flag: string; tooltipContent: string } => {
+ return {
+ flag: css`
+ width: 22px;
+ height: 10px;
+ border-radius: 4px;
+ box-shadow: '${tokens.shadow4};
+ border: 1px solid ${tokens.colorNeutralStroke2};
+ cursor: pointer;
+ display: block;
+ margin: 0 auto;
+ `,
+ tooltipContent: css`
+ background-color: ${tokens.colorBrandBackground2};
+ `,
+ };
+};
+
+export const Marker: React.FC
+
+ );
+};
+
+export default TooltipContent;
diff --git a/src/controls/worldMap/WorldMap.tsx b/src/controls/worldMap/WorldMap.tsx
new file mode 100644
index 000000000..a8e92b85f
--- /dev/null
+++ b/src/controls/worldMap/WorldMap.tsx
@@ -0,0 +1,111 @@
+import { IData } from "./IData";
+import { IWorldMapProps } from "./IWorldMapProps";
+import MaplibreWorldMap from "./WorldMapControl";
+import React from "react";
+
+const WorldMap: React.FC
+ 
+ {data.name}
+
+
+ {strings.worldMapCoord}
+ {data.coordinates[1].toFixed(2)}{strings.worldMapN}
+ {data.coordinates[0].toFixed(2)}{strings.worldMapE}
+
+
+ {title ?? strings.worldMapTitle}
+
+ );
+};
+
+export default MaplibreWorldMap;
diff --git a/src/controls/worldMap/examples.tsx b/src/controls/worldMap/examples.tsx
new file mode 100644
index 000000000..99d3f04c4
--- /dev/null
+++ b/src/controls/worldMap/examples.tsx
@@ -0,0 +1,217 @@
+// Example usage of WorldMapControl with search functionality
+
+import { IData } from './IData';
+import { MaplibreWorldMap } from './WorldMapControl';
+import React from 'react';
+
+const ExampleWithSearch: React.FC = () => {
+ const mapData: IData[] = [
+ {
+ id: '1',
+ name: 'New York',
+ imageUrl: 'https://example.com/ny.jpg',
+ link: 'https://example.com/ny',
+ coordinates: [-74.006, 40.7128]
+ },
+ {
+ id: '2',
+ name: 'London',
+ imageUrl: 'https://example.com/london.jpg',
+ link: 'https://example.com/london',
+ coordinates: [-0.1276, 51.5074]
+ },
+ {
+ id: '3',
+ name: 'Tokyo',
+ imageUrl: 'https://example.com/tokyo.jpg',
+ link: 'https://example.com/tokyo',
+ coordinates: [139.6917, 35.6895]
+ }
+ ];
+
+ const handleLocationClick = (location: IData): void => {
+ console.log('Location clicked:', location.name);
+ };
+
+ const handleSearchChange = (searchTerm: string, filteredData: IData[]): void => {
+ console.log('Search term:', searchTerm);
+ console.log('Filtered results:', filteredData);
+ if (!searchTerm) {
+ console.log('Search cleared - map reset to initial view');
+ }
+ };
+
+ return (
+
+
+
+ {searchConfig.enabled && (
+
+
+ handleSearch(data?.value || '')}
+ dismiss={{
+ onClick: handleSearchClear,
+ }}
+ size="medium"
+ style={{ width: '100%', minWidth: '250px' }}
+ />
+ {searchTerm && (
+
+ )}
+
+ {filteredData.length}{' '}
+ {filteredData.length === 1
+ ? strings.worldMapLocationLabel
+ : strings.worldMapLocationPluralLabel}{' '}
+ {strings.worldMapFoundLabel}
+
+ )}
+