Google GeoCharts: Distrito Federal o Ciudad de México

Trataré de ser breve, en este post te explico cómo armar un mapa con áreas de datos o mejor dicho un GeoChart de Google Charts y al mismo tiempo cubriré un problema originado a partir del cambio de nombre del Distrito Federal a Ciudad de México, ya que su nuevo código ISO no es reconocido por Google Charts como una región válida.

Para crear una gráfica geográfica, según la documentación de Google Charts, se debe incluir el package de geochart y los datos a mostrar deben coincidir con los nombres o las claves de las regiones a mostrar, en el ejemplo más sencillo se muestra el mapa del mundo con datos para unos cuántos países:

    
      google.charts.load('current', {
        'packages':['geochart'], //paquete para indicar a los charts que usaremos un mapa para mostrar los datos
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }

Para mostrar un país y sus estados (o su primer nivel de división territorial), el principio es el mismo que el ejemplo anterior, la principal diferencia es que se debe especificar el tipo de display (regiones) y el alcance del mapa (resolution), en el siguiente ejemplo cargo un mapa de México con datos para todos los estados:

gmapa_dispersion = new google.visualization.GeoChart(document.getElementById('regions_div'));
  //Cargamos datos a arreglo de gmapData
  var gmapData = [];
  gmapData.push(['States', 'Estado', 'Visitantes']);
  //.
  //.
  //.
  gmapa_dispersion.draw(gmapData, {
    displayMode: 'regions', //indicamos al mapa que se centre en una region en lugar de global
    region: 'MX', //region a mostrar es solo Mexico
    resolution: 'provinces' //mostrar "division politica" entre estados
  });

var regiones_ISO = [{
    'entidad': 'Aguascalientes',
    'cuenta': 34500,
    'clave': 'MX-AGU'
  },
  {
    'entidad': 'Baja California',
    'cuenta': 45600,
    'clave': 'MX-BCN'
  },
  {
    'entidad': 'Baja California Sur',
    'cuenta': 57600,
    'clave': 'MX-BCS'
  },
  {
    'entidad': 'Campeche',
    'cuenta': 67800,
    'clave': 'MX-CAM'
  },
  {
    'entidad': 'Chiapas',
    'cuenta': 78900,
    'clave': 'MX-CHP'
  },
  {
    'entidad': 'Chihuaha',
    'cuenta': 89000,
    'clave': 'MX-CHH'
  },
  {
    'entidad': 'Coahuila',
    'cuenta': 90000,
    'clave': 'MX-COA'
  },
  {
    'entidad': 'Colima',
    'cuenta': 90100,
    'clave': 'MX-COL'
  },
  {
    'entidad': 'Ciudad de México',
    'cuenta': 12000,
    'clave': 'MX-DIF'
  },
  {
    'entidad': 'Durango',
    'cuenta': 23400,
    'clave': 'MX-DUR'
  },
  {
    'entidad': 'Guanajuato',
    'cuenta': 23450,
    'clave': 'MX-GUA'
  },
  {
    'entidad': 'Guerrero',
    'cuenta': 34560,
    'clave': 'MX-GRO'
  },
  {
    'entidad': 'Hidalgo',
    'cuenta': 45670,
    'clave': 'MX-HID'
  },
  {
    'entidad': 'Jalisco',
    'cuenta': 56780,
    'clave': 'MX-JAL'
  },
  {
    'entidad': 'México',
    'cuenta': 67890,
    'clave': 'MX-MEX'
  },
  {
    'entidad': 'Michoacán',
    'cuenta': 78901,
    'clave': 'MX-MIC'
  },
  {
    'entidad': 'Morelos',
    'cuenta': 89012,
    'clave': 'MX-MOR'
  },
  {
    'entidad': 'Nayarit',
    'cuenta': 90123,
    'clave': 'MX-NAY'
  },
  {
    'entidad': 'Nuevo León',
    'cuenta': 91234,
    'clave': 'MX-NLE'
  },
  {
    'entidad': 'Oaxaca',
    'cuenta': 12345,
    'clave': 'MX-OAX'
  },
  {
    'entidad': 'Puebla',
    'cuenta': 23456,
    'clave': 'MX-PUE'
  },
  {
    'entidad': 'Querétaro',
    'cuenta': 34567,
    'clave': 'MX-QUE'
  },
  {
    'entidad': 'Qintana Roo',
    'cuenta': 45678,
    'clave': 'MX-ROO'
  },
  {
    'entidad': 'San Luis Potosí',
    'cuenta': 56789,
    'clave': 'MX-SLP'
  },
  {
    'entidad': 'Sinaloa',
    'cuenta': 67890,
    'clave': 'MX-SIN'
  },
  {
    'entidad': 'Sonora',
    'cuenta': 98765,
    'clave': 'MX-SON'
  },
  {
    'entidad': 'Tabasco',
    'cuenta': 87654,
    'clave': 'MX-TAB'
  },
  {
    'entidad': 'Tamaulipas',
    'cuenta': 76543,
    'clave': 'MX-TAM'
  },
  {
    'entidad': 'Tlaxcala',
    'cuenta': 65432,
    'clave': 'MX-TLA'
  },
  {
    'entidad': 'Veracruz',
    'cuenta': 54321,
    'clave': 'MX-VER'
  },
  {
    'entidad': 'Yucatán',
    'cuenta': 43210,
    'clave': 'MX-YUC'
  },
  {
    'entidad': 'Zacatecas',
    'cuenta': 32109,
    'clave': 'MX-ZAC'
  },
]

La principal diferencia entre el código anterior (global) y éste son los nombres de los países contra las claves de los estados del país, ya que en el primero se usan los nombres en inglés de cada pais a mostrar datos, mientras que a nivel región, la documentación de Google Charts establece que se debe usar los códigos regionales bajo el estándar ISO-3166-2, la cuestión es que, en el caso de México, en específico la Ciudad de México, cambió su nombre oficial de Distrito Federal a Ciudad de México (CDMX), y con ello su código a MX-CMX, el cual no es reconocido por Google Charts, para solucionar ésto, es necesario usar el código anterior MX-DIF, que claramente aún hace referencia a Distrito Federal. Con este cambio, GeoCharts reconoce los datos para esta región y se muestra correctamente el mapa, el cual puedes probar en vivo en JSFiddle