Drupal 7: Simple Highchart Map integration using Display Suite Fields

David G - DrupalFor a website project I want to embed Maps from the HighCharts Javascript library into a webpage. There are numerous modules in Drupal that allow integration with HighCharts and Drupal, but few that allow Map visualizations easily in Drupal. So as a workaround for these modules and Drupal I opted to reuse existing modules in my Drupal 7 site to create Map field(s) in Drupal the Display Suite (DS) module.

Existing Modules that allow Integration of HighCharts and Drupal 7:


Name / Versions Pros Cons
Highcharts Module
1.0-alpha6 / 2.x-dev
  • Views support
  • uses a highcharts_render() method with array() defining chart/data.
  • Not updated since 2013
  • doesnt support all data/chart options of recent Highcharts API.
  • No Map support, only charting support.
Charts Module
2.0-rc1 / 2.x-dev
  • Generic Charts API across many libraries
  • Views support
  • Generic API does not support Highcharts specific options for charts. API doesn’t support maps only visual charts.
Visualization API
8.x-1.0beta1, 7.x-1.0beta2
  • Last updated in 2015!
  • renders charts using Views API.
  • Kept fairly in-sync with Highcharts API manually.
  • Has a neat helper function to render a formset options for a chart.
  • (typically) uses Views API to build data resultset for Highcharts.
  • No Maps support


My Solution for a simple Map in Drupal 7 tied to a content type:

This solution requires that you make use of Display Suite and are comfortable with Custom Fields in DS.

Simply create a DS field for my content type:

Custom DS Field for a content type.

Custom DS Field for a content type.

and then add the following code to a field:


// Add highcharts dependencies
// Example from:
// http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/us-data-labels/
//drupal_add_js('http://code.highcharts.com/highcharts.js', 'external');
drupal_add_js('https://code.highcharts.com/maps/highmaps.js', 'external');
drupal_add_js('https://code.highcharts.com/maps/modules/data.js', 'external');
drupal_add_js('https://code.highcharts.com/maps/modules/exporting.js', 'external');
drupal_add_js('https://code.highcharts.com/mapdata/countries/us/custom/us-small.js', 'external');

$js =<<<EOFJS
jQuery(document).ready(function () {

 // Load the data from the HTML table and tag it with an upper case name used for joining
    var data = [],
        // Get the map data
        mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);

        table: document.getElementById('data'),
        startColumn: 1,
        startRow: 1,
        complete: function (options) {
            jQuery.each(options.series[0].data, function () {
                    ucName: this[0],
                    value: this[1]

    // Process mapdata
    jQuery.each(mapData, function () {
        var path = this.path,
            copy = {
                path: path

        // This point has a square legend to the right
        if (path[1] === 9727) {

            // Identify the box
            Highcharts.seriesTypes.map.prototype.getBox.call(0, [copy]);

            // Place the center of the data label in the center of the point legend box
            this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX); // eslint-disable-line no-underscore-dangle
            this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY); // eslint-disable-line no-underscore-dangle

        // Tag it for joining
        this.ucName = this.name.toUpperCase();

    // Initiate the chart
    jQuery('#prez_map').highcharts('Map', {

        title: {
            text: 'US unemployment rate 2015'

        subtitle: {
            text: 'Small US map with data labels'

        mapNavigation: {
            enabled: true,
            enableButtons: false

        xAxis: {
            labels: {
                enabled: false

        colorAxis: {},

        series: [{
            mapData: mapData,
            data: data,
            joinBy: 'ucName',
            name: 'Unemployment rate per 2015',
            states: {
                hover: {
                    color: '#BADA55'
            dataLabels: {
                enabled: true,
                formatter: function () {
                    return this.point.properties['hc-a2'];
                style: {
                    fontSize: '10px'
            tooltip: {
                valueSuffix: '%'
        }, {
            type: 'mapline',
            data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small'], 'mapline'),
            color: 'silver'
drupal_add_js($js, 'inline');

$content = array(
  'highcharts_map' => array(
    '#type' => 'markup',
    '#markup' => "<div id='prez_map'></div>"
return drupal_render($content);

There you have it. An example screenshot of this field on an example site is:

Example HighMaps map embedded at top of Node content.

Example HighMaps map embedded at top of Node content.

Now admittely, this sample setup is simply taking 1 of the Demos of the HighMaps examples and shoving it onto a Drupal node page. But, that is essentially what I want to happen. I will of course in the near future make the following amendments to this code:

  • Make use of either drupal_add_js or #attached within the render array to include the JS dependencies.
  • Create additional fields, or Paragraphs configurations which the DS field will inspect and use as map data to render the maps more dynamically for the few types of maps I want to show on my site.

This DS usage and Field configuration is simply the most basic building blocks I’ve thought of to create the necessary codebase within Drupal to meet my clients needs.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *