Jsvectormap logo
  • Options
  • API Reference
Options

API Reference

Edit this page

The map section provides detailed information about the options and methods you can use to manipulate the map.

Options

PropertyDescriptionTypeDefault
mapThe name of the map you want to work withStringworld
backgroundColorThe map’s container background colorStringtransparent
draggableChoose whether you want to make the map draggable or notBooleantrue
zoomButtonsShow zoom buttonsBooleantrue
zoomOnScrollZoom the map when wheelingBooleantrue
zoomOnScrollSpeedThe scroll speed when wheelingNumber3
zoomMaxMaximum map zoomNumber12
zoomMinMinimum map zoomNumber1
zoomAnimateAnimate when zomming the mapBooleantrue
showTooltipShow the tooltip when hovering over a region and markerBooleantrue
zoomStepThe size of step when zooming in/outNumber1.5
bindTouchEventsEnable touch events in mobileBooleantrue
focusOnSet focus on a specific region/regionsObject{}

Focus on

Set focus on a specific region/regions

const map = new jsVectorMap({ 
  focusOn: {
    regions: ['EG', 'SA'],
    animate: true
  },
  // Or a single region
  focusOn: {
    region: 'EG',
    // ...
  }
})

Methods:

PropertyDescriptionParamsExample
setBackgroundColorSet the map’s background color.String@example
getSelectedRegionsGet the selected regionsNone@example
clearSelectedRegionsClear the selected regionsString | Array | None@example
setSelectedRegionsSet the selected regions v1.6.0+String | Array@example
getSelectedMarkersGet the selected markersNone@example
clearSelectedMarkersClear the selected markersNone@example
addMarkersAdd a new marker or array of markers[Object | Array]@example
addLine (deprecated)Adds new line between two markers[from String, to String]@example
addLinesAdds new line/s between two markers[lines Array | line Object]@example
removeLine (deprecated)Removes a line[from String, to String]@example
removeLinesRemoves all lines or array of lines[None to remove all | lines Array]@example
resetReset the mapNone@example
extendExtend the mapThe map instance Object@example
destroyRestroy the mapNone@example
updateSizeUpdate the size of the map, useful when resizing the windowNone@example

setBackgroundColor()

Set the map’s background color.

const map = new jsVectorMap({})

document.querySelector('button').addEventListener('click', () => {
  map.setBackgroundColor('#f6f6f6')
})

reset()

Reset the map.

const map = new jsVectorMap({})

document.querySelector('button').addEventListener('click', () => {
  map.reset()
})

updateSize()

Update the size of the map, useful when resizing the window

const map = new jsVectorMap({
  onLoaded(map) {
    window.addEventListener('resize', () => {
      map.updateSize()
    })
  }
})

extend()

Extend the map by adding a method to the map prototype.

const map = new jsVectorMap({})

map.extend('$hello', function (options) {
  const map = this

  // Do some logic...
})

map.$hello({})

destroy()

Destroy the map, by removing the map, tooltip and all event listeners attached to the map.

const map = new jsVectorMap({})

document.querySelector('button').addEventListener(() => {
  map.destroy()
})