USA MAP

by amrutaJgtp

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

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

<div class="main container-fluid">
    <h1>Highcharts Projection Explorer</h1>

    <div class="row">
        <div class="col-lg-8">
            <div id="container"></div>

            <hr>

            <div id="projection-buttons" class="buttons row">
                <div class="col-12">
                    <h4 class="mt-4">Projections</h4>
                    <div class="btn-group">
                        <button id="equalearth" class="btn btn-outline-secondary"
                            data-panels="rotation-panel">Equal Earth</button>
                        <button id="miller" class="btn btn-outline-secondary"
                            data-panels="rotation-panel">Miller</button>
                        <button id="webmerc" class="btn btn-outline-secondary"
                            data-panels="rotation-panel">Web Mercator</button>
                        <button id="ortho" class="btn btn-outline-secondary"
                            data-panels="rotation-panel,rotation-preset-panel"
                            >Ortographic</button>
                        <button id="lcc" class="btn btn-outline-secondary"
                            data-panels="rotation-panel,parallels-panel,small-world-panel"
                            >LCC</button>
                        <button id="eqc" class="btn btn-outline-secondary"
                            data-panels="rotation-panel">None</button>
                    </div>
                </div>

                <div class="col-md-6 mt-4 toggle-panel" id="rotation-panel">
                    <h4>Rotation</h4>

                    <label>
                        <input class="rotation"...

CSS

.main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}

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

.main #small-world-container {
    max-width: 150px;
    margin-top: 1rem;
    min-width: 75px;
    height: 150px;
}

.main h1 {
    font-size: 1.5rem !important;
}

.main .mt-4 {
    margin-top: 1.5rem !important;
    min-width: 25%;
}

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

.main .btn-group {
    flex-wrap: wrap;
}

.main .btn {
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    margin: 0.1rem 0;
}

#descriptions div {
    display: none;
}

JavaScript

(async () => {

    // Get random data for this sample
    function getRandomData(topology) {
        return topology.objects.default.geometries.map(() =>
            Math.round(Math.random() * 100));
    }

    const topology = await fetch(
        'https://code.highcharts.com/mapdata/countries/us/us-all.topo.json'
    ).then(response => response.json());

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

    const data = getRandomData(topology);

    // Get geometries for parallels
    function getParallelsGeometries(parallels) {
        return parallels.map(lat => {
            const coordinates = [];
            for (let lon = -180; lon <= 180; lon += 5) {
                coordinates.push([lon, lat]);
            }
            return {
                geometry: {
                    type: 'LineString',
                    coordinates
                },
                color: "green",
                lineWidth: lat === 0 ? 2 : undefined
            };
        });
    }

    function getGraticule() {
        const data = [];

        // Meridians
        for (let x = -180; x <= 180; x += 15) {
            data.push({
            color: "yellow",
                geometry: {
                    type: 'LineString',
                    
                    coordinates: x % 90 === 0 ? [
                        [x, -90],
                        [x, 0],
                        [x, 90]
                    ] : [
                        [x, -80],
                        [x, 80]
                    ]
                }
            });
        }

        // Parallels
        const parallels = [];
        for (let y = -90; y <= 90; y += 10) {
            parallels.push(y);
        }
        data.push(...getParallelsGeometries(parallels));

        return data;
    }

    let chart, smallChart;

    const drawMap = projectionKey => {

        // Apply projection
        const...