Creare una mappa coropletica

Seleziona la piattaforma: Android iOS JavaScript

Una mappa coropletica è un tipo di mappa tematica in cui le aree amministrative sono colorate o ombreggiate in base a un valore dei dati. Puoi utilizzare una google.maps.FeatureStyleFunction per applicare uno stile a una mappa in base a un set di dati in cui ogni area amministrativa è associata a un intervallo di valori numerici. La mappa di esempio seguente mostra una mappa coropletica che rappresenta i dati sulla popolazione degli stati degli Stati Uniti.

In questo esempio, i dati sono costituiti da un array di coppie chiave-valore, che corrispondono all'ID luogo di ogni stato con un valore numerico della popolazione. maps.FeatureStyleFunction colora in modo condizionale ogni regione in base ai valori nell'array.

Per creare una mappa coropletica degli stati degli Stati Uniti, segui questi passaggi:

  1. Se non l'hai ancora fatto, segui i passaggi descritti in Inizia per creare un ID mappa e uno stile di mappa. Assicurati di attivare il livello degli elementi Area amministrativa di livello 1 e utilizza l'ID mappa quando crei la mappa.
  2. Ottieni un riferimento al livello degli elementi Area amministrativa di livello 1 quando la mappa viene inizializzata chiamando map.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_1'). Negli Stati Uniti, queste aree amministrative sono gli stati.
  3. Imposta la proprietà style sul livello degli elementi su una FeatureStyleFunction che cerca il valore per placeId di ogni elemento, come mostrato nello snippet seguente:

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,
    };
};

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,
    };
};

Per ottenere l'ID luogo di una regione, consulta Utilizza le API Geocoding e Places con lo stile basato sui dati per i confini.

Codice di esempio 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();

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();

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;
}

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>

Prova l'esempio