Geomaps overview + Globe

Lat + Lon

by amrutaJgtp

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/index.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://www.highcharts.com/samples/static/jquery.combobox.js"></script>

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<div id="demo-wrapper">
    <div id="map-box">
        <div id="up"></div>
        <div class="selector">
            <button id="btn-prev-map" class="prev-next" aria-label="Previous map"><i class="fa fa-angle-left"></i></button>
            <!-- Note: jQuery UI combobox should be replaced with an accessible widget -->
            <select aria-label="Select a map to display" id="mapDropdown" class="ui-widget combobox"></select>
            <button id="btn-next-map" class="prev-next" aria-label="Next map"><i class="fa fa-angle-right"></i></button>
        </div>
        <div id="container"></div>
    </div>
    <div id="side-box">
        <input type="checkbox" id="chkDataLabels" checked='checked' />
        <label for="chkDataLabels">Data labels</label>
        <div id="info-box">
            <h4>This map</h4>
            <div id="download"></div>
        </div>
    </div>
</div>

CSS

#demo-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    height: 560px;
    background: white;
}

#map-box {
    width: 80%;
    float: left;
}

#container {
    height: 500px;
}

#side-box {
    float: right;
    width: 16%;
    margin: 100px 1% 0;
    padding-left: 1%;
    border-left: 1px solid silver;
    display: none;
}

#info-box {
    margin-top: 10px;
}

.or-view-as {
    margin: 0.5em 0;
}

#up {
    line-height: 30px;
    height: 30px;
    max-width: 400px;
    margin: 0 auto;
}

#up a {
    cursor: pointer;
    padding-left: 40px;
}

#chkDataLabels {
    display: inline;
}

.selector {
    height: 40px;
    max-width: 400px;
    margin: 0 auto;
    position: relative;
}

.selector .prev-next {
    position: absolute;
    padding: 0 10px;
    font-size: 30px;
    line-height: 20px;
    background: white;
    font-weight: bold;
    color: #999;
    top: -2px;
    display: none;
    border: none;
}

.selector .custom-combobox {
    display: block;
    position: absolute;
    left: 40px;
    right: 65px;
}

.selector .custom-combobox .custom-combobox-input {
    position: absolute;
    font-size: 14px;
    color: silver;
    border-radius: 3px 0 0 3px;
    height: 32px;
    display: block;
    background: url("https://www.highcharts.com/samples/graphics/search.png") 5px 8px no-repeat white;
    padding: 1px 5px 1px 30px;
    width: 100%;
    box-sizing: border-box;
}

.selector .custom-combobox .ui-autocomplete-input:focus {
    color: black;
}

.selector .custom-combobox .ui-autocomplete-input.valid {
    color: black;
}

.selector .custom-combobox-toggle {
    position: absolute;
    display: block;
    right: -32px;
    border-radius: 0 3px 3px 0;
    height: 32px;
    width: 32px;
}

.selector #btn-next-map {
    right: -12px;
}

.ui-autocomplete {
    max-height: 500px;
    overflow: auto;
}

.ui-autocomplete .option-header {
    font-style: italic;
    font-weight: bold;
    margin: 5px 0;
    font-size: 1.2em;
    color: gray;
}

.loading {
 ...

JavaScript

/**
 * This is a complicated demo of Highcharts Maps, not intended to get you up to
 * speed quickly, but to show off some basic maps and features in one single
 * place. For the basic demo, check out
 * https://www.highcharts.com/maps/demo/geojson instead.
 *
 * @todo
 * - Remove jQuery where not necessary
 */

// Base path to maps
const baseMapPath = 'https://code.highcharts.com/mapdata/';

let showDataLabels = false, // Switch for data labels enabled/disabled
  mapCount = 0,
  mapOptions = '';

// Populate dropdown menus and turn into jQuery UI widgets
$.each(Highcharts.mapDataIndex, (mapGroup, maps) => {
  if (mapGroup !== 'version') {
    mapOptions += `<option class="option-header">${mapGroup}</option>`;
    $.each(maps, (desc, path) => {
      mapOptions += `<option value="${path}">${desc}</option>`;
      mapCount += 1;
    });
  }
});
const searchText = `Search ${mapCount} maps`;
mapOptions =
  `<option value="custom/world.js">${searchText}</option>${mapOptions}`;
$('#mapDropdown').append(mapOptions).combobox();

// Change map when item selected in dropdown
$('#mapDropdown').on('change', async function() {
  const $selectedItem = $('option:selected', this),
    mapDesc = $selectedItem.text(),
    mapKey = this.value.slice(0, -3),
    svgPath = baseMapPath + mapKey + '.svg',
    geojsonPath = baseMapPath + mapKey + '.geo.json',
    topojsonPath = baseMapPath + mapKey + '.topo.json',
    javascriptPath = baseMapPath + this.value,
    isHeader = $selectedItem.hasClass('option-header');

  // Dim or highlight search box
  if (mapDesc === searchText || isHeader) {
    $('.custom-combobox-input').removeClass('valid');
    location.hash = '';
  } else {
    $('.custom-combobox-input').addClass('valid');
    location.hash = mapKey;
  }

  if (isHeader) {
    return false;
  }

  // Show loading
  if (Highcharts.charts[0]) {
    Highcharts.charts[0].showLoading(
      '<i class="fa fa-spinner fa-spin fa-2x"></i>'
    );
  }

  // Load the map
  let filesize =...