jVectorMap API

SUMMARY

This jVectorMap module is a simple libraries API wrapper for the super cool jVectorMap jQuery JavaScript library. It provides all the wiring to start creating maps in your drupal website.

Please refer to http://jvectormap.com/ for a more full descripton of jVectorMap.

REQUIREMENTS

• jVectorMap JavaScript library available from: http://jvectormap.com/download/

INSTALLATION

• Install library as usual, for further information see https://drupal.org/node/1440066.
• The JavaScript & CSS files library files should have the version number removed i.e. jquery-jvectormap-1.2.2.min.js => jquery.jvectormap.min.js. By default the jvectormap library 1.2.2 does not have a minified js file. You have to run build.sh found inside the library file in order to generate a proper minified file. And you can't just minify the file jquery-jvectormap,js because you have to include all the js files inside the /lib inside the library.

API

Example #1

    // file: myModule.module
    $form['default-world-map'] = array(
      '#theme' => 'jvectormap',
    );
    
    // file: myModule.js
	(function ($) {
      Drupal.behaviors.example = {
        attach: function (context, settings) {
          $('div#jvectormap-auto-identifier-0').vectorMap();
        }
      };
    })(jQuery);

Example #2

    // file: myModule.module
    $form['custom-map'] = array(
      '#theme' => 'jvectormap',
      '#attributes' => array(
        'id' => 'custom-world-map', // Optional as one will get auto-generated.
        'style' => 'width:300px;height:200px', // Optional - default size 600x400.
      ),
      // Optional as it defaults to jquery-jvectormap-world-mill-en.js
      // if it exists in jvectormap libraries folder.
      '#map_path' => drupal_get_path('module', 'example') . '/js/custom_world_en.js',
    );

    // file: myModule.js
    (function ($) {
      Drupal.behaviors.example = {
        attach: function (context, settings) {
          $('div#custom-world-map').vectorMap({
            map: 'custom_world_en',
          });
        }
      };
    })(jQuery);
    

FAQ

Q: Why isn't it working? No map renders and the map JavaScript file gives error:
'Uncaught TypeError: Cannot read property 'fn' of undefined'.

A: This is fixed in the most recent versions of jVectorMap. See https://github.com/bjornd/jvectormap/issues/196. However, if you must use an older version, modify the map js file so it essentially uses jQuery.noConflict()

  File: map.js
  (function ($) {
    $.fn.vectorMap('addMap', 'world_mill_en'..........
  })(jQuery);

CONTACT

Current maintainer:

• Lucas Hedding (heddn) - http://drupal.org/user/1463982