Page Summary
-
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"></gmp-map> </body> </html>
