Clear maps
Organize markers based on their importance in a clear and elegant manner.
Easy search
Provide your users a fast and smooth experience when searching 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<MapMarkerProperties>(getMarkerCount());
for (let i = 0; i < markers.length; i++) {
markers[i] = {
id: getId(i),
rank: getRank(i),
lat: getLatitude(i),
lng: getLongitude(i),
pin: {
element: getPinElement(i),
},
tooltip: {
element: getTooltipElement(i),
dimensions: getTooltipDimensions(i),
},
popup: {
element: getPopupElement(i),
dimensions: getPopupDimensions(i),
},
};
}
// Update the map with the new markers
await manager.updateMarkers(markers);
import { MapManager, type MapMarkerProperties } from '@arenarium/maps';
import { MapboxProvider } from '@arenarium/maps-integration-mapbox';
import '@arenarium/maps/style.css';
// Create a mapbox provider instance
const provider = await MapboxProvider.create({
container: 'map',
accessToken: 'MAPBOX_ACCESS_TOKEN'
});
// Create the map manager with the provider
const manager = await MapManager.create('AREANARIUM_MAPS_KEY', provider);
// Create markers
const markers = new Array<MapMarkerProperties>(getMarkerCount());
for (let i = 0; i < markers.length; i++) {
markers[i] = {
id: getId(i),
rank: getRank(i),
lat: getLatitude(i),
lng: getLongitude(i),
pin: {
element: getPinElement(i),
},
tooltip: {
element: getTooltipElement(i),
dimensions: getTooltipDimensions(i),
},
popup: {
element: getPopupElement(i),
dimensions: getPopupDimensions(i),
},
};
}
// Update the map with the new markers
await manager.updateMarkers(markers);
import { MapManager, type MapMarkerProperties } from '@arenarium/maps';
import { GoogleMapsProvider } from '@arenarium/maps-integration-google';
import '@arenarium/maps/style.css';
// Create a Google Maps provider instance
const provider = await GoogleMapsProvider.create({
container: document.getElementById('map')!,
// Other provider options
options: {
api: {
key: 'GOOGLE_MAPS_API_KEY',
v: 'weekly',
// Other google maps api options
},
map: {
mapId: 'GOOGLE_MAPS_MAP_ID',
// Other google maps options
}
}
});
// Create the map manager with the provider
const manager = await MapManager.create('AREANARIUM_MAPS_KEY', provider);
// Create markers
const markers = new Array<MapMarkerProperties>(getMarkerCount());
for (let i = 0; i < markers.length; i++) {
markers[i] = {
id: getId(i),
rank: getRank(i),
lat: getLatitude(i),
lng: getLongitude(i),
pin: {
element: getPinElement(i),
},
tooltip: {
element: getTooltipElement(i),
dimensions: getTooltipDimensions(i),
},
popup: {
element: getPopupElement(i),
dimensions: getPopupDimensions(i),
},
};
}
// Update the map with the new markers
await manager.updateMarkers(markers);
0
fps
Showing an airbnb.com style demo with a small tooltip indicating the rental price and a medium popup with the basic details.
7.1
6.3
9.8
Marker Ranking
Rank markers by importance so the most relevant data is always visible first.
Clear Search
Helps users quickly discover exactly what they're looking for on the map.
FPS
Fast Rendering
Optimized for performance with smooth animations even with thousands of markers.
Provider Support
Compatible with MapLibre, Mapbox, and Google Maps out of the box.
@arenarium/maps is a high performance
TypeScript library designed for applications that need to display a large number of complex markers without cluttering the map. Its purpose is to simplify
visualizing and searching map related information.