Cómo crear un mapa de coropletas

Selecciona la plataforma: Android iOS JavaScript

Un mapa de coropletas es un tipo de mapa temático en el que las áreas administrativas se marcan con distintos colores o sombreados según un valor de datos. Puedes utilizar la función google.maps.FeatureStyleFunction para aplicar diseño a un mapa en función de un conjunto de datos en el que cada área administrativa se encuentra asociada a un rango de valores numéricos. A continuación, se incluye un mapa de coropletas que muestra datos sobre la población de cada estado de Estados Unidos.

En este ejemplo, los datos se muestran en un array de pares clave-valor, los cuales vinculan el ID de lugar de cada estado con un valor numérico para la población. La función maps.FeatureStyleFunction aplica un color a cada región de manera condicional en función de los valores del array.

Para crear un mapa de coropletas de los estados de EE.UU., sigue estos pasos:

1. Si aún no lo hiciste, sigue los pasos que se indican en Cómo comenzar para crear un ID y un diseño de mapa. Asegúrate de habilitar la capa de componentes Área administrativa de nivel 1 y de usar ese ID de mapa cuando crees el mapa.
2. Para obtener una referencia a la capa de componentes de área administrativa de nivel 1 cuando se inicialice el mapa, llama a map.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_1'). En Estados Unidos, estas áreas administrativas son los estados.
3. Establece la propiedad style en la capa de componentes como un FeatureStyleFunction que busque el valor de placeId de cada componente, como se muestra en el siguiente fragmento:

TypeScript

featureLayer.style = (
    featureStyleFunctionOptions: google.maps.FeatureStyleFunctionOptions
) => {
    const placeFeature =
        featureStyleFunctionOptions.feature as google.maps.PlaceFeature;
    const population = states[placeFeature.placeId];

    let fillColor: string | undefined;
    // Specify colors using any of the following:
    // * Named ('green')
    // * Hexadecimal ('#FF0000')
    // * RGB ('rgb(0, 0, 255)')
    // * HSL ('hsl(60, 100%, 50%)')

    if (population < 2000000) {
        fillColor = 'green';
    } else if (population < 5000000) {
        fillColor = 'red';
    } else if (population < 10000000) {
        fillColor = 'blue';
    } else if (population < 40000000) {
        fillColor = 'yellow';
    }
    return {
        fillColor,
        fillOpacity: 0.5,
    };
};
index.ts

Nota: Consulta la guía sobre cómo utilizar TypeScript y Google Maps.

JavaScript

featureLayer.style = (featureStyleFunctionOptions) => {
    const placeFeature = featureStyleFunctionOptions.feature;
    const population = states[placeFeature.placeId];

    let fillColor;
    // Specify colors using any of the following:
    // * Named ('green')
    // * Hexadecimal ('#FF0000')
    // * RGB ('rgb(0, 0, 255)')
    // * HSL ('hsl(60, 100%, 50%)')

    if (population < 2000000) {
        fillColor = 'green';
    } else if (population < 5000000) {
        fillColor = 'red';
    } else if (population < 10000000) {
        fillColor = 'blue';
    } else if (population < 40000000) {
        fillColor = 'yellow';
    }
    return {
        fillColor,
        fillOpacity: 0.5,
    };
};
index.js

Importante: La función de diseño de componentes debe crear un resultado predecible. Por ejemplo, si deseas crear un ejemplo que aplique un color aleatorio, tu código debe crear las partes aleatorias fuera de FeatureStyleFunction.

Para obtener el ID de lugar de una región, consulta Cómo usar las APIs de Geocoding y Places con un diseño basado en datos aplicable a límites.

Ejemplo de código completo

TypeScript

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    const featureLayer = innerMap.getFeatureLayer(
        'ADMINISTRATIVE_AREA_LEVEL_1'
    );

    featureLayer.style = (
        featureStyleFunctionOptions: google.maps.FeatureStyleFunctionOptions
    ) => {
        const placeFeature =
            featureStyleFunctionOptions.feature as google.maps.PlaceFeature;
        const population = states[placeFeature.placeId];

        let fillColor: string | undefined;
        // Specify colors using any of the following:
        // * Named ('green')
        // * Hexadecimal ('#FF0000')
        // * RGB ('rgb(0, 0, 255)')
        // * HSL ('hsl(60, 100%, 50%)')

        if (population < 2000000) {
            fillColor = 'green';
        } else if (population < 5000000) {
            fillColor = 'red';
        } else if (population < 10000000) {
            fillColor = 'blue';
        } else if (population < 40000000) {
            fillColor = 'yellow';
        }
        return {
            fillColor,
            fillOpacity: 0.5,
        };
    };

    // Population data by state.
    const states: Record<string, number> = {
        ChIJdf5LHzR_hogR6czIUzU0VV4: 5039877, // Alabama
        ChIJG8CuwJzfAFQRNduKqSde27w: 732673, // Alaska
        'ChIJaxhMy-sIK4cRcc3Bf7EnOUI': 7276316, // Arizona
        'ChIJYSc_dD-e0ocR0NLf_z5pBaQ': 3025891, // Arkansas
        ChIJPV4oX_65j4ARVW8IJ6IJUYs: 39237836, // California
        ChIJt1YYm3QUQIcR_6eQSTGDVMc: 5812069, // Colorado
        ChIJpVER8hFT5okR5XBhBVttmq4: 3605597, // Connecticut
        ChIJO9YMTXYFx4kReOgEjBItHZQ: 1003384, // Delaware
        ChIJvypWkWV2wYgR0E7HW9MTLvc: 21781128, // Florida
        ChIJV4FfHcU28YgR5xBP7BC8hGY: 10799566, // Georgia
        ChIJBeB5Twbb_3sRKIbMdNKCd0s: 1441553, // Hawaii
        ChIJ6Znkhaj_WFMRWIf3FQUwa9A: 1900923, // Idaho
        ChIJGSZubzgtC4gRVlkRZFCCFX8: 12671469, // Illinois
        ChIJHRv42bxQa4gRcuwyy84vEH4: 6805985, // Indiana
        ChIJGWD48W9e7ocR2VnHV0pj78Y: 3193079, // Iowa
        'ChIJawF8cXEXo4cRXwk-S6m0wmg': 2934582, // Kansas
        ChIJyVMZi0xzQogR_N_MxU5vH3c: 4509394, // Kentucky
        ChIJZYIRslSkIIYRA0flgTL3Vck: 4624047, // Louisiana
        ChIJ1YpTHd4dsEwR0KggZ2_MedY: 1372247, // Maine
        ChIJ35Dx6etNtokRsfZVdmU3r_I: 6165129, // Maryland
        ChIJ_b9z6W1l44kRHA2DVTbQxkU: 6984723, // Massachussetts
        ChIJEQTKxz2qTE0Rs8liellI3Zc: 10050811, // Michigan
        'ChIJmwt4YJpbWE0RD6L-EJvJogI': 5707390, // Minnesota
        ChIJGdRK5OQyKIYR2qbc6X8XDWI: 2949965, // Mississippi
        ChIJfeMiSNXmwIcRcr1mBFnEW7U: 6168187, // Misssouri
        ChIJ04p7LZwrQVMRGGwqz1jWcfU: 1104271, // Montana
        ChIJ7fwMtciNk4cRxArzDwyQJ6E: 1963692, // Nebraska
        'ChIJcbTe-KEKmYARs5X8qooDR88': 3143991, // Nevada
        ChIJ66bAnUtEs0wR64CmJa8CyNc: 1388992, // New Hampshire
        'ChIJn0AAnpX7wIkRjW0_-Ad70iw': 9267130, // New Jersey
        ChIJqVKY50NQGIcRup41Yxpuv0Y: 2115877, // New Mexico
        ChIJqaUj8fBLzEwRZ5UY3sHGz90: 19835913, // New York
        ChIJgRo4_MQfVIgRGa4i6fUwP60: 10551162, // North Carolina
        'ChIJY-nYVxKD11IRyc9egzmahA0': 774948, // North Dakota
        ChIJwY5NtXrpNogRFtmfnDlkzeU: 11780017, // Ohio
        'ChIJnU-ssRE5rIcRSOoKQDPPHF0': 3986639, // Oklahoma
        ChIJVWqfm3xuk1QRdrgLettlTH0: 4246155, // Oregon
        ChIJieUyHiaALYgRPbQiUEchRsI: 12964056, // Pennsylvania
        ChIJD9cOYhQ15IkR5wbB57wYTh4: 1095610, // Rhode Island
        'ChIJ49ExeWml-IgRnhcF9TKh_7k': 5190705, // South Carolina
        ChIJpTjphS1DfYcRt6SGMSnW8Ac: 895376, // South Dakota
        'ChIJA8-XniNLYYgRVpGBpcEgPgM': 6975218, // Tennessee
        ChIJSTKCCzZwQIYRPN4IGI8c6xY: 29527941, // Texas
        ChIJzfkTj8drTIcRP0bXbKVK370: 3337975, // Utah
        ChIJ_87aSGzctEwRtGtUNnSJTSY: 645570, // Vermont
        ChIJzbK8vXDWTIgRlaZGt0lBTsA: 8642274, // Virginia
        'ChIJ-bDD5__lhVQRuvNfbGh4QpQ': 7738692, // Washington
        ChIJRQnL1KVUSogRQzrN3mjHALs: 1782959, // West Virginia
        'ChIJr-OEkw_0qFIR1kmG-LjV1fI': 5895908, // Wisconsin
        ChIJaS7hSDTiXocRLzh90nkisCY: 578803, // Wyoming
    };
}

void init();
index.ts

Nota: Consulta la guía sobre cómo utilizar TypeScript y Google Maps.

JavaScript

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    const featureLayer = innerMap.getFeatureLayer(
        'ADMINISTRATIVE_AREA_LEVEL_1'
    );

    featureLayer.style = (featureStyleFunctionOptions) => {
        const placeFeature = featureStyleFunctionOptions.feature;
        const population = states[placeFeature.placeId];

        let fillColor;
        // Specify colors using any of the following:
        // * Named ('green')
        // * Hexadecimal ('#FF0000')
        // * RGB ('rgb(0, 0, 255)')
        // * HSL ('hsl(60, 100%, 50%)')

        if (population < 2000000) {
            fillColor = 'green';
        } else if (population < 5000000) {
            fillColor = 'red';
        } else if (population < 10000000) {
            fillColor = 'blue';
        } else if (population < 40000000) {
            fillColor = 'yellow';
        }
        return {
            fillColor,
            fillOpacity: 0.5,
        };
    };

    // Population data by state.
    const states = {
        ChIJdf5LHzR_hogR6czIUzU0VV4: 5039877, // Alabama
        ChIJG8CuwJzfAFQRNduKqSde27w: 732673, // Alaska
        'ChIJaxhMy-sIK4cRcc3Bf7EnOUI': 7276316, // Arizona
        'ChIJYSc_dD-e0ocR0NLf_z5pBaQ': 3025891, // Arkansas
        ChIJPV4oX_65j4ARVW8IJ6IJUYs: 39237836, // California
        ChIJt1YYm3QUQIcR_6eQSTGDVMc: 5812069, // Colorado
        ChIJpVER8hFT5okR5XBhBVttmq4: 3605597, // Connecticut
        ChIJO9YMTXYFx4kReOgEjBItHZQ: 1003384, // Delaware
        ChIJvypWkWV2wYgR0E7HW9MTLvc: 21781128, // Florida
        ChIJV4FfHcU28YgR5xBP7BC8hGY: 10799566, // Georgia
        ChIJBeB5Twbb_3sRKIbMdNKCd0s: 1441553, // Hawaii
        ChIJ6Znkhaj_WFMRWIf3FQUwa9A: 1900923, // Idaho
        ChIJGSZubzgtC4gRVlkRZFCCFX8: 12671469, // Illinois
        ChIJHRv42bxQa4gRcuwyy84vEH4: 6805985, // Indiana
        ChIJGWD48W9e7ocR2VnHV0pj78Y: 3193079, // Iowa
        'ChIJawF8cXEXo4cRXwk-S6m0wmg': 2934582, // Kansas
        ChIJyVMZi0xzQogR_N_MxU5vH3c: 4509394, // Kentucky
        ChIJZYIRslSkIIYRA0flgTL3Vck: 4624047, // Louisiana
        ChIJ1YpTHd4dsEwR0KggZ2_MedY: 1372247, // Maine
        ChIJ35Dx6etNtokRsfZVdmU3r_I: 6165129, // Maryland
        ChIJ_b9z6W1l44kRHA2DVTbQxkU: 6984723, // Massachussetts
        ChIJEQTKxz2qTE0Rs8liellI3Zc: 10050811, // Michigan
        'ChIJmwt4YJpbWE0RD6L-EJvJogI': 5707390, // Minnesota
        ChIJGdRK5OQyKIYR2qbc6X8XDWI: 2949965, // Mississippi
        ChIJfeMiSNXmwIcRcr1mBFnEW7U: 6168187, // Misssouri
        ChIJ04p7LZwrQVMRGGwqz1jWcfU: 1104271, // Montana
        ChIJ7fwMtciNk4cRxArzDwyQJ6E: 1963692, // Nebraska
        'ChIJcbTe-KEKmYARs5X8qooDR88': 3143991, // Nevada
        ChIJ66bAnUtEs0wR64CmJa8CyNc: 1388992, // New Hampshire
        'ChIJn0AAnpX7wIkRjW0_-Ad70iw': 9267130, // New Jersey
        ChIJqVKY50NQGIcRup41Yxpuv0Y: 2115877, // New Mexico
        ChIJqaUj8fBLzEwRZ5UY3sHGz90: 19835913, // New York
        ChIJgRo4_MQfVIgRGa4i6fUwP60: 10551162, // North Carolina
        'ChIJY-nYVxKD11IRyc9egzmahA0': 774948, // North Dakota
        ChIJwY5NtXrpNogRFtmfnDlkzeU: 11780017, // Ohio
        'ChIJnU-ssRE5rIcRSOoKQDPPHF0': 3986639, // Oklahoma
        ChIJVWqfm3xuk1QRdrgLettlTH0: 4246155, // Oregon
        ChIJieUyHiaALYgRPbQiUEchRsI: 12964056, // Pennsylvania
        ChIJD9cOYhQ15IkR5wbB57wYTh4: 1095610, // Rhode Island
        'ChIJ49ExeWml-IgRnhcF9TKh_7k': 5190705, // South Carolina
        ChIJpTjphS1DfYcRt6SGMSnW8Ac: 895376, // South Dakota
        'ChIJA8-XniNLYYgRVpGBpcEgPgM': 6975218, // Tennessee
        ChIJSTKCCzZwQIYRPN4IGI8c6xY: 29527941, // Texas
        ChIJzfkTj8drTIcRP0bXbKVK370: 3337975, // Utah
        ChIJ_87aSGzctEwRtGtUNnSJTSY: 645570, // Vermont
        ChIJzbK8vXDWTIgRlaZGt0lBTsA: 8642274, // Virginia
        'ChIJ-bDD5__lhVQRuvNfbGh4QpQ': 7738692, // Washington
        ChIJRQnL1KVUSogRQzrN3mjHALs: 1782959, // West Virginia
        'ChIJr-OEkw_0qFIR1kmG-LjV1fI': 5895908, // Wisconsin
        ChIJaS7hSDTiXocRLzh90nkisCY: 578803, // Wyoming
    };
}

void init();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Choropleth Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="40.76,-101.64"
            zoom="5"
            map-id="8b37d7206ccf01219cd548d3"></gmp-map>
    </body>
</html>
index.html

Prueba la muestra

JSFiddle.net