Um mapa coroplético é um tipo temático em que áreas administrativas ficam coloridas ou sombreadas de acordo com um valor de dados. Você pode usar uma função google.maps.FeatureStyleFunction para estilizar um mapa com base em um conjunto de dados em que cada área administrativa fica associada a um valor numérico. O exemplo abaixo mostra um mapa coroplético com informações sobre a população em cada estado dos EUA.
Neste exemplo, os dados consistem em uma matriz de pares de chave-valor, correspondendo ao nome de exibição de cada estado com um valor numérico de população. A maps.FeatureStyleFunction colore condicionalmente cada região com base nos valores da matriz.
TypeScript
featureLayer.style = (featureStyleFunctionOptions) => { const placeFeature = featureStyleFunctionOptions.feature as google.maps.PlaceFeature; 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, }; };
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, }; };
Exemplo de código completo
TypeScript
async function initMap() { // Request needed libraries. (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary; // Get the gmp-map element. const mapElement = document.querySelector( 'gmp-map' ) as google.maps.MapElement; // Get the inner map. const innerMap = mapElement.innerMap; const featureLayer = innerMap.getFeatureLayer( google.maps.FeatureType.ADMINISTRATIVE_AREA_LEVEL_1 ); featureLayer.style = (featureStyleFunctionOptions) => { const placeFeature = featureStyleFunctionOptions.feature as google.maps.PlaceFeature; 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 }; } initMap();
JavaScript
async function initMap() { // 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(google.maps.FeatureType.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 }; } initMap();
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>
<!-- prettier-ignore -->
<script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
</head>
<body>
<gmp-map
center="40.76,-101.64"
zoom="5"
map-id="8b37d7206ccf01219cd548d3"></gmp-map>
</body>
</html>