/** * Clear maps - Organize markers based on their importance in a clear and elegant way. * Easy search - Provide your users a smooth and intuitive experience when searching data on the map. */ import { MapManager, type MapMarkerProperties } from '@arenarium/maps'; import { MaplibreProvider } from '@arenarium/maps-integration-maplibre'; import '@arenarium/maps/style.css'; // Create a maplibre provider instance const provider = await MaplibreProvider.create({ container: 'map' }); // Create the map manager with the provider const manager = await MapManager.create('AREANARIUM_MAPS_KEY', provider); // Create markers const markers = new Array(getMarkerCount()); for (let i = 0; i < markers.length; i++) { markers[i] = { // The unique identifier for the marker id: getId(i), // The rank used when organizing markers // Higher ranked markers tooltips are more visible rank: getRank(i), // The unique coordinates for the marker lat: getLatitude(i), lng: getLongitude(i), // The tooltip configuration tooltip: { // The HTML element for the tooltip element: getTooltipElement(i), // The width, height, and padding of the tooltip (Optional) dimensions: getTooltipDimensions(i), // The background color, radius and filter for the tooltip (Optional) style: getTooltipStyle(i), }, // The marker pin configuration (Optional) pin: { // The HTML element for the pin (Optional) element: getPinElement(i), // The pin radius and stroke width (Optional) dimensions: getPinDimensions(i), // The pin background and stroke color (Optional) style: getPinStyle(i), }, // The popup configuration (Optional) popup: { // The HTML element for the popup (Optional) element: getPopupElement(i), // The width, height, and padding of the popup (Optional) dimensions: getPopupDimensions(i), // The background color, radius and filter for the popup (Optional) style: getPopupStyle(i), }, }; } // Update the map with the new markers await manager.updateMarkers(markers);