Lines

The lines section will provide you with all you need to know about lines.

Lines object

Register lines specifications, to get started with lines do the example below.

Notice: lines requires markers to work.

  • lines
    • Type: Array
    • Default: undefined
const map = new jsVectorMap({ 
  markers: [
    { name: 'Foo', coords: [-14.2350, -51.9253] },
    { name: 'Bar', coords: [35.8617, 104.1954] }
  ],
  lines: [{
    from: 'Foo', to: 'Bar',
    style: {
      stroke: 'red',
      strokeWidth: 1.5
    }
  }]
})

Add line

You may want to add a new line after the map loaded

// Be sure the `names` are valid, example:
const map = new jsVectorMap({
  markers: [{
    name: 'Canada',
    coords: [56.1304, -106.3468]
  }, {
    name: 'Egypt',
    coords: [26.8, 30.8]
  }]
})

map.addLine('Egypt', 'Canada')

Control line style.

Control the line style, notice no hover or selected object for lines, add your style directly within lineStyle.

Notice: you can add any line property for example:

const map = new jsVectorMap({ 
  lineStyle: {
    stroke: "#676767",
    strokeWidth: 2.5,
    fill: '#ff5566',
    fillOpacity: 1,
    strokeDasharray: '6 3 6' // OR: [6, 2, 6]
  },
})