ALASKA/HAWAII

<!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"];
    var myConfig = {
      "graphset": [{
        "shapes": [{
            "type": "zingchart.maps",
            "options": {
              "name": "usa",
              "style": {
                "label": {
                  "visible": false
                },
                "items": {
                  "CA": {
                    "background-color": "#9e9e9e"
                  }
                }
              }
            }
          },
          {
            "type": "circle",
            "id": "sd", // id is OPTIONAL
            "x": "-117.1611lon", // hook shape based on lon/lat
            "y": "32.7157lat", // hook shape based on lon/lat
            "map": "usa", // assigning to map name or id is necessary
            "size": 15,
            "background-color": '#4dd0e1',
            "cursor": "pointer",
            "url": "https://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy",
            "target": "_blank",
            "tooltip": {
              "backgroundColor": "#ff9800",
              "borderColor": "#333",
              "borderRadius": 4,
              "fontSize": 16,
              "text": "We're located right in San Diego!"
            }
          },
          {
            "type": "circle",
            "id": "hawaii",

            "x": "-159.579lon",
            "y": "22.216lat",

            "map": "usa",
            "item": "HI", // <----- this is needed

            "size": 5,
            "background-color": "#4dd0e1",
            "cursor": "pointer",
            "url": "https://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy",
            "target": "_blank",
            "tooltip": {
              "backgroundColor": "#ff9800",
              "borderColor": "#333",
              "borderRadius": 4,
              "fontSize": 16,
              "text": "We're located right in Hawaii!"
            }
          },
          {
            "type": "circle",
            "id": "alaska", // id is OPTIONAL
            "x": "-149.4937lon", // hook shape based on lon/lat
            "y": "64.2008lat", // hook shape based on lon/lat
            "map": "usa", // assigning to map name or id is necessary
            "item": "AK",
            "size": 15,
            "background-color": '#4dd0e1',
            "cursor": "pointer",
            "url": "https://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy",
            "target": "_blank",
            "tooltip": {
              "backgroundColor": "#ff9800",
              "borderColor": "#333",
              "borderRadius": 4,
              "fontSize": 16,
              "text": "We're located right in Alaska!"
            }
          },
        ]
      }]
    };

    zingchart.loadModules('maps, maps-usa', function() {
      zingchart.render({
        id: 'myChart',
        data: myConfig,
        height: '100%',
        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"><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;
}

var myConfig = {
  "graphset": [{
    "shapes": [{
        "type": "zingchart.maps",
        "options": {
          "name": "usa",
          "style": {
            "label": {
              "visible": false
            },
            "items": {
              "CA": {
                "background-color": "#9e9e9e"
              }
            }
          }
        }
      },
      {
        "type": "circle",
        "id": "sd", // id is OPTIONAL
        "x": "-117.1611lon", // hook shape based on lon/lat
        "y": "32.7157lat", // hook shape based on lon/lat
        "map": "usa", // assigning to map name or id is necessary
        "size": 15,
        "background-color": '#4dd0e1',
        "cursor": "pointer",
        "url": "https://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy",
        "target": "_blank",
        "tooltip": {
          "backgroundColor": "#ff9800",
          "borderColor": "#333",
          "borderRadius": 4,
          "fontSize": 16,
          "text": "We're located right in San Diego!"
        }
      },
      {
        "type": "circle",
        "id": "hawaii",

        "x": "-159.579lon",
        "y": "22.216lat",

        "map": "usa",
        "item": "HI", // <----- this is needed

        "size": 5,
        "background-color": "#4dd0e1",
        "cursor": "pointer",
        "url": "https://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy",
        "target": "_blank",
        "tooltip": {
          "backgroundColor": "#ff9800",
          "borderColor": "#333",
          "borderRadius": 4,
          "fontSize": 16,
          "text": "We're located right in Hawaii!"
        }
      },
      {
        "type": "circle",
        "id": "alaska", // id is OPTIONAL
        "x": "-149.4937lon", // hook shape based on lon/lat
        "y": "64.2008lat", // hook shape based on lon/lat
        "map": "usa", // assigning to map name or id is necessary
        "item": "AK",
        "size": 15,
        "background-color": '#4dd0e1',
        "cursor": "pointer",
        "url": "https://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy",
        "target": "_blank",
        "tooltip": {
          "backgroundColor": "#ff9800",
          "borderColor": "#333",
          "borderRadius": 4,
          "fontSize": 16,
          "text": "We're located right in Alaska!"
        }
      },
    ]
  }]
};

zingchart.loadModules('maps, maps-usa', function() {
  zingchart.render({
    id: 'myChart',
    data: myConfig,
    height: '100%',
    width: '100%'
  });
});