JSFiddle - React, Tailwind, and code Playground

by Yurii Shpylovyi

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">
  <div id="map"></div>

CSS

#map {
            width: 100%;
            height: 600px;
        }

JavaScript

// Initialize the OpenStreetMap layer
var osmLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
});

// Sample data: array of objects with country lat, lng, and number of calls
var countryData = [
    { country: 'Indonesia', lat: -0.7893, lng: 113.9213, calls: 64 },
    { country: 'United States', lat: 37.0902, lng: -95.7129, calls: 51 },
    { country: 'India', lat: 20.5937, lng: 78.9629, calls: 45 },
    { country: 'Poland', lat: 51.9194, lng: 19.1451, calls: 35 },
    { country: 'Egypt', lat: 26.8206, lng: 30.8025, calls: 31 },
    { country: 'Germany', lat: 51.1657, lng: 10.4515, calls: 26 },
    { country: 'Türkiye', lat: 38.9637, lng: 35.2433, calls: 26 },
    { country: 'Italy', lat: 41.8719, lng: 12.5674, calls: 25 },
    { country: 'Ukraine', lat: 48.3794, lng: 31.1656, calls: 23 },
    { country: 'Romania', lat: 45.9432, lng: 24.9668, calls: 22 },
    { country: 'Thailand', lat: 15.8700, lng: 100.9925, calls: 19 },
    { country: 'Israel', lat: 31.0461, lng: 34.8516, calls: 19 },
    { country: 'Brazil', lat: -14.2350, lng: -51.9253, calls: 19 },
    { country: 'France', lat: 46.6034, lng: 1.8883, calls: 18 },
    { country: 'South Korea', lat: 35.9078, lng: 127.7669, calls: 13 },
    { country: 'The Netherlands', lat: 52.1326, lng: 5.2913, calls: 12 },
    { country: 'Spain', lat: 40.4637, lng: -3.7492, calls: 10 },
    { country: 'United Kingdom', lat: 55.3781, lng: -3.4360, calls: 10 },
    { country: 'Belgium', lat: 50.8503, lng: 4.3517, calls: 10 },
    { country: 'Slovakia', lat: 48.6690, lng: 19.6990, calls: 9 },
    { country: 'Iraq', lat: 33.2232, lng: 43.6793, calls: 8 },
    { country: 'Singapore', lat: 1.3521, lng: 103.8198, calls: 8 },
    { country: 'Russia', lat: 61.5240, lng: 105.3188, calls: 8 },
    { country: 'Greece', lat: 39.0742, lng: 21.8243, calls: 8 },
    { country: 'Malaysia', lat: 4.2105, lng: 101.9758, calls: 8 },
    { country: 'Saudi Arabia', lat: 23.8859, lng: 45.0792, calls: 8 },
    { country: 'Philippines',...