About
Renders colored points on a canvas element. Useful for showing entity positions, heatmaps,
or any 2D point data. Configure dimensions and point size via attributes; populate data
programmatically with setData().
Basic Usage
<ars-minimap width="200" height="120"></ars-minimap>
const minimap = document.getElementById('basic-minimap');
minimap.setData([
{ id: 'a', x: 20, y: 30, color: '#ef4444' },
{ id: 'b', x: 80, y: 50, color: '#3b82f6' },
{ id: 'c', x: 150, y: 90, color: '#22c55e' },
]);
Dimensions
<ars-minimap width="240" height="140"></ars-minimap>
Point Size
<ars-minimap width="160" height="100" point-size="3"></ars-minimap>
Dense Data (Heatmap-style)
// Generate 200 random points for a heatmap effect
const points = Array.from({ length: 200 }, (_, i) => ({
id: i,
x: Math.random() * 300,
y: Math.random() * 160,
color: `hsl(${Math.random() * 60 + 200}, 70%, 60%)`,
}));
minimap.setData(points);
Interactive Controls
Theme Toggle
Usage
<ars-minimap
id="minimap"
width="300"
height="200"
point-size="3"
></ars-minimap>
<script type="module">
import { ArsMinimap } from '/dist/components/ars-minimap/ars-minimap.js';
const minimap = document.getElementById('minimap');
// Render points
minimap.setData([
{ id: 'entity-1', x: 50, y: 80, color: '#ff0000' },
{ id: 'entity-2', x: 120, y: 40, color: '#00ff00' },
{ id: 'entity-3', x: 200, y: 150, color: '#0000ff' },
]);
// Clear all points
minimap.clear();
</script>