JsVectorMap
~12kb gzipped (JS) + ~1kb CSS (+ ~30kb map data)Stylized SVG country maps for data viz -- the fastest way to render a "sales by country" choropleth.
See It in Action
Each demo loads the world map data and styles it for the dark theme. Hover countries or markers to see tooltips, click for events.
A stylized world map with six office markers. Hover a marker to see the city name. The "Where we are" widget pattern, without real-world tile streaming.
What is JsVectorMap?
JsVectorMap is a JavaScript library that draws stylized SVG country and region maps in the browser. It does not stream real-world tiles -- it loads a static map data file (world, world-mercator, individual continents or countries) and renders the borders as customizable SVG shapes.
It is the modern, MIT-licensed successor to the abandoned jvectormap library, written from scratch with no jQuery dependency. The killer feature is its choropleth API: pass an object of countryCode -> value pairs and JsVectorMap colors each country on a gradient automatically -- the fastest way to render a "sales by country" or "users by region" dashboard widget.
When to Use JsVectorMap
How JsVectorMap Compares
Leaflet renders real-world maps from streamed tile providers -- streets, satellite, terrain. JsVectorMap renders stylized SVG country shapes from a static data file. Pick Leaflet when geography matters; pick JsVectorMap when you just need 'color these countries by value'.
D3 + TopoJSON is the maximally-flexible way to draw SVG choropleth maps -- you control every projection, every interpolation, every interaction. JsVectorMap is the batteries-included choice that gets you a working choropleth in 10 lines instead of 100.
Highmaps is the polished commercial choice with deep features and professional support -- but it is paid for non-personal use. JsVectorMap is MIT-licensed and free forever. Pick Highmaps if you already pay for Highcharts; pick JsVectorMap for free projects.
amCharts is feature-rich but requires a paid license to remove the watermark on commercial sites. JsVectorMap has no watermark and no license fees. Use amCharts for highly-customized data viz dashboards; use JsVectorMap when you need a clean choropleth without paying or branding constraints.
Get Started with JsVectorMap
npm install jsvectormapyarn add jsvectormap<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jsvectormap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jsvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/maps/world.js"></script><!-- In your <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jsvectormap.min.css">
<!-- In your <body> -->
<div id="map" style="height: 500px;"></div>
<!-- The library, then the map data file -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jsvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/maps/world.js"></script>
<script>
// Pass a CSS selector + a registered map name. That is the whole API.
const map = new jsVectorMap({
selector: "#map",
map: "world",
backgroundColor: "transparent",
regionStyle: {
initial: { fill: "#cbd5e1" },
hover: { fill: "#4ecdc4" }
}
});
</script>