• Getting Started
  • Changelog
Getting Started

Changelog

Edit this page

Discover all the release notes for the Jsvectormap.

  • 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)

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: {}
      }
    }
  ]
})
  • fix: dragging doesn’t work on mobile devices (#126)
  • 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
  • fix: region label fails (#92)
  • fix: add ability to customize circled markers (#97)
  • refactor: improve consistency & readability (5cf594d)
  • 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)

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) {
    // ..
  }
  ...
})
  • fix: jsvectormap constructor is not accessible (#69)
  • refactor: drop webpack development server
  • docs: import typo
  • fix: touch events
  • fix: lines position fail when zooming in/out (#63)
  • 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)

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.

  • fix: tooltip not destroyed
  • 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)

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
      }
    })
  },
  // ...
})

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')
  },
  // ...
})
  • 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