Basic example
This section provide basic examples using diffrent approaches, to get started.
Using cli
If you're using webpack
or something like that you'll need to import the map you want to work with after importing jsvectormap.
Notice: We're using world_merc
map not world
in examples
@import 'jsvectormap'
@import 'jsvectormap/dist/maps/world'
const map = new jsVectorMap({
selector: '#map',
map: 'world',
})
Overwrite style
Style was written using Scss
so you can overwrite the default style using variables without twaeaking it, you may want to take a look at jsvectormap.scss to know about all possiable variables.
// app.scss
$tooltip-bg-color: #374151;
$tooltip-font-family: 'Inter', sans-serif;
$tooltip-font-size: 0.925rem;
// ...
Manually
Getting start manually
with simple example.
<link rel="stylesheet" href="dist/css/jsvectormap.min.css" />
<script src="dist/js/jsvectormap.min.js"></script>
<script src="dist/maps/world.js"></script>
<div id="map" style="width: 600px; height: 350px"></div>
var map = new jsVectorMap({
selector: "#map",
map: "world",
});