JavaScript Library For Interactive Vector Maps – jsvectormap

Category: Javascript | August 16, 2022
Author:themustafaomar
Views Total:352 views
Official Page:Go to website
Last Update:August 16, 2022
License:MIT

Preview:

JavaScript Library For Interactive Vector Maps – jsvectormap

Description:

A plain JavaScript library for rendering an interactive, dynamic, vector-shaped world map on the page.

More Features:

  • Clickable countries, regions.
  • Custom markers, labels, and tooltips.
  • Smooth pan & zoom.
  • Custom styles.
  • Touch-friendly.

How to use it:

1. Load the jsvectormap.css and jsvectormap.js on the HTML page.

<link rel="stylesheet" href="./dist/css/jsvectormap.css" />
<script src="./dist/js/jsvectormap.min.js"></script>

2. Create a placeholder for the vector map.

<div id="map"></div>

3. Load map data into the document.

<script src="./dist/maps/world.js"></script>
<script src="./dist/maps/world-merc.js"></script>

4. Render a map of the world with clickable regions.

var map = new jsVectorMap({
    map: 'world', // 'canada', ...
    selector: '#map', 
})

5. Config the map with the following parameters:

var map = new JsVectorMap({
    // world_merc, us_mill_en, us_merc_en,
    // us_lcc_en, us_aea_en, spain
    // russia, canada, iraq
    map: 'world',
    backgroundColor: 'tranparent',
    draggable: true,
    zoomButtons: true,
    zoomOnScroll: true,
    zoomOnScrollSpeed: 3,
    zoomMax: 12,
    zoomMin: 1,
    zoomAnimate: true,
    showTooltip: true,
    zoomStep: 1.5,
    bindTouchEvents: true,
    // Line options
    lineStyle: {
      stroke: '#808080',
      strokeWidth: 1,
      strokeLinecap: 'round'
    },
    focusOn: {}, // focus on regions on page load
    /**
     * Markers options
     */
    markers: null, // Set of markers to add to the map during initialization
    markersSelectable: false,
    markersSelectableOne: false,
    markerStyle: {
      initial: {
        r: 7,
        fill: '#374151',
        fillOpacity: 1,
        stroke: '#FFF',
        strokeWidth: 5,
        strokeOpacity: .5
      },
      hover: {
        fill: '#3cc0ff',
        cursor: 'pointer'
      },
      selected: {
        fill: 'blue'
      },
      selectedHover: {}
    },
    markerLabelStyle: {
      initial: {
        fontFamily: 'Verdana',
        fontSize: 12,
        fontWeight: 500,
        cursor: 'default',
        fill: '#374151'
      },
      hover: {
        cursor: 'pointer'
      },
      selected: {},
      selectedHover: {}
    },
    /**
     * Region styles
     */
    labels: { // add a label for a specific region
      regions: {
        render(code) {
          return ['EG', 'KZ', 'CN'].indexOf(code) > -1 ? 'Hello ' + code : ''
        },
      }
    }
    regionsSelectable: false,
    regionsSelectableOne: false,
    regionStyle: {
      // Region style
      initial: {
        fill: '#e3eaef',
        fillOpacity: 1,
        stroke: 'none',
        strokeWidth: 0,
        strokeOpacity: 1
      },
      hover: {
        fillOpacity: .7,
        cursor: 'pointer'
      },
      selected: {
        fill: '#000'
      },
      selectedHover: {}
    },
    // Region label style
    regionLabelStyle: {
      initial: {
        fontFamily: 'Verdana',
        fontSize: '12',
        fontWeight: 'bold',
        cursor: 'default',
        fill: '#35373e'
      },
      hover: {
        cursor: 'pointer'
      }
    },
    series: {
      markers: [
        // You can add one or more objects to create series for markers.
      ]
      regions: [
        // You can add one or more objects to create series for regions.
      ]
    },
    // map visualization is used to analyze and display the geographically related data and present it in the form of maps.
    visualizeData: {
      scale: ['#eeeeee', '#999999'],
      values: {
        EG: 29,
        US: 100,
        CA: 190,
        BR: 75,
        // ...
      }
    }
})

5. Add markers to the map on page load.

var markers = [
    {
      name: 'Palestine',
      coords: [31.5, 34.8],
    },
    {
      name: 'Russia',
      coords: [61, 105],
    },
    {
      name: 'Geenland',
      coords: [72, -42],
    },
    {
      name: 'Canada',
      coords: [56, -106],
    },
];
var map = new JsVectorMap({
    map: 'world',
    selector: '#map',
    regionsSelectable: true,
    markersSelectable: true,
    labels: {
      markers: {
        render: function (index) {
          return markers[index].name
        }
      }
    },
    markers: markers
})
// or
map.addMarker('RU', {
  name: 'Russia',
  coords: [61, 105],
  label: 'Russia',
  offset: [15, 10]
})

7. API methods.

// get selected regions
map.getSelectedRegions();
// clear selected regions
map.clearSelectedRegions();
// add markers
map.addMarkers([{
  name: 'Russia',
  coords: [61, 105]
}, {
  name: 'Egypt',
  coords: [26.8206, 30.8025],
  // Add some style for this particular marker.
  style: { fill: 'red' }
}])
// get selected markers
map.getSelectedMarkers();
// clear selected markers
map.clearSelectedMarkers();
// remove markers
map.removeMarkers()
// or
map.removeMarkers([1, 3])
// add lines
map.addLines([
  { from: 'United States', to: 'Egypt' },
  { from: 'Palestine', to: 'Ukraine' },
])
// remove lines
map.removeLines()
// OR
map.removeLines([{ from: 'United States', to: 'Egypt' }])
// update the size of the map
map.updateSize();
// set background color
map.setBackgroundColor('#ff0000');
// add a new method
map.extend('$hello', function (options) {
  const map = this
  // Do some logic...
})
map.$hello({});
// reset the map
map.reset();
// destroy the map
map.destroy();

8. Event handlers.

var map = new JsVectorMap({
    onLoaded: function (map) {
      window.addEventListener('resize', () => {
        map.updateSize()
      })
    },
    onViewportChange: function(scale, transX, transY) {
      // Do something
    },
    onRegionClick: function(event, code) {
      // Do something
    },
    onMarkerClick: function(event, markerIndex) {
      // Do something
    }
    onRegionSelected: function (index, isSelected, selectedRegions) {
      console.log(index, isSelected, selectedRegions);
    },
    onMarkerSelected: function (code, isSelected, selectedMarkers) {
      console.log(code, isSelected, selectedMarkers)
    },
    onRegionTooltipShow: function (tooltip, code) {
      if (code === 'RU') {
        tooltip.selector.innerHTML = tooltip.text() + ' <b>(Hello Russia)</b>'
      }
    },
    onMarkerTooltipShow: function (tooltip, index) {
      tooltip.selector.innerHTML = '<h5 class="mb-0">'+tooltip.text()+'</h5>' + '<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p><small class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit.</small>'
    },
})

Changelog:

v1.5.1 (08/16/2022)

  • refactor: improve consistency & readbility

v1.5.0 (07/10/2022)

  • feat(events): onRegion/MarkerClick support
  • fix: shaky click selects a region
  • 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
  • refactor: move elements to components
  • refactor: get selector from merged options directly
  • fix: too much recursion error
  • feat(lines): ability to remove lines
  • fix(typo): ‘tranparent’ typo in default options

v1.4.4 (02/09/2022)

  • fix: lines position fail when zooming in/out

v1.4.3 (02/01/2022)

  • refactor: switch addMap, maps, defaults to static
  • revert: revert tooltip’s css method
  • fix: touch handlers
  • chore: cleaning up
  • fix: marker’s render function

v1.4.2 (11/21/2021)

  • fix: tooltip not destroyed

v1.4.0 (11/21/2021)

  • refactor: drop dom handler class
  • refactor: move tooltip functionality to class
  • 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

v1.3.3 (09/02/2021)

  • fix: dragging the map selects the region
  • 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

v1.3.1 (06/16/2021)

  • Update

v1.3.0 (01/18/2021)

  • Deep refactor for jsvectormap that improves code structure and removing some unwanted code blocks
  • Implement data visualization feature
  • Ability to animate lines

v1.2.0 (12/29/2020)

  • Add support for drawing lines between markers
  • Fix simple issue with line class
  • Feat(add-line): ability to create lines after map initialization.

v1.2.0 (12/29/2020)

  • feat(destroy): added destroy method

You Might Be Interested In:


11 thoughts on “JavaScript Library For Interactive Vector Maps – jsvectormap

    1. Good Muyis

      You can try and tweak this jQuery.

      $(‘#map-wrapper g path’).each(function () {
      var countryCode = $(this).attr(‘data-code’);
      $(this).click(function(e){
      e.preventDefault();
      // Will open url in this format
      //https://mywebsite/center/?country=us
      window.location = “https://mywebsite/center/?country=”+countryCode;
      });
      });


      Note that you can also use dlclick() for double click event instead of single click

      Reply
      1. KD

        Where exactly would I place this script to allow a redirect when a country is clicked?

        Reply
  1. Sunil Sharma

    I am not able to bind dynamic data in world map. please help me on that.

    Reply
  2. Spinner

    Im not able to even get it working to display the map.
    I take it the index file should display a map, it just saids”Jsvectormap workspace.
    Here you can test the maps and find out how it works if you want to contribute to Jsvectormap fork this repository.. etc.” and then there is a link.

    Reply
  3. deef

    Hi! i am trying to use the map, but the downloaded file does not work. Same problem as spinner – i think the jsvectormap.js file is missing from the js folder. I am a noob to coding, so manybe i am doing something wrong. But your own index.html file doesnt not display the map.

    Thanks for any advice/help.

    Reply
  4. Manojkumar

    marker popup not working. can anyone please help me on this?

    Reply

Leave a Reply