[json] graphset > shapes > options > style > controls > zoom-in/out > media

<!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,
    #myChart {
      height: 100%;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    zingchart.loadModules('maps, maps-usa_ak', function(e) {

      let chartConfig = {
        shapes: [{
          type: 'zingchart.maps',
          options: {
            name: 'usa_ak',
            zooming: false,
            panning: false,
            scrolling: false,
            style: {
              controls: {
                placement: 'tr',
                zoomOut: {
                  mediaRules: [{
                    maxWidth: 400,
                    backgroundColor: 'red',
                    fontColor: 'blue',
                  }],
                },
                zoomIn: {
                  mediaRules: [{
                      maxWidth: 400,
                      backgroundColor: 'red',
                      fontColor: 'blue',
                    },
                  }]
              }
            }
          }
        }]
      };

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

    });
  </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'></div>
</body>

</html>

html,
body,
#myChart {
  height: 100%;
  width: 100%;
}

zingchart.loadModules('maps, maps-usa_ak', function(e) {

  let chartConfig = {
    shapes: [{
      type: 'zingchart.maps',
      options: {
        name: 'usa_ak',
        zooming: false,
        panning: false,
        scrolling: false,
        style: {
          controls: {
            placement: 'tr',
            zoomOut: {
              mediaRules: [{
                maxWidth: 400,
                backgroundColor: 'red',
                fontColor: 'blue',
              }],
            },
            zoomIn: {
              mediaRules: [{
                  maxWidth: 400,
                  backgroundColor: 'red',
                  fontColor: 'blue',
                },
              }]
          }
        }
      }
    }]
  };

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

});