[docs] interactive maps > maxSize

<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-body {
      background: #fff;
    }

    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }

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


<body class="zc-body">
  
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>
  <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    const MAX = 150;
    const GRAD = {
      stops: '0 0.4 0.5 0.6 0.7 1',
      colors: '#2B45B4 #5E37AE #B020AF #FF2D98 #FC840A',
    };

    let chartData = {
      flat: true,
      type: 'null',
      backgroundColor: '#fff',
      plotarea: {
        margin: '25 10 10 10',
      },
      shapes: [{
        type: 'zingchart.maps',
        options: {
          id: 'mapmain',
          name: 'fra',
          scale: true,
          zooming: false,
          panning: false,
          scrolling: false,
          style: {
            flat: true,
            controls: {
              visible: false,
            },
            borderAlpha: 0.1,
            borderColor: '#fff',
            label: {
              visible: false,
              overlap: false,
              text: '%long-text',
            },
            hoverState: {
              visible: false,
              backgroundColor: 'none',
              shadowAlpha: 0.2,
              shadowDistance: 2,
              shadow: true,
              shadowColor: '#333',
            },
          },
        },
      }, ],
      heatmap: {
        size: 5,
        blur: 15,
        alpha: 0.75,
        minValue: 0,
        maxValue: MAX,
        gradientStops: GRAD.stops,
        gradientColors: GRAD.colors,
      },
      colorScale: {
        aspect: 'gradient',
        gradientStops: GRAD.stops,
        gradientColors: GRAD.colors,
        backgroundColor: null,
        alpha: 0.75,
        height: '100px',
        minValue: 0,
        maxValue: MAX,
      },
    };


    let aData = [];

    zingchart.bind('myChart', 'load', function() {
      window.setInterval(function() {
        let l, iIndex, fLon, fLat, iPop, aXY;
        let iMaxPoints = 2 * 256;

        if (aData.length === 0) {
          for (l = 0; l < iMaxPoints; l++) {
            iIndex = ZC._r_(0, FR_POP_2010.length - 1);
            fLon = FR_POP_2010[iIndex][0];
            fLat = FR_POP_2010[iIndex][1];
            iPop = FR_POP_2010[iIndex][2];
            aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
            aData.push([aXY[0], aXY[1], MAX * Math.random()]);
          }
        } else {
          for (l = aData.length - 1; l >= 0; l--) {
            aData[l][2] = Math.min(
              MAX,
              aData[l][2] - MAX / 19 + (MAX / 20) * Math.random()
            );
            if (aData[l][2] <= 0) {
              aData.splice(l, 1);
            }
          }
          for (l = 0; l < iMaxPoints - aData.length; l++) {
            iIndex = ZC._r_(0, FR_POP_2010.length - 1);
            fLon = FR_POP_2010[iIndex][0];
            fLat = FR_POP_2010[iIndex][1];
            iPop = FR_POP_2010[iIndex][2];
            aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
            aData.push([aXY[0], aXY[1], MAX * Math.random()]);
          }
        }
        zingchart.exec('myChart', 'heatmap.setdata', {
          data: aData,
        });

      }, 15);
    });

    zingchart.bind('myChart', 'heatmap.mousemove', function(oInfo) {
      if (oInfo.value !== null) {
        zingchart.exec(oInfo.id, 'colorscale.setvalue', {
          graphid: oInfo.graphid,
          value: oInfo.value,
        });
      } else {
        zingchart.exec(oInfo.id, 'colorscale.clear', {
          graphid: oInfo.graphid,
        });
      }
    });

    zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {
      zingchart.render({
        id: 'myChart',
        width: '100%',
        height: '100%',
        output: 'canvas',
        data: chartData,
        modules: 'heatmap,color-scale',
      });
    });
  </script>
</body>

</html>

<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>


<body class="zc-body">
  
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>
  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script>
</body>

</html>

.zc-body {
  background: #fff;
}

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}

const MAX = 150;
const GRAD = {
  stops: '0 0.4 0.5 0.6 0.7 1',
  colors: '#2B45B4 #5E37AE #B020AF #FF2D98 #FC840A',
};

let chartData = {
  flat: true,
  type: 'null',
  backgroundColor: '#fff',
  plotarea: {
    margin: '25 10 10 10',
  },
  shapes: [{
    type: 'zingchart.maps',
    options: {
      id: 'mapmain',
      name: 'fra',
      scale: true,
      zooming: false,
      panning: false,
      scrolling: false,
      style: {
        flat: true,
        controls: {
          visible: false,
        },
        borderAlpha: 0.1,
        borderColor: '#fff',
        label: {
          visible: false,
          overlap: false,
          text: '%long-text',
        },
        hoverState: {
          visible: false,
          backgroundColor: 'none',
          shadowAlpha: 0.2,
          shadowDistance: 2,
          shadow: true,
          shadowColor: '#333',
        },
      },
    },
  }, ],
  heatmap: {
    size: 5,
    blur: 15,
    alpha: 0.75,
    minValue: 0,
    maxValue: MAX,
    gradientStops: GRAD.stops,
    gradientColors: GRAD.colors,
  },
  colorScale: {
    aspect: 'gradient',
    gradientStops: GRAD.stops,
    gradientColors: GRAD.colors,
    backgroundColor: null,
    alpha: 0.75,
    height: '100px',
    minValue: 0,
    maxValue: MAX,
  },
};


let aData = [];

zingchart.bind('myChart', 'load', function() {
  window.setInterval(function() {
    let l, iIndex, fLon, fLat, iPop, aXY;
    let iMaxPoints = 2 * 256;

    if (aData.length === 0) {
      for (l = 0; l < iMaxPoints; l++) {
        iIndex = ZC._r_(0, FR_POP_2010.length - 1);
        fLon = FR_POP_2010[iIndex][0];
        fLat = FR_POP_2010[iIndex][1];
        iPop = FR_POP_2010[iIndex][2];
        aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
        aData.push([aXY[0], aXY[1], MAX * Math.random()]);
      }
    } else {
      for (l = aData.length - 1; l >= 0; l--) {
        aData[l][2] = Math.min(
          MAX,
          aData[l][2] - MAX / 19 + (MAX / 20) * Math.random()
        );
        if (aData[l][2] <= 0) {
          aData.splice(l, 1);
        }
      }
      for (l = 0; l < iMaxPoints - aData.length; l++) {
        iIndex = ZC._r_(0, FR_POP_2010.length - 1);
        fLon = FR_POP_2010[iIndex][0];
        fLat = FR_POP_2010[iIndex][1];
        iPop = FR_POP_2010[iIndex][2];
        aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
        aData.push([aXY[0], aXY[1], MAX * Math.random()]);
      }
    }
    zingchart.exec('myChart', 'heatmap.setdata', {
      data: aData,
    });

  }, 15);
});

zingchart.bind('myChart', 'heatmap.mousemove', function(oInfo) {
  if (oInfo.value !== null) {
    zingchart.exec(oInfo.id, 'colorscale.setvalue', {
      graphid: oInfo.graphid,
      value: oInfo.value,
    });
  } else {
    zingchart.exec(oInfo.id, 'colorscale.clear', {
      graphid: oInfo.graphid,
    });
  }
});

zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {
  zingchart.render({
    id: 'myChart',
    width: '100%',
    height: '100%',
    output: 'canvas',
    data: chartData,
    modules: 'heatmap,color-scale',
  });
});