AI-generated Key Takeaways
-
Choropleth maps use color-coding to represent data values within administrative areas on a map.
-
The
google.maps.FeatureStyleFunctionallows customization of region colors based on corresponding data values. -
Data is structured as key-value pairs, linking administrative areas with their numeric data.
-
Ensure predictable output from your
FeatureStyleFunctionby handling random elements externally.
A choropleth map is a type of thematic map in which administrative areas are
colored or shaded according to a data value. You can use a google.maps.FeatureStyleFunction
to style a map based on a dataset where each administrative area is associated
with a range of numeric values. The following example map shows a choropleth map
depicting state population data for the United States.
In this example, the data consists of an array of key-value pairs, matching
the display name of each state with a numeric population value. The maps.FeatureStyleFunction
conditionally colors each region based on the
values in the array.
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 , }; };
Complete example code
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"> </body> </html>
