Highmaps

TopoJSON + globe(orthographic)

by amrutaJgtp

HTML

<script src="https://code.highcharts.com/maps/10.1.0/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/10.1.0/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/10.1.0/modules/exporting.js"></script>


<div id="container"></div>

<button id="getselectedpoints" disabled>Get selected points</button>

CSS

#container {
    height: 500px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}

.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

(async () => {

  const topology = await fetch(
    'https://code.highcharts.com/mapdata/custom/world.topo.json'
  ).then(response => response.json());

  Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/world-population-density.json', function(data) {
    Highcharts.mapChart('container', {
      "chart": {
        "inverted": false,
        "backgroundColor": "rgba(255,255,255,0)",
        "plotBackgroundColor": "rgba(255,255,255,0)",
        "zoomType": null,
        "resetZoomButton": {
          "theme": {
            "style": {
              "visibility": "hidden"
            }
          }
        },
        "spacingBottom": 5,
        "spacingTop": 10,
        "map": "world",
        "animation": false
      },
      "title": {
        "text": ".",
        "style": {
          "color": "rgba(255, 255, 255, 0)",
          "fontSize": "1px"
        },
        "floating": true,
        "margin": 0
      },
      "tooltip": {
        "enabled": true,
        "borderWidth": 1,
        "borderRadius": 1,
        "backgroundColor": "#ffffff",
        "style": {
          "color": "#000000",
          "fontSize": "1rem",
          "fontFamily": "Open Sans",
          "fontWeight": "normal",
          "fontStyle": "normal",
          "textDecoration": "none"
        },
        "useHTML": true,
        "shared": false,
        "crosshairs": [null, null]
      },
      "plotOptions": {
        "series": {
          "animation": {
            "duration": 700
          },
          "cursor": "pointer",
          "allowPointSelect": true,
          "showInLegend": true,
          "turboThreshold": 0,
          "stickyTracking": true,
          "events": {},
          "point": {
            "events": {}
          },
          "borderColor": "rgba(192,192,192,1)"
        }
      },
      "legend": {
        "enabled": true,
        "item": {},
        "borderWidth": 0,
        "layout": "horizontal",
        "eQLegendPlacement":...