Zoomable World Map

This interactive world map is rendered within the browser using SVG.

View source

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/piximaps.min.css">
    <script src="js/piximaps.min.js"></script>
    <style>
      #chart { width: 540px; height: 540px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); }
      .pixi .charttitle .subtitle { font-size: 0.9em; font-style: italic; text-anchor: start }
    </style>
    <script>
      window.addEventListener('load', () => {
        'use strict';

        // Set the map attributes:
        const map = {
          type: 'geojson',
          url: '/maps/ne_110m_admin_0_countries',
          exclude: { SOVEREIGNT: 'Antarctica' },
          coordinates: [48, 0],
          zoom: 1.5,
          minZoom: 0.5,
          maxZoom: 5,
        };

        // Define the chart settings:
        const opts = {
          chart: {
            width: window.innerWidth < (540 * 0.8) ? (window.innerWidth * 0.8) : 540,
            height: window.innerHeight < 540 ? window.innerHeight : 540,
          },
          title: { label: 'World Map' },
          footer: { label: 'Without Antartica.', x: 3, y: 0 },
          legend: { enabled: false },
        };

        // Define the overlays:
        // A world map is a collection of coutries. So, there is no need to specify
        // the geometry of the country overlays to draw above the map. A country overlay
        // becomes visible on an update (see below).
        const countries = [
          {'AFG-AF':{title: 'Afghanistan', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'652,864 km²'}}},
          {'AGO-AO':{title: 'Angola', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'1,246,700 km²'}}},
          {'ALB-AL':{title: 'Albania', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'28,748 km²'}}},
          {'ARE-AE':{title: 'United Arab Emirates', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'83,600 km²'}}},
          {'ARG-AR':{title: 'Argentina', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'2,780,400 km²'}}},
          {'ARM-ARM':{title: 'Armenia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'29,743 km²'}}},
          {'ATF-TF':{title: 'Fr. S. Antarctic Lands', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'439,781 km²'}}},
          {'AUS-AU':{title: 'Australia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'7,692,024 km²'}}},
          {'AUT-A':{title: 'Austria', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'83,879 km²'}}},
          {'AZE-AZ':{title: 'Azerbaijan', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'86,600 km²'}}},
          {'BDI-BI':{title: 'Burundi', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'27,834 km²'}}},
          {'BEL-B':{title: 'Belgium', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'30,528 km²'}}},
          {'BEN-BJ':{title: 'Benin', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'114,763 km²'}}},
          {'BFA-BF':{title: 'Burkina Faso', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'274,200 km²'}}},
          {'BGD-BD':{title: 'Bangladesh', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'147,570 km²'}}},
          {'BGR-BG':{title: 'Bulgaria', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'110,994 km²'}}},
          {'BHS-BS':{title: 'Bahamas', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'13,878 km²'}}},
          {'BIH-BiH':{title: 'Bosnia and Herz.', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'51,197 km²'}}},
          {'BLR-BY':{title: 'Belarus', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'207,595 km²'}}},
          {'BLZ-BZ':{title: 'Belize', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'22,966 km²'}}},
          {'BOL-BO':{title: 'Bolivia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'1,098,581 km²'}}},
          {'BRA-BR':{title: 'Brazil', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'8,515,767 km²'}}},
          {'BRN-BN':{title: 'Brunei', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'5,765 km²'}}},
          {'BTN-BT':{title: 'Bhutan', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'38,394 km²'}}},
          {'BWA-BW':{title: 'Botswana', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'581,730 km²'}}},
          {'CAF-CF':{title: 'Central African Rep.', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'622,984 km²'}}},
          {'CAN-CA':{title: 'Canada', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'9,984,670 km²'}}},
          {'CHE-CH':{title: 'Switzerland', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'41,285 km²'}}},
          {'CHL-CL':{title: 'Chile', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'756,096 km²'}}},
          {'CHN-CN':{title: 'China', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'9,596,961 km²'}}},
          {'CIV-CI':{title: 'Côte d\'Ivoire', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'322,463 km²'}}},
          {'CMR-CM':{title: 'Cameroon', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'475,442 km²'}}},
          {'COD-DRC':{title: 'Dem. Rep. Congo', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'2,345,409 km²'}}},
          {'COG-CG':{title: 'Congo', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'342,000 km²'}}},
          {'COL-CO':{title: 'Colombia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'1,141,748 km²'}}},
          {'CRI-CR':{title: 'Costa Rica', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'51,100 km²'}}},
          {'CUB-CU':{title: 'Cuba', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'109,884 km²'}}},
          {'CYN-CN':{title: 'N. Cyprus', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'3,355 km²'}}},
          {'CYP-CY':{title: 'Cyprus', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'9,251 km²'}}},
          {'CZE-CZ':{title: 'Czech Rep.', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'78,866 km²'}}},
          {'DEU-D':{title: 'Germany', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'357,168 km²'}}},
          {'DJI-DJ':{title: 'Djibouti', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'23,200 km²'}}},
          {'DNK-DK':{title: 'Denmark', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'42,915 km²'}}},
          {'DOM-DO':{title: 'Dominican Rep.', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'48,442 km²'}}},
          {'DZA-DZ':{title: 'Algeria', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'2,381,741 km²'}}},
          {'ECU-EC':{title: 'Ecuador', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'283,560 km²'}}},
          {'EGY-EG':{title: 'Egypt', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'1,002,450 km²'}}},
          {'ERI-ER':{title: 'Eritrea', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'117,600 km²'}}},
          {'ESP-E':{title: 'Spain', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'504,645 km²'}}},
          {'EST-EST':{title: 'Estonia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'45,227 km²'}}},
          {'ETH-ET':{title: 'Ethiopia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'1,104,300 km²'}}},
          {'FIN-FIN':{title: 'Finland', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'338,424 km²'}}},
          {'FJI-FJ':{title: 'Fiji', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'18,274 km²'}}},
          {'FLK-FK':{title: 'Falkland Is.', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'12,200 km²'}}},
          {'FRA-F':{title: 'France', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'640,679 km²'}}},
          {'GAB-GA':{title: 'Gabon', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'267,667 km²'}}},
          {'GBR-GB':{title: 'United Kingdom', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'243,610 km²'}}},
          {'GEO-GE':{title: 'Georgia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'69,700 km²'}}},
          {'GHA-GH':{title: 'Ghana', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'238,535 km²'}}},
          {'GIN-GN':{title: 'Guinea', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'245,836 km²'}}},
          {'GMB-GM':{title: 'Gambia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'10,689 km²'}}},
          {'GNB-GW':{title: 'Guinea-Bissau', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'36,125 km²'}}},
          {'GNQ-GQ':{title: 'Eq. Guinea', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'245,836 km²'}}},
          {'GRC-GR':{title: 'Greece', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'131,957 km²'}}},
          {'GRL-GL':{title: 'Greenland', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'2,166,086 km²'}}},
          {'GTM-GT':{title: 'Guatemala', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'108,889 km²'}}},
          {'GUY-GY':{title: 'Guyana', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'214,970 km²'}}},
          {'HND-HN':{title: 'Honduras', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'112,492 km²'}}},
          {'HRV-HR':{title: 'Croatia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'56,594 km²'}}},
          {'HTI-HT':{title: 'Haiti', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'27,750 km²'}}},
          {'HUN-HU':{title: 'Hungary', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'93,030 km²'}}},
          {'IDN-INDO':{title: 'Indonesia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'1,904,569 km²'}}},
          {'IND-IND':{title: 'India', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'3,287,590 km²'}}},
          {'IRL-IRL':{title: 'Ireland', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'84,421 km²'}}},
          {'IRN-IRN':{title: 'Iran', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'1,648,195 km²'}}},
          {'IRQ-IRQ':{title: 'Iraq', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'437,072 km²'}}},
          {'ISL-IS':{title: 'Iceland', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'102,775 km²'}}},
          {'ISR-IS':{title: 'Israel', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'20,770 km²'}}},
          {'ITA-I':{title: 'Italy', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'301,338 km²'}}},
          {'JAM-J':{title: 'Jamaica', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'10,991 km²'}}},
          {'JOR-J':{title: 'Jordan', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'89,342 km²'}}},
          {'JPN-J':{title: 'Japan', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'377,944 km²'}}},
          {'KAZ-KZ':{title: 'Kazakhstan', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'2,724,900 km²'}}},
          {'KEN-KE':{title: 'Kenya', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'581,309 km²'}}},
          {'KGZ-KG':{title: 'Kyrgyzstan', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'199,951 km²'}}},
          {'KHM-KH':{title: 'Cambodia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'181,035 km²'}}},
          {'KOR-KR':{title: 'Korea', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'219,140 km²'}}},
          {'KOS-KO':{title: 'Kosovo', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'10,908 km²'}}},
          {'KWT-KW':{title: 'Kuwait', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'17,820 km²'}}},
          {'LAO-LA':{title: 'Lao PDR', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'236,800 km²'}}},
          {'LBN-LB':{title: 'Lebanon', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'10,452 km²'}}},
          {'LBR-LR':{title: 'Liberia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'111,369 km²'}}},
          {'LBY-LY':{title: 'Libya', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'1,759,541 km²'}}},
          {'LKA-LK':{title: 'Sri Lanka', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'65,610 km²'}}},
          {'LSO-LS':{title: 'Lesotho', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'30,355 km²'}}},
          {'LTU-LT':{title: 'Lithuania', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'65,300 km²'}}},
          {'LUX-L':{title: 'Luxembourg', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'2,586 km²'}}},
          {'LVA-LV':{title: 'Latvia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'64,589 km²'}}},
          {'MAR-MA':{title: 'Morocco', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'446 550 km²'}}},
          {'MDA-MD':{title: 'Moldova', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'33,846 km²'}}},
          {'MDG-MG':{title: 'Madagascar', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'587,041 km²'}}},
          {'MEX-MX':{title: 'Mexico', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'1,972,550 km²'}}},
          {'MKD-MK':{title: 'Macedonia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'25,713 km²'}}},
          {'MLI-ML':{title: 'Mali', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'1,240,192 km²'}}},
          {'MMR-MM':{title: 'Myanmar', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'676,578 km²'}}},
          {'MNE-ME':{title: 'Montenegro', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'13,812 km²'}}},
          {'MNG-MN':{title: 'Mongolia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'1,564,116 km²'}}},
          {'MOZ-MZ':{title: 'Mozambique', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'801,590 km²'}}},
          {'MRT-MR':{title: 'Mauritania', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'1,030,700 km²'}}},
          {'MWI-MW':{title: 'Malawi', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'118,484 km²'}}},
          {'MYS-MY':{title: 'Malaysia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'329,847 km²'}}},
          {'NAM-NA':{title: 'Namibia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'825,615 km²'}}},
          {'NCL-NC':{title: 'New Caledonia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'18,576 km²'}}},
          {'NER-NE':{title: 'Niger', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'1,267,000 km²'}}},
          {'NGA-NG':{title: 'Nigeria', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'923,768 km²'}}},
          {'NIC-NI':{title: 'Nicaragua', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'130,375 km²'}}},
          {'NLD-NL':{title: 'Netherlands', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'41,543 km²'}}},
          {'NOR-N':{title: 'Norway', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'385,178 km²'}}},
          {'NPL-NP':{title: 'Nepal', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'147,181 km²'}}},
          {'NZL-NZ':{title: 'New Zealand', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'268,021 km²'}}},
          {'OMN-OM':{title: 'Oman', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'309,501 km²'}}},
          {'PAK-PK':{title: 'Pakistan', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'803,940 km²'}}},
          {'PAN-PA':{title: 'Panama', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'75,517 km²'}}},
          {'PER-PE':{title: 'Peru', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'1,285,216 km²'}}},
          {'PHL-PH':{title: 'Philippines', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'300,000 km²'}}},
          {'PNG-PG':{title: 'Papua New Guinea', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'462,840 km²'}}},
          {'POL-PL':{title: 'Poland', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'312,679 km²'}}},
          {'PRI-PR':{title: 'Puerto Rico', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'9,104 km²'}}},
          {'PRK-KP':{title: 'Dem. Rep. Korea', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'120,540 km²'}}},
          {'PRT-P':{title: 'Portugal', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'92,212 km²'}}},
          {'PRY-PY':{title: 'Paraguay', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'406,752 km²'}}},
          {'PSX-PAL':{title: 'Palestine', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'6,220 km²'}}},
          {'QAT-QA':{title: 'Qatar', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'11,571 km²'}}},
          {'ROU-RO':{title: 'Romania', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'238,391 km²'}}},
          {'RUS-RUS':{title: 'Russia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'17,098,242 km²'}}},
          {'RWA-RW':{title: 'Rwanda', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'26,338 km²'}}},
          {'SAH-WS':{title: 'W. Sahara', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'266,000 km²'}}},
          {'SAU-SA':{title: 'Saudi Arabia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'2,149,690 km²'}}},
          {'SDN-SD':{title: 'Sudan', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'1,886,068 km²'}}},
          {'SDS-SS':{title: 'S. Sudan', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'619,745 km²'}}},
          {'SEN-SN':{title: 'Senegal', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'196,712 km²'}}},
          {'SLB-SB':{title: 'Solomon Is.', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'28,400 km²'}}},
          {'SLE-SL':{title: 'Sierra Leone', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'71,740 km²'}}},
          {'SLV-SV':{title: 'El Salvador', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'21,045 km²'}}},
          {'SOL-SL':{title: 'Somaliland', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'137,600 km²'}}},
          {'SOM-SO':{title: 'Somalia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'637,657 km²'}}},
          {'SRB-RS':{title: 'Serbia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'88,361 km²'}}},
          {'SUR-SR':{title: 'Suriname', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'163,821 km²'}}},
          {'SVK-SK':{title: 'Slovakia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'49,035 km²'}}},
          {'SVN-SLO':{title: 'Slovenia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'20,273 km²'}}},
          {'SWE-S':{title: 'Sweden', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'450,295 km²'}}},
          {'SWZ-SW':{title: 'Swaziland', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'17,364 km²'}}},
          {'SYR-SYR':{title: 'Syria', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'185,180 km²'}}},
          {'TCD-TD':{title: 'Chad', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'1,284,000 km²'}}},
          {'TGO-TG':{title: 'Togo', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'56,785 km²'}}},
          {'THA-TH':{title: 'Thailand', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'513,120 km²'}}},
          {'TJK-TJ':{title: 'Tajikistan', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'143,100 km²'}}},
          {'TKM-TM':{title: 'Turkmenistan', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'491,210 km²'}}},
          {'TLS-TL':{title: 'Timor-Leste', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'15,007 km²'}}},
          {'TTO-TT':{title: 'Trinidad and Tobago', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'5,131 km²'}}},
          {'TUN-TN':{title: 'Tunisia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'163,610 km²'}}},
          {'TUR-TR':{title: 'Turkey', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'783,562 km²'}}},
          {'TWN-TW':{title: 'Taiwan', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'36,193 km²'}}},
          {'TZA-TZ':{title: 'Tanzania', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'947,303 km²'}}},
          {'UGA-UG':{title: 'Uganda', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'241,038 km²'}}},
          {'UKR-UA':{title: 'Ukraine', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'603,500 km²'}}},
          {'URY-UY':{title: 'Uruguay', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'176,215 km²'}}},
          {'USA-US':{title: 'United States', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'9,147,593 km²'}}},
          {'UZB-UZ':{title: 'Uzbekistan', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'448 978 km²'}}},
          {'VEN-VE':{title: 'Venezuela', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'916,445 km²'}}},
          {'VNM-VN':{title: 'Vietnam', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'332,698 km²'}}},
          {'VUT-VU':{title: 'Vanuatu', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'12,190 km²'}}},
          {'YEM-YE':{title: 'Yemen', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'527,829 km²'}}},
          {'ZAF-ZA':{title: 'South Africa', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'1,221,037 km²'}}},
          {'ZMB-ZM':{title: 'Zambia', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'752,618 km²'}}},
          {'ZWE-ZW':{title: 'Zimbabwe', style: {fillColor: '#2196F3', fillOpacity: 0.75}, over: {fillOpacity: 1}, properties:{'Area':'390,757 km²'}}},
        ];

        // Fix the chart dimensions:
        const el = document.getElementById('chart');
        el.style.width = opts.chart.width + 'px';
        el.style.height = opts.chart.height + 'px';

        // Draw the chart:
        const chart = Pixi.Map('#chart', map, opts);
        chart.overlayUpdate(countries);
      });
    </script>
  </head>
  <body>
    <div id="chart" class="pixi"></div>
  </body>
</html>

Methods

Map Methods

Name Return Description
.Map (id, map, series, options) this Creates, draws and returns the map object.
.moveTo (id, zoom) this Moves the map to get the overlay at the center of the chart (if the zoom parameter is omitted, the map doesn't scale; if the zoom is 'auto', the map is scaled to best fit).
.moveTo ([φ, λ], zoom) this Moves the map to get these coordinates at the center of the chart (if the zoom parameter is omitted, the map doesn't scale; if the zoom is 'auto', the map is scaled to best fit).

Overlay Methods

Name Return Description
.overlayAppend (overlays) this Appends one or more overlays.
.overlayUpdate (overlays) this Updates one or more overlays.
.overlayRemove ([ids]) this Removes one or more overlays.
.overlayDelete () this Removes all the overlays.
.overlayBlink ([ids]) this Starts one or more overlays.
.overlayUnblink ([ids]) this Stops one or more overlays.
.overlaySetVisible ([ids]) this Sets one or more overlays, identified by their id, visible.
.overlaySetInvisible ([ids]) this Sets one or more overlays, identified by their id, invisible.
.overlayAttachTooltip (id, xmlString, width, height) this Attachs a user defined tooltip to a given overlay. The user defined HTML5 tooltip is included in a SVG foreignObject element.

Event Methods

Name Return Description
.addEventListener (type, listener) this Registers the specified listener on the EventTarget it's called on.
.addOneTimeEventListener (type, listener) this Registers the specified listener on the EventTarget it's called on for a one-time event.
.removeEventListener (type, listener) this Removes the event listener previously registered with addEventListener ().
.on (type, listener) this Alias on addEventListener ().
.one (type, listener) this Alias on addOneTimeEventListener ().
.off (type, listener) this Alias on removeEventListener ().

Event Types

Attribute Type Object Info
'overlayover' String OverEvent Fired when the mouse enters on the overlay.
'overlayout' String OverEvent Fired when the mouse leaves the overlay.
'click' String ClickEvent Fired when the mouse clicks the overlay.
'dblclick' String ClickEvent Fired when the mouse double clicks the overlay.

Event Objects

OverEvent
Attribute Type Info
id String The id of the SVG element that fired the event.
title String The title of this SVG element.
style Object The style applied to this SVG element. See the section 'Series Options' for the detail of the style attributes.
properties Object/Array The data displayed by the tooltip when the mouse goes over or leaves this SVG element.
geometry Object The geometry of this SVG element.
ClickEvent
Attribute Type Info
overlay Object The OverEvent object of the (double) clicked overlay.
cursor Array The relative position of the point (double) clicked on the chart ([x, y]).

Map Attributes

map is an object with the following attributes:

Attribute Type Default Info
url String The url of the map file.
origin Object The position of the map against the grid.
origin.x Number 0 On x axis.
origin.y Number 0 On y axis.
zoom Number 1 The zoom attribute.
maxZoom Number 20 The maximum zoom level.
minZoom Number 0.1 The minimum zoom level.
draggable Boolean true Authorizes (true) or prevents (false) the map from being dragged.
scrollwheel Boolean true Enables (true) or disables (false) scrollwheel zooming on the map.
keypad Boolean true Enables (true) or disables (false) the keypad.

If the map object is undefined, the following default map object is processed: 

map = { url: '../maps/worldmap.json', origin: { x: 0, y: 50 }, scale: 1 };

Series Options

The series are specified in an array of objects. The serie object has the following attributes:

Attribute Type Default Info
title String undefined The title of the serie.
style Object undefined The style to apply to the SVG elements that belong to the serie. By default, the css style is applied.
style.fillColor String undefined The fill color attribute.
style.fillOpacity Number undefined The color opacity attribute.
style.strokeColor String undefined The stroke color attribute.
style.strokeOpacity Number undefined The stroke color opacity attribute.
style.strokeWidth Number undefined The stroke width attribute.

Chart Options

Attribute Type Default Info
chart Object The chart attributes.
chart.type String map The type of map (currently, 'map' is the only option).
chart.width Number 600 The outer width of the chart.
chart.height Number 420 The outer height of the chart.
chart.grid Object The position and the size of the inner box.
chart.grid.x Number - The inner box origin on the x axis.
chart.grid.y Number - The inner box origin on the y axis.
chart.grid.width Number - The inner box width.
chart.grid.height Number - The inner box height.
chart.grid.margin Object The inner box margins.
chart.grid.margin.top Number 0 The inner box top margin.
chart.grid.margin.left Number 0 The inner box left margin.
chart.grid.margin.right Number 0 The inner box right margin.
chart.grid.margin.bottom Number 0 The inner box bottom margin.
title Object The title attributes.
title.label String The title text.
title.x Number - The horizontal anchor position of the title.
title.y Number - The vertical anchor position of the title.
subtitle Object The subtitle attributes.
subtitle.label String The subtitle text.
subtitle.x Number - The horizontal anchor position of the title.
subtitle.y Number - The vertical anchor position of the title.
legend Object The legend attributes.
legend.enabled Boolean true Enables or disables the legend.
legend.floating Boolean true Enables or not the legend to float above the map.
legend.layout String vertical The legend could be horizontal or vertical.
legend.align Object The legend position on the grid.
legend.align.horizontal String right The legend position on x axis could be: left, right or middle
legend.align.vertical String top The legend position on y axis could be: top, bottom or middle
legend.shift Object The shift position of the legend on the grid.
legend.shift.x Number 0 Moves slightly the legend on the x direction.
legend.shift.y Number 0 Moves slightly the legend on the y direction.
legend.icon Object The icon rectangle size.
legend.icon.width Number 10 The icon rectangle width.
legend.icon.height Number 10 The icon rectangle height.
tooltip Object The tooltip attributes.
tooltip.enabled Boolean true Enables (true) or disables (false) the tooltip.
tooltip.animated Boolean true smoothly moves (true) or not (false) the tooltip from previous item to current.

- means a computed value.

Overlay Attributes

The overlays are specified in an object. The overlays object has the following attributes:

Attribute Type Default Info
'id' String or Number The overlay Id.
'id'.title String undefined The name of the overlay.
'id'.style Object undefined The style applied to the overlay. By default, the css style is applied.
'id'.style.fillColor String undefined The color of the overlay.
'id'.style.fillOpacity String undefined The opacity of the overlay.
'id'.style.strokeColor String undefined The color of the overlay stroke.
'id'.style.strokeOpacity String undefined The opacity of the overlay stroke.
'id'.style.strokeWidth Number undefined The width of the overlay stroke.
'id'.over Object undefined The style to apply to the SVG elements that belong to the serie when the mouse is over the element. By default, the css style is applied.
'id'.over.fillColor String undefined The fill color attribute.
'id'.over.fillOpacity Number undefined The color opacity attribute.
'id'.over.strokeColor String undefined The stroke color attribute.
'id'.over.strokeOpacity Number undefined The stroke color opacity attribute.
'id'.over.strokeWidth Number undefined The stroke width attribute.
'id'.properties Object/Array null A set of data displayed by the tooltip when the mouse goes over the overlay.
'id'.properties[n] String ' ' If properties is an array of string, each string is a line of text displayed by the tooltip over the overlay.
'id'.properties[n] String ' ' If properties is an object, each pair of key/value is a list of items displayed by the tooltip over the overlay.
'id'.geometry Object The geometry of the overlay. It looks like to the GeoJSON specification. See details below for each type of overlay.

Point

The overlay Point has the following geometry attributes:

Attribute Type Default Info
'id'.geometry Object The geometry of the overlay (similar to the GeoJSON specification).
'id'.geometry.type String 'Point' The type of the overlay. Here a 'Point'.
'id'.geometry.radius Number 0 The radius of the 'Point' overlay (not in the GeoJSON specification).
'id'.geometry.coordinates Array [ ] The coordinates [φ, λ] of the center of the 'Point' overlay.