Getting Started
Changelog
Discover all the release notes for the Jsvectormap.
v1.6.0 (latest)
- feat(maps): create the build maps script (99894b8)
- feat(regions): set/clear selected regions programmatically (e6fab94) (#137)
- fix(markers): add markers method (a59cc39)
- chore: drop internet explorer entirly (964dcdd)
- fix(visualization): NAN value is encountered when min and max are the same (b3b8030) (#147)
- feat: allow all styles in add markers (bb8366e) (#140)
- feat: refactor: support umd, es and cjs formats (b338ef9) (#153)
BREAKING CHANGES
Removed js
and css
from dist folder, so if you’re importing jsvectormap from dist/js/jsvectormap.js it becomes dist/jsvectormap.js and css as well.
<!--
/dist/js/jsvectormap.js -> /dist/jsvectormap.js
/dist/js/jsvectormap.min.js -> /dist/jsvectormap.min.js
/dist/js/jsvectormap.css -> /dist/jsvectormap.css
/dist/js/jsvectormap.min.css -> /dist/jsvectormap.min.css
-->
Another thing is, when you add a particular style per marker please specify the case you want to apply the style for eg initial, hover, selected and selectedHover.
const map = new jsVectorMap({
markers: [
{
name: 'Palestine',
coords: [31.9522, 35.2332],
// ❌ This isn't gonna work anymore
style: { fill: 'red' },
// ✅ Instead, style the marker based on its case.
style: {
initial: {
fill: 'red'
},
// etc...
hover: {}
}
}
]
})
v1.5.3
- fix: dragging doesn’t work on mobile devices (#126)
v1.5.2
- fix(markers): get/clear selected markers
- fix: series doesn’t receive markers nor regions
- fix(events): tooltip fails when it’s disabled (#117)
- perf: massively improves performance when not using labels (#115)
- style: replace let with const for the sake of consistency
- refactor: abstract the zoom handlers
- style: replace let with const
- style: imporve variable declaration
- fix: zoom on mobile (#104)
- refactor: replace jsvectormap.js with index.js
v1.5.1
- fix: region label fails (#92)
- fix: add ability to customize circled markers (#97)
- refactor: improve consistency & readability (5cf594d)
v1.5.0
- feat(events): onRegion/MarkerClick support (#29)
- fix: shaky click selects a region (#47)
- fix: lines reposition fails
- refactor: improve the destroy method
- refactor: build an abstract class for components
- refactor: improve consistency & remove addMarker entirely
- feat: ability to remove a line or multiple lines
- refactor: better name conventions (#86)
- refactor: move elements to components (#81)
- refactor: get selector from merged options directly
- fix: too much recursion error (#75) (#76)
- feat(lines): ability to remove lines (#72)
- fix(typo): ‘tranparent’ typo in default options (#71)
Release Notes
Starting from v1.5.0 the addLine
and removeLine
are deprecated and will be removed soon, as an alternative please use addLines
see docs and removeLines
see docs.
Events onRegionTooltipShow
and onMarkerTooltipShow
will receive the native event as the first argument.
const map = new jsVectorMap({})
// ❌ Avoid this in the future versions.
map.addLine()
// ✅ Use `addLines` method to add a line or multiple lines.
map.addLines({ from: 'Palestine', to: 'Ukraine' })
map.addLines([
{ from: 'United States', to: 'Egypt' },
{ from: 'Palestine', to: 'Ukraine' },
])
// ❌ Avoid this in the future versions.
map.removeLine('United States', 'Egypt')
// ✅ Use `removeLines` method to remove multiple lines or all lines.
map.removeLines()
map.removeLines([{ from: 'United States', to: 'Egypt' }])
// Events
const map = new jsVectorMap({
...
onRegionTooltipShow(event, tooltip, index) {
// ..
}
onMarkerTooltipShow(event, tooltip, index) {
// ..
}
...
})
v1.4.5
- fix: jsvectormap constructor is not accessible (#69)
- refactor: drop webpack development server
- docs: import typo
- fix: touch events
v1.4.4
- fix: lines position fail when zooming in/out (#63)
v1.4.3
- refactor: switch addMap, maps, defaults to static (3b3b13d)
- revert: revert tooltip’s css method (83b7822)
- fix: touch handlers (fc4dbe4)
- chore: cleaning up (a8be4ef)
- fix: marker’s render function (5136fae)
BREAKING CHANGES
All other maps except world
and world_merc
are ignored from the npm package, but it’s available on Github, you can download these maps from Available maps page.
v1.4.2
- fix: tooltip not destroyed
v1.4.0
- refactor: drop dom handler class
- refactor: move tooltip functionality to class (#53)
- fix: fix mouseup event & fix zoom buttons
- refactor: clean up util api
- refactor: refactor directory structure
- fix: fix ‘addMarkers’ method doesn’t work with arrays
- fix(scroll): fix mouse wheel behavior (#52)
BREAKING CHANGES
In early versions the map
container was an instance of a custom dom handler class that contains a delegate
method, now it’s just a DOM element, so the delegate
method won’t be available anymore.
const map = new jsVectorMap({
// ...
onLoaded: (map) => {
// ❌ Won't work anymore.
map.container.delegate('.jvm-region', 'click', (event) => {
// ..
})
// ✅ You will need to define your own event listener, example
map.container.addEventListener('click', (event) => {
if (event.target.matches('.jvm-region')) {
// Do something
}
})
},
// ...
})
Tooltip instance
The tooltip also was a DomHandler
instance, now it’s a Tooltip
instance which implements these methods getElement
, show
, hide
, text
, css
.
const map = new jsVectorMap({
// ...
onMarkerTooltipShow(tooltip, index) {
// ❌ Won't work anymore.
const element = tooltip.selector
// Do something with the tooltip DOM element..
// ✅ If you need the tooltip DOM element, you can access it like so:
const element = tooltip.getElement()
// Do something with the tooltip DOM element, or..
// tooltip.css({ backgroundColor: 'red' })
// tooltip.text('Hello')
},
// ...
})
v1.3.3
- fix: dragging the map selects the region (#48)
- fix: eventHandler’s off method doesn’t delete the reference
- style: correct events names for consistency
- feat: introduce a new event ‘onDestroyed’
- fix(add-markers): add markers method not working with object