A lightweight Javascript library for creating interactive maps.
First of all, this project is a deeply modified version of jvectormap
I created this project to help developers who aren't using jQuery in their projects.
IE 8 dropped, and the VML is no longer supported.
jQuery removed, the project is completely build with pure Javascript.
vuevectormap a Vue wrapper component.
Checkout the demo at codesandbox, code.
Demo at Codepen
Installing via npm
npm i jsvectormapYou can download the latest version from the Github: Download
or clone the repository:
git clone https://github.com/themustafaomar/jsvectormap.git
<html>
<head>
<title>JsVectorMap</title>
<link rel="stylesheet" href="dist/css/jsvectormap.min.css" />
<script src="dist/js/jsvectormap.min.js"></script>
<script src="dist/maps/world.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 450px"></div>
<script>
var map = new JsVectorMap({
selector: '#map',
map: 'world'
});
</script>
</body>
</html><script src="https://unpkg.com/jsvectormap"></script>
<script src="https://unpkg.com/jsvectormap/dist/maps/world.js"></script>If you're using webpack or something like that you'll need to import the map you want to work with after importing the library.
@import 'jsvectormap'
@import 'jsvectormap/dist/maps/world.js'
const map = new jsVectorMap({
selector: '#map',
map: 'world',
})Sass
@import 'jsvectormap'map 'world'
The map type
backgroundColor 'transparent'
The map's container background color
draggable 'true'
Change the map scale when dragging
zoomButtons 'true'
Show zoom buttons
zoomOnScroll 'true'
Zoom the map when scolling.
zoomOnScrollSpeed '3'
The scroll speed when scrolling
zoomMax '12'
Maximum map zoom
zoomMin '1'
Minimum map zoom
zoomAnimate 'true'
Animate when zomming the map
showTooltip 'true'
Show tooltip when hovering over a region and marker
setFocus object version >= 1.0.5
Set focus on a specific region/regions
markers/regionsSelectable 'false'
The marker is selectable
markers/regionsSelectableOne
Allow only one marker to be selected
marker/regionStyle 'object'
Let's see an example instead, since the options is so clear.
markerStyle: { // Or: regionStyle
initial: {
r: 8, // Marker/region width
fill: 'black', // Marker/region color
fillOpacity: 1, // The opacity of the marker/region shape
stroke: '#FFF', // Stroke
strokeWidth: 6, // the stroke width
strokeOpacity: .65, // The stroke opacity
},
// All options in initial object can be overitten
// in hover, selected, selectedHover object as well.
hover: {
stroke: 'black',
cursor: 'pointer',
strokeWidth: 2,
},
selected: {
fill: 'blue'
},
selectedHover: {
fill: 'red'
}
},| Name | Description | Params |
|---|---|---|
onLoaded |
Triggered when map is fully rendered (available since v1.1.0+) | a map instance |
onViewportChange |
Triggered when map viewport was changed | scale - transX - transY |
onRegionSelected |
Triggered when a region was selected | index, isSelected, selectedRegions |
onMarkerSelected |
Triggered when a marker was selected | code, isSelected, selectedMarkers |
onRegionTooltipShow |
Triggered when region tooltip was shown | tooltip, code |
onMarkerTooltipShow |
Triggered when marker tooltip was shown | tooltip, code |
Your contributions always welcome
- please don't update the build files when sending pull requests, modifications should be committed within src/js/*.
If you're good at React or Angular and you want to make a wrapper component
please feel free to do it and contact me at [email protected] to add mention your repository here.
jsvectormap licensed under MIT.