A map shows reach and place faster than a list of cities ever could. These range from flat dotted world maps to interactive ones with markers and lines between points. Watch how each one handles your own locations, how it scales on a phone and what it costs the page to draw. Install one as code you own and plot the places that matter to your product.
Map components draw the world or a region: flat dotted maps, maps with animated connection lines between cities, and interactive maps with markers and tooltips. They're a common way to show where customers, servers or offices are.
Decide whether the map is decoration or data. A decorative dotted map can be a light SVG; a map people explore needs zoom, labels and accessible markers. Keep marker positions in your own data so they update without touching the drawing.
Frequently asked questions
For a decorative map, an SVG of dots or country shapes is light and needs no map service. For a map people zoom and pan, use a library like MapLibre or Leaflet with tiles. The components here cover the decorative and animated kinds.
Convert each city's latitude and longitude to a point on the map's projection, then draw a curved SVG path between the points and animate its stroke. Keep the coordinates in an array so the lines update with your data.
SVG and dotted maps don't, since the drawing ships with the component. Maps that load street tiles from a provider usually do, along with that provider's terms.
Yes. Pass a list of places with their coordinates and labels, and the component places a marker for each. Give markers text labels as well, so the information doesn't depend on reading the map.
Sample the world's land at a grid of points and draw a dot at each one that falls on land, as SVG circles. The result is light, scales cleanly and takes your colours.
Yes. Animate lines drawing between locations, pulse markers, or reveal regions as the map scrolls into view. Keep the motion slow enough that people can read where things are.
Add a text list of the locations alongside the map, or labels on the markers, so the information doesn't depend on seeing the drawing. Hide purely decorative maps from screen readers.
