Docs > Maps > USA Drilldown Map

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // must load maps and first map we are going to render
    zingchart.loadModules('maps,maps-usa');

    var arrayOfColors = ['#EF9A9A #E57373', '#F48FB1 #F06292', '#B39DDB #9575CD', '#90CAF9 #64B5F6', '#80DEEA #4DD0E1', '#80CBC4 #4DB6AC', '#A5D6A7 #81C784', '#E6EE9C #DCE775', '#FFE082 #FFD54F', '#FFAB91 #FF8A65'];
    var colorIndex = 0;
    var listOfStates = ["al", "ak", "az", "ar", "ca", "co", "ct", "de", "dc", "fl", "ga", "hi", "id", "il", "in", "ia", "ks", "ky", "la", "me", "md", "ma", "mi", "mn", "ms", "mo", "mt", "ne", "nv", "nh", "nj", "nm", "ny", "nc", "nd", "oh", "ok", "or", "pa", "ri", "sc", "sd", "tn", "tx", "ut", "vt", "va", "wa", "wv", "wi", "wy"];

    /* 
     *  need this function to render the first map load with random colors
     */
    var objectStates = function(arrayOfStates) {
      var objectOfStates = {};
      for (var i = 0; i < arrayOfStates.length; i++) {
        var itemId = arrayOfStates[i].toUpperCase();
        colorIndexCheck();
        objectOfStates[itemId] = {
          'background-color': arrayOfColors[colorIndex++]
        }
      }

      return objectOfStates;
    }(listOfStates);

    console.log('---- object form of states ----', objectStates);

    // initial config for first chart
    var myConfig = {
      shapes: [{
        type: 'zingchart.maps',
        options: {
          name: 'usa',

          zooming: false,
          panning: false,
          scrolling: false,

          style: {
            controls: {
              visible: false
            },
            fillType: 'radial',
            cursor: 'pointer',
            hoverState: {
              alpha: 0.3,
              backgroundColor: 'white',
            },
            items: objectStates, //include specific shape regions with unique styles
            tooltip: {
              alpha: 0.8,
              backgroundColor: 'white',
              borderColor: 'white',
              borderRadius: 3,
              fontColor: 'black',
              fontFamily: 'Georgia',
              fontSize: 12,
              textAlpha: 1
            }
          }
        }
      }]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '100%',
      width: '100%'
    });


    // use this function to assign random colors 
    zingchart.bind('myChart', 'dataparse', function(e, oGraph) {
      console.log(arguments)

      // if graphset exists
      if (oGraph && oGraph.graphset[0]) {
        // if shapes exist
        if (oGraph.graphset[0].shapes) {
          oGraph.graphset[0].shapes = oGraph.graphset[0].shapes.map(function(curVal) {
            if (curVal && curVal['map-item']) {
              colorIndexCheck();
              curVal['background-color'] = arrayOfColors[colorIndex++];
            }

            return curVal;
          });
        }
      }

      return oGraph;
    });

    //drilldown chart configuration
    var drilldownConfig = {
      shapes: [{ //Drilldown maps.
          type: 'zingchart.maps',
          options: {
            name: '',

            zooming: false,
            panning: false,
            scrolling: false,

            style: {
              controls: {
                visible: false
              },
              backgroundColor: 'pink',
              hoverState: {
                alpha: 0.3,
                backgroundColor: 'white',
              },
              tooltip: {
                alpha: 0.8,
                backgroundColor: 'white',
                borderColor: 'white',
                borderRadius: 3,
                fontColor: 'black',
                fontFamily: 'Georgia',
                fontSize: 12,
                textAlpha: 1
              }
            }
          }
        },
        { //Button to go back to main map.
          id: 'back_button',
          type: 'rectangle',
          height: 25,
          width: 40,
          x: 20,
          y: 20,

          backgroundColor: '#C4C4C4',
          borderRadius: 3,
          cursor: 'hand',
          hoverState: {
            alpha: 0.3,
            backgroundColor: 'white'
          },
          label: {
            text: 'Back',
          }
        }
      ]
    };

    // stringify the maps to load them into page using loadModules()
    var stringifyMapList = listOfStates.reduce(function(acc, curVal, index) {
      if (index === 1)
        acc = 'maps-usa_' + acc;
      return acc + ',' + 'maps-usa_' + curVal;
    });
    console.log('---stringified map modules ----', stringifyMapList);

    // for maps that exist in our library. Pre-load them later on
    zingchart.loadModules(stringifyMapList);

    /*
     * shape click is when we render a new chart or load the original chart
     */
    zingchart.bind('myChart', 'shape_click', function(e) {
      var newMapId = 'usa_' + String(e.shapeid).toLowerCase();
      var shapeId = e.shapeid;

      // if shape is our back button and not the map
      if (shapeId == 'back_button') {
        // since we are using setdata, reload will reload the original chartJSON
        zingchart.exec('myChart', 'reload');
        return;
      }

      if (hasDrilldownData(newMapId)) {
        drilldownConfig.shapes[0].options.name = newMapId;
        zingchart.exec('myChart', 'setdata', {
          data: drilldownConfig
        });
      }
    });

    // used in the shape_click event to determine if we should drilldown
    function hasDrilldownData(newMapId) {
      var drillDownCountries = listOfStates.map(function(curVal) {
        return 'usa_' + curVal;
      });
      for (var i = 0; i < drillDownCountries.length; i++) {
        if (newMapId === drillDownCountries[i])
          return true;
      }

      return false;
    }

    // update colorindex for assigning random colors
    function colorIndexCheck() {
      if (colorIndex >= arrayOfColors.length) {
        colorIndex = 0;
      }
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>

</body>

</html>

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#myChart {
  height: 100%;
  width: 100%;
  min-height: 150px;
}

.zc-ref {
  display: none;
}

// must load maps and first map we are going to render
zingchart.loadModules('maps,maps-usa');

var arrayOfColors = ['#EF9A9A #E57373', '#F48FB1 #F06292', '#B39DDB #9575CD', '#90CAF9 #64B5F6', '#80DEEA #4DD0E1', '#80CBC4 #4DB6AC', '#A5D6A7 #81C784', '#E6EE9C #DCE775', '#FFE082 #FFD54F', '#FFAB91 #FF8A65'];
var colorIndex = 0;
var listOfStates = ["al", "ak", "az", "ar", "ca", "co", "ct", "de", "dc", "fl", "ga", "hi", "id", "il", "in", "ia", "ks", "ky", "la", "me", "md", "ma", "mi", "mn", "ms", "mo", "mt", "ne", "nv", "nh", "nj", "nm", "ny", "nc", "nd", "oh", "ok", "or", "pa", "ri", "sc", "sd", "tn", "tx", "ut", "vt", "va", "wa", "wv", "wi", "wy"];

/* 
 *  need this function to render the first map load with random colors
 */
var objectStates = function(arrayOfStates) {
  var objectOfStates = {};
  for (var i = 0; i < arrayOfStates.length; i++) {
    var itemId = arrayOfStates[i].toUpperCase();
    colorIndexCheck();
    objectOfStates[itemId] = {
      'background-color': arrayOfColors[colorIndex++]
    }
  }

  return objectOfStates;
}(listOfStates);

console.log('---- object form of states ----', objectStates);

// initial config for first chart
var myConfig = {
  shapes: [{
    type: 'zingchart.maps',
    options: {
      name: 'usa',

      zooming: false,
      panning: false,
      scrolling: false,

      style: {
        controls: {
          visible: false
        },
        fillType: 'radial',
        cursor: 'pointer',
        hoverState: {
          alpha: 0.3,
          backgroundColor: 'white',
        },
        items: objectStates, //include specific shape regions with unique styles
        tooltip: {
          alpha: 0.8,
          backgroundColor: 'white',
          borderColor: 'white',
          borderRadius: 3,
          fontColor: 'black',
          fontFamily: 'Georgia',
          fontSize: 12,
          textAlpha: 1
        }
      }
    }
  }]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: '100%',
  width: '100%'
});


// use this function to assign random colors 
zingchart.bind('myChart', 'dataparse', function(e, oGraph) {
  console.log(arguments)

  // if graphset exists
  if (oGraph && oGraph.graphset[0]) {
    // if shapes exist
    if (oGraph.graphset[0].shapes) {
      oGraph.graphset[0].shapes = oGraph.graphset[0].shapes.map(function(curVal) {
        if (curVal && curVal['map-item']) {
          colorIndexCheck();
          curVal['background-color'] = arrayOfColors[colorIndex++];
        }

        return curVal;
      });
    }
  }

  return oGraph;
});

//drilldown chart configuration
var drilldownConfig = {
  shapes: [{ //Drilldown maps.
      type: 'zingchart.maps',
      options: {
        name: '',

        zooming: false,
        panning: false,
        scrolling: false,

        style: {
          controls: {
            visible: false
          },
          backgroundColor: 'pink',
          hoverState: {
            alpha: 0.3,
            backgroundColor: 'white',
          },
          tooltip: {
            alpha: 0.8,
            backgroundColor: 'white',
            borderColor: 'white',
            borderRadius: 3,
            fontColor: 'black',
            fontFamily: 'Georgia',
            fontSize: 12,
            textAlpha: 1
          }
        }
      }
    },
    { //Button to go back to main map.
      id: 'back_button',
      type: 'rectangle',
      height: 25,
      width: 40,
      x: 20,
      y: 20,

      backgroundColor: '#C4C4C4',
      borderRadius: 3,
      cursor: 'hand',
      hoverState: {
        alpha: 0.3,
        backgroundColor: 'white'
      },
      label: {
        text: 'Back',
      }
    }
  ]
};

// stringify the maps to load them into page using loadModules()
var stringifyMapList = listOfStates.reduce(function(acc, curVal, index) {
  if (index === 1)
    acc = 'maps-usa_' + acc;
  return acc + ',' + 'maps-usa_' + curVal;
});
console.log('---stringified map modules ----', stringifyMapList);

// for maps that exist in our library. Pre-load them later on
zingchart.loadModules(stringifyMapList);

/*
 * shape click is when we render a new chart or load the original chart
 */
zingchart.bind('myChart', 'shape_click', function(e) {
  var newMapId = 'usa_' + String(e.shapeid).toLowerCase();
  var shapeId = e.shapeid;

  // if shape is our back button and not the map
  if (shapeId == 'back_button') {
    // since we are using setdata, reload will reload the original chartJSON
    zingchart.exec('myChart', 'reload');
    return;
  }

  if (hasDrilldownData(newMapId)) {
    drilldownConfig.shapes[0].options.name = newMapId;
    zingchart.exec('myChart', 'setdata', {
      data: drilldownConfig
    });
  }
});

// used in the shape_click event to determine if we should drilldown
function hasDrilldownData(newMapId) {
  var drillDownCountries = listOfStates.map(function(curVal) {
    return 'usa_' + curVal;
  });
  for (var i = 0; i < drillDownCountries.length; i++) {
    if (newMapId === drillDownCountries[i])
      return true;
  }

  return false;
}

// update colorindex for assigning random colors
function colorIndexCheck() {
  if (colorIndex >= arrayOfColors.length) {
    colorIndex = 0;
  }
}