{"id":694072,"date":"2020-01-14T08:30:12","date_gmt":"2020-01-14T16:30:12","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=694072"},"modified":"2024-06-20T12:16:24","modified_gmt":"2024-06-20T19:16:24","slug":"better-colors-for-better-mapping","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping","title":{"rendered":"Better colors for better mapping"},"author":6561,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[30791,30111,24581,515732],"industry":[],"product":[36831,36601],"class_list":["post-694072","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-color","tag-data-visualization","tag-smart-mapping","tag-whats-new-december-2019","product-js-api-arcgis","product-developers"],"acf":{"short_description":"The Esri color ramps and Visualization Best Practices guide pages assist you in creating better maps using better combinations of colors.","flexible_content":[{"acf_fc_layout":"content","content":"<p>The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/\">ArcGIS API for JavaScript<\/a> documentation added two guide pages to help you make smarter color choices while designing your maps.<\/p>\n<ul>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/esri-color-ramps\/\">Esri Color Ramps<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/visualization-best-practices\/\">Visualization best practices<\/a><\/li>\n<\/ul>\n<p>The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/esri-color-ramps\/\">Esri Color Ramps<\/a> guide provides a simple UI that allows you to explore hundreds of color ramps designed by numerous cartographers with decades of experience in color theory. The cartographers involved in creating these ramps have knowledge of how perceptual differences between colors work and how the human brain interprets (or fails to interpret) certain patterns.<\/p>\n<p>This page was designed specifically for developers who have data, know what they want to map, and want to spin up a quick, good-looking visualization all in code.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":694102,"id":694102,"title":"color-ramps2","filename":"color-ramps2.png","filesize":25066,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/color-ramps2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\/color-ramps2","alt":"The Esri color ramps page displaying several color ramps that can be easily copied to the clipboard.","author":"6561","description":"","caption":"The Esri color ramps page allows you to browse and filter hundreds of colorblind-friendly color ramps to copy\/paste directly into your apps.","name":"color-ramps2","status":"inherit","uploaded_to":694072,"date":"2020-01-04 00:24:22","modified":"2021-04-20 17:02:02","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":865,"height":423,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/color-ramps2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/color-ramps2.png","medium-width":464,"medium-height":227,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/color-ramps2.png","medium_large-width":768,"medium_large-height":376,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/color-ramps2.png","large-width":865,"large-height":423,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/color-ramps2.png","1536x1536-width":865,"1536x1536-height":423,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/color-ramps2.png","2048x2048-width":865,"2048x2048-height":423,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/color-ramps2-826x404.png","card_image-width":826,"card_image-height":404,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/color-ramps2.png","wide_image-width":865,"wide_image-height":423}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/esri-color-ramps\/"},{"acf_fc_layout":"content","content":"<h2>Explore the color ramps<\/h2>\n<p>The Esri color ramps page allows you to filter ramps based on criteria that is meaningful to you. The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/visualization-best-practices\/\">Visualization best practices<\/a> guide will help you make an informed decision about which ramps may be most appropriate for your use case. For example, if you are looking for blue-themed color ramps then pick the <code>blues<\/code> tag. <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":694122,"id":694122,"title":"Screen Shot 2020-01-03 at 4.28.57 PM","filename":"Screen-Shot-2020-01-03-at-4.28.57-PM.png","filesize":23367,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.28.57-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\/screen-shot-2020-01-03-at-4-28-57-pm","alt":"UI buttons for filtering color ramps on the Esri Color ramps page.","author":"6561","description":"","caption":"","name":"screen-shot-2020-01-03-at-4-28-57-pm","status":"inherit","uploaded_to":694072,"date":"2020-01-04 00:29:50","modified":"2020-01-13 17:01:10","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":730,"height":277,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.28.57-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.28.57-PM.png","medium-width":464,"medium-height":176,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.28.57-PM.png","medium_large-width":730,"medium_large-height":277,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.28.57-PM.png","large-width":730,"large-height":277,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.28.57-PM.png","1536x1536-width":730,"1536x1536-height":277,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.28.57-PM.png","2048x2048-width":730,"2048x2048-height":277,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.28.57-PM.png","card_image-width":730,"card_image-height":277,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.28.57-PM.png","wide_image-width":730,"wide_image-height":277}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":694132,"id":694132,"title":"Screen Shot 2020-01-03 at 4.29.28 PM","filename":"Screen-Shot-2020-01-03-at-4.29.28-PM.png","filesize":47479,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.29.28-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\/screen-shot-2020-01-03-at-4-29-28-pm","alt":"The Esri color ramps page displaying several color ramps that can be easily copied to the clipboard.","author":"6561","description":"","caption":"","name":"screen-shot-2020-01-03-at-4-29-28-pm","status":"inherit","uploaded_to":694072,"date":"2020-01-04 00:30:02","modified":"2020-01-13 16:59:57","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":456,"height":538,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.29.28-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.29.28-PM.png","medium-width":221,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.29.28-PM.png","medium_large-width":456,"medium_large-height":538,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.29.28-PM.png","large-width":456,"large-height":538,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.29.28-PM.png","1536x1536-width":456,"1536x1536-height":538,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.29.28-PM.png","2048x2048-width":456,"2048x2048-height":538,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.29.28-PM-394x465.png","card_image-width":394,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.29.28-PM.png","wide_image-width":456,"wide_image-height":538}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Are you a fan of dark backgrounds? There\u2019s a filter for that as well. Just pick <code>dark<\/code> as illustrated below.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":694142,"id":694142,"title":"Screen Shot 2020-01-03 at 4.30.52 PM","filename":"Screen-Shot-2020-01-03-at-4.30.52-PM.png","filesize":26139,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.52-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\/screen-shot-2020-01-03-at-4-30-52-pm","alt":"UI buttons for filtering color ramps on the Esri Color ramps page.","author":"6561","description":"","caption":"","name":"screen-shot-2020-01-03-at-4-30-52-pm","status":"inherit","uploaded_to":694072,"date":"2020-01-04 00:31:04","modified":"2020-01-13 17:01:19","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":813,"height":319,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.52-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.52-PM.png","medium-width":464,"medium-height":182,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.52-PM.png","medium_large-width":768,"medium_large-height":301,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.52-PM.png","large-width":813,"large-height":319,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.52-PM.png","1536x1536-width":813,"1536x1536-height":319,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.52-PM.png","2048x2048-width":813,"2048x2048-height":319,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.52-PM.png","card_image-width":813,"card_image-height":319,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.52-PM.png","wide_image-width":813,"wide_image-height":319}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":694152,"id":694152,"title":"Screen Shot 2020-01-03 at 4.30.36 PM","filename":"Screen-Shot-2020-01-03-at-4.30.36-PM-e1578098524221.png","filesize":243395,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.36-PM-e1578098524221.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\/screen-shot-2020-01-03-at-4-30-36-pm","alt":"The Esri color ramps page displaying several color ramps that can be easily copied to the clipboard.","author":"6561","description":"","caption":"","name":"screen-shot-2020-01-03-at-4-30-36-pm","status":"inherit","uploaded_to":694072,"date":"2020-01-04 00:31:21","modified":"2020-01-13 17:00:05","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":694,"height":790,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.36-PM-e1578098524221-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.36-PM-e1578098524221-229x261.png","medium-width":229,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.36-PM-e1578098524221.png","medium_large-width":694,"medium_large-height":790,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.36-PM-e1578098524221.png","large-width":694,"large-height":790,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.36-PM-e1578098524221.png","1536x1536-width":694,"1536x1536-height":790,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.36-PM-e1578098524221.png","2048x2048-width":694,"2048x2048-height":790,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.36-PM-e1578098524221-408x465.png","card_image-width":408,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.30.36-PM-e1578098524221.png","wide_image-width":694,"wide_image-height":790}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>You can filter by other criteria, including the number of colors you need for your visualization, and the theme of it.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":694162,"id":694162,"title":"Screen Shot 2020-01-03 at 4.32.24 PM","filename":"Screen-Shot-2020-01-03-at-4.32.24-PM.png","filesize":28464,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.24-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\/screen-shot-2020-01-03-at-4-32-24-pm","alt":"UI buttons for filtering color ramps on the Esri Color ramps page.","author":"6561","description":"","caption":"","name":"screen-shot-2020-01-03-at-4-32-24-pm","status":"inherit","uploaded_to":694072,"date":"2020-01-04 00:32:55","modified":"2020-01-13 17:01:26","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":821,"height":315,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.24-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.24-PM.png","medium-width":464,"medium-height":178,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.24-PM.png","medium_large-width":768,"medium_large-height":295,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.24-PM.png","large-width":821,"large-height":315,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.24-PM.png","1536x1536-width":821,"1536x1536-height":315,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.24-PM.png","2048x2048-width":821,"2048x2048-height":315,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.24-PM.png","card_image-width":821,"card_image-height":315,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.24-PM.png","wide_image-width":821,"wide_image-height":315}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":694172,"id":694172,"title":"Screen Shot 2020-01-03 at 4.32.40 PM","filename":"Screen-Shot-2020-01-03-at-4.32.40-PM.png","filesize":59864,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.40-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\/screen-shot-2020-01-03-at-4-32-40-pm","alt":"The Esri color ramps page displaying several color ramps that can be easily copied to the clipboard.","author":"6561","description":"","caption":"","name":"screen-shot-2020-01-03-at-4-32-40-pm","status":"inherit","uploaded_to":694072,"date":"2020-01-04 00:33:16","modified":"2020-01-13 17:00:11","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":728,"height":577,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.40-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.40-PM.png","medium-width":329,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.40-PM.png","medium_large-width":728,"medium_large-height":577,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.40-PM.png","large-width":728,"large-height":577,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.40-PM.png","1536x1536-width":728,"1536x1536-height":577,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.40-PM.png","2048x2048-width":728,"2048x2048-height":577,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.40-PM-587x465.png","card_image-width":587,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.32.40-PM.png","wide_image-width":728,"wide_image-height":577}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Is it a visualization of unique types or categories (categorical)? One that shows a sequence of high to low values (sequential)? Or perhaps a map that colors features based on whether they are above or below a particular value (diverging)? This page has you covered.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":694182,"id":694182,"title":"Screen Shot 2020-01-03 at 4.35.19 PM","filename":"Screen-Shot-2020-01-03-at-4.35.19-PM.png","filesize":85041,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.35.19-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\/screen-shot-2020-01-03-at-4-35-19-pm","alt":"The Esri color ramps page displaying several color ramps that can be easily copied to the clipboard.","author":"6561","description":"","caption":"Color ramps filtered by the \"categorical\" tag.","name":"screen-shot-2020-01-03-at-4-35-19-pm","status":"inherit","uploaded_to":694072,"date":"2020-01-04 00:35:38","modified":"2020-01-13 17:17:06","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":743,"height":772,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.35.19-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.35.19-PM.png","medium-width":251,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.35.19-PM.png","medium_large-width":743,"medium_large-height":772,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.35.19-PM.png","large-width":743,"large-height":772,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.35.19-PM.png","1536x1536-width":743,"1536x1536-height":772,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.35.19-PM.png","2048x2048-width":743,"2048x2048-height":772,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.35.19-PM-448x465.png","card_image-width":448,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.35.19-PM.png","wide_image-width":743,"wide_image-height":772}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>When you find a ramp you want to use, you can copy the hex values directly to the clipboard and paste them into your app.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":694192,"id":694192,"title":"copy colors into your app","filename":"copy-colors-into-your-app.png","filesize":102923,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/copy-colors-into-your-app.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\/copy-colors-into-your-app","alt":"Arrows pointing where to copy and past colors from the Esri color ramps page to the relevant location within the code of an app.","author":"6561","description":"","caption":"","name":"copy-colors-into-your-app","status":"inherit","uploaded_to":694072,"date":"2020-01-04 00:36:14","modified":"2020-01-13 17:02:21","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1192,"height":573,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/copy-colors-into-your-app-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/copy-colors-into-your-app.png","medium-width":464,"medium-height":223,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/copy-colors-into-your-app.png","medium_large-width":768,"medium_large-height":369,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/copy-colors-into-your-app.png","large-width":1192,"large-height":573,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/copy-colors-into-your-app.png","1536x1536-width":1192,"1536x1536-height":573,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/copy-colors-into-your-app.png","2048x2048-width":1192,"2048x2048-height":573,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/copy-colors-into-your-app-826x397.png","card_image-width":826,"card_image-height":397,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/copy-colors-into-your-app.png","wide_image-width":1192,"wide_image-height":573}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>If you prefer RGBA values, just click the information icon in the top-right corner of the card.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":694202,"id":694202,"title":"Screen Shot 2020-01-03 at 4.36.51 PM","filename":"Screen-Shot-2020-01-03-at-4.36.51-PM.png","filesize":43122,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.36.51-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\/screen-shot-2020-01-03-at-4-36-51-pm","alt":"","author":"6561","description":"","caption":"","name":"screen-shot-2020-01-03-at-4-36-51-pm","status":"inherit","uploaded_to":694072,"date":"2020-01-04 00:37:26","modified":"2020-01-04 00:37:26","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":928,"height":348,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.36.51-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.36.51-PM.png","medium-width":464,"medium-height":174,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.36.51-PM.png","medium_large-width":768,"medium_large-height":288,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.36.51-PM.png","large-width":928,"large-height":348,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.36.51-PM.png","1536x1536-width":928,"1536x1536-height":348,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.36.51-PM.png","2048x2048-width":928,"2048x2048-height":348,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.36.51-PM-826x310.png","card_image-width":826,"card_image-height":310,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-4.36.51-PM.png","wide_image-width":928,"wide_image-height":348}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Then copy the values in the modal window to paste into your app. Notice this window also displays all tags associated with the ramp, along with its name.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":694212,"id":694212,"title":"Screen Shot 2020-01-02 at 10.17.48 AM","filename":"Screen-Shot-2020-01-02-at-10.17.48-AM.png","filesize":35983,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.17.48-AM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\/screen-shot-2020-01-02-at-10-17-48-am","alt":"Modal window displaying the colors as hex and RGBA values. Either one of those sets of colors can be copied.","author":"6561","description":"","caption":"","name":"screen-shot-2020-01-02-at-10-17-48-am","status":"inherit","uploaded_to":694072,"date":"2020-01-04 00:37:47","modified":"2020-01-13 17:02:59","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":844,"height":572,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.17.48-AM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.17.48-AM.png","medium-width":385,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.17.48-AM.png","medium_large-width":768,"medium_large-height":520,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.17.48-AM.png","large-width":844,"large-height":572,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.17.48-AM.png","1536x1536-width":844,"1536x1536-height":572,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.17.48-AM.png","2048x2048-width":844,"2048x2048-height":572,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.17.48-AM-686x465.png","card_image-width":686,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.17.48-AM.png","wide_image-width":844,"wide_image-height":572}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Categorical example<\/h2>\n<p>When <a href=\"https:\/\/www.esri.com\/en-us\/capabilities\/mapping\/overview\">mapping<\/a> predominant crop yields, you may start out with a map that looks like this.<\/p>\n<details>\n<summary>View the code<\/summary>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #333;font-weight: bold\">var<\/span> fieldInfos = [\r\n  {\r\n    fieldName: <span style=\"color: #d14\">\"M172_07\"<\/span>,\r\n    label: <span style=\"color: #d14\">\"Wheat\"<\/span>,\r\n    format: {\r\n      digitSeparator: <span style=\"color: #333;font-weight: 500\">true<\/span>,\r\n      places: <span style=\"color: #008080\">0<\/span>\r\n    }\r\n  },\r\n  {\r\n    fieldName: <span style=\"color: #d14\">\"M188_07\"<\/span>,\r\n    label: <span style=\"color: #d14\">\"Cotton\"<\/span>,\r\n    format: {\r\n      digitSeparator: <span style=\"color: #333;font-weight: 500\">true<\/span>,\r\n      places: <span style=\"color: #008080\">0<\/span>\r\n    }\r\n  },\r\n  {\r\n    fieldName: <span style=\"color: #d14\">\"M193_07\"<\/span>,\r\n    label: <span style=\"color: #d14\">\"Soybeans\"<\/span>,\r\n    format: {\r\n      digitSeparator: <span style=\"color: #333;font-weight: 500\">true<\/span>,\r\n      places: <span style=\"color: #008080\">0<\/span>\r\n    }\r\n  },\r\n  {\r\n    fieldName: <span style=\"color: #d14\">\"M217_07\"<\/span>,\r\n    label: <span style=\"color: #d14\">\"Vegetables\"<\/span>,\r\n    format: {\r\n      digitSeparator: <span style=\"color: #333;font-weight: 500\">true<\/span>,\r\n      places: <span style=\"color: #008080\">0<\/span>\r\n    }\r\n  },\r\n  {\r\n    fieldName: <span style=\"color: #d14\">\"M163_07\"<\/span>,\r\n    label: <span style=\"color: #d14\">\"Corn\"<\/span>,\r\n    format: {\r\n      digitSeparator: <span style=\"color: #333;font-weight: 500\">true<\/span>,\r\n      places: <span style=\"color: #008080\">0<\/span>\r\n    }\r\n  }\r\n];\r\n\r\n<span><span style=\"color: #333;font-weight: bold\">function<\/span> <span style=\"color: #900;font-weight: bold\">createSymbol<\/span>(<span>color<\/span>)<\/span>{\r\n  <span style=\"color: #333;font-weight: bold\">return<\/span> {\r\n    type: <span style=\"color: #d14\">\"simple-fill\"<\/span>,\r\n    color: color ? color : [<span style=\"color: #008080\">0<\/span>,<span style=\"color: #008080\">0<\/span>,<span style=\"color: #008080\">0<\/span>,<span style=\"color: #008080\">0<\/span>],\r\n    outline: {\r\n      color: [<span style=\"color: #008080\">255<\/span>,<span style=\"color: #008080\">255<\/span>,<span style=\"color: #008080\">255<\/span>,<span style=\"color: #008080\">0.5<\/span>],\r\n      width: <span style=\"color: #008080\">0.5<\/span>\r\n    }\r\n  };\r\n}\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> colors = [ <span style=\"color: #d14\">\"red\"<\/span>, <span style=\"color: #d14\">\"blue\"<\/span>, <span style=\"color: #d14\">\"green\"<\/span>, <span style=\"color: #d14\">\"yellow\"<\/span>, <span style=\"color: #d14\">\"purple\"<\/span> ];\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> renderer = {\r\n  type: <span style=\"color: #d14\">\"unique-value\"<\/span>,\r\n  field: <span style=\"color: #d14\">\"DOM_CROP_ACRES\"<\/span>,\r\n  legendOptions: {\r\n    title: <span style=\"color: #d14\">\"Dominant crop in harvested acres by county (2007)\"<\/span>\r\n  },\r\n  uniqueValueInfos: fieldInfos.map(<span><span style=\"color: #333;font-weight: bold\">function<\/span>(<span>fieldInfo, index<\/span>)<\/span>{\r\n    <span style=\"color: #333;font-weight: bold\">return<\/span> {\r\n      value: fieldInfo.label,\r\n      label: fieldInfo.label,\r\n      symbol: createSymbol(colors[index])\r\n    }\r\n  }),\r\n  defaultSymbol: createSymbol(<span style=\"color: #d14\">\"gray\"<\/span>),\r\n  defaultLabel: <span style=\"color: #d14\">\"No predominance\"<\/span>\r\n}\r\n<\/code><\/pre>\n<\/details>\n"},{"acf_fc_layout":"image","image":{"ID":694262,"id":694262,"title":"bad-map","filename":"bad-map.png","filesize":362826,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/bad-map.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\/bad-map","alt":"Map of the United States counties colored by the predominant crop harvested in each county. Each color is well known, such as \"red\", \"purple\", etc. However, they don't look visually appealing.","author":"6561","description":"","caption":"","name":"bad-map","status":"inherit","uploaded_to":694072,"date":"2020-01-04 01:00:12","modified":"2020-01-13 17:04:15","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1529,"height":724,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/bad-map-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/bad-map.png","medium-width":464,"medium-height":220,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/bad-map.png","medium_large-width":768,"medium_large-height":364,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/bad-map.png","large-width":1529,"large-height":724,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/bad-map.png","1536x1536-width":1529,"1536x1536-height":724,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/bad-map.png","2048x2048-width":1529,"2048x2048-height":724,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/bad-map-826x391.png","card_image-width":826,"card_image-height":391,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/bad-map.png","wide_image-width":1529,"wide_image-height":724}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/full\/JjovNEo"},{"acf_fc_layout":"content","content":"<p>It&#8217;s easy to pick a few colors at random to distinguish geographic patterns. However, it&#8217;s difficult to find colors that look good together. For example, this map uses a few familiar colors, but they don&#8217;t work well when used together.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #333;font-weight: bold\">const<\/span> colors = [ <span style=\"color: #d14\">\"red\"<\/span>, <span style=\"color: #d14\">\"blue\"<\/span>, <span style=\"color: #d14\">\"green\"<\/span>, <span style=\"color: #d14\">\"yellow\"<\/span>, <span style=\"color: #d14\">\"purple\"<\/span> ];\r\n<\/code><\/pre>\n<p>By using the Esri colors guide page, I searched for <code>categorical<\/code> and <code>light<\/code> ramps. After trying a few by copying and pasting the colors directly into the app, I settled with <em>Metro Movement<\/em>.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #333;font-weight: bold\">const<\/span> colors = [ <span style=\"color: #d14\">\"#ed5151\"<\/span>, <span style=\"color: #d14\">\"#149ece\"<\/span>, <span style=\"color: #d14\">\"#a7c636\"<\/span>, <span style=\"color: #d14\">\"#9e559c\"<\/span>, <span style=\"color: #d14\">\"#fc921f\"<\/span> ];\r\n<\/code><\/pre>\n<details>\n<summary>View the code<\/summary>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #333;font-weight: bold\">var<\/span> fieldInfos = [\r\n  {\r\n    fieldName: <span style=\"color: #d14\">\"M172_07\"<\/span>,\r\n    label: <span style=\"color: #d14\">\"Wheat\"<\/span>,\r\n    format: {\r\n      digitSeparator: <span style=\"color: #333;font-weight: 500\">true<\/span>,\r\n      places: <span style=\"color: #008080\">0<\/span>\r\n    }\r\n  },\r\n  {\r\n    fieldName: <span style=\"color: #d14\">\"M188_07\"<\/span>,\r\n    label: <span style=\"color: #d14\">\"Cotton\"<\/span>,\r\n    format: {\r\n      digitSeparator: <span style=\"color: #333;font-weight: 500\">true<\/span>,\r\n      places: <span style=\"color: #008080\">0<\/span>\r\n    }\r\n  },\r\n  {\r\n    fieldName: <span style=\"color: #d14\">\"M193_07\"<\/span>,\r\n    label: <span style=\"color: #d14\">\"Soybeans\"<\/span>,\r\n    format: {\r\n      digitSeparator: <span style=\"color: #333;font-weight: 500\">true<\/span>,\r\n      places: <span style=\"color: #008080\">0<\/span>\r\n    }\r\n  },\r\n  {\r\n    fieldName: <span style=\"color: #d14\">\"M217_07\"<\/span>,\r\n    label: <span style=\"color: #d14\">\"Vegetables\"<\/span>,\r\n    format: {\r\n      digitSeparator: <span style=\"color: #333;font-weight: 500\">true<\/span>,\r\n      places: <span style=\"color: #008080\">0<\/span>\r\n    }\r\n  },\r\n  {\r\n    fieldName: <span style=\"color: #d14\">\"M163_07\"<\/span>,\r\n    label: <span style=\"color: #d14\">\"Corn\"<\/span>,\r\n    format: {\r\n      digitSeparator: <span style=\"color: #333;font-weight: 500\">true<\/span>,\r\n      places: <span style=\"color: #008080\">0<\/span>\r\n    }\r\n  }\r\n];\r\n\r\n<span><span style=\"color: #333;font-weight: bold\">function<\/span> <span style=\"color: #900;font-weight: bold\">createSymbol<\/span>(<span>color<\/span>)<\/span>{\r\n  <span style=\"color: #333;font-weight: bold\">return<\/span> {\r\n    type: <span style=\"color: #d14\">\"simple-fill\"<\/span>,\r\n    color: color ? color : [<span style=\"color: #008080\">0<\/span>,<span style=\"color: #008080\">0<\/span>,<span style=\"color: #008080\">0<\/span>,<span style=\"color: #008080\">0<\/span>],\r\n    outline: {\r\n      color: [<span style=\"color: #008080\">255<\/span>,<span style=\"color: #008080\">255<\/span>,<span style=\"color: #008080\">255<\/span>,<span style=\"color: #008080\">0.5<\/span>],\r\n      width: <span style=\"color: #008080\">0.5<\/span>\r\n    }\r\n  };\r\n}\r\n\r\n<span style=\"color: #998;font-style: italic\">\/\/ Metro Movement<\/span>\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> colors = [ <span style=\"color: #d14\">\"#ed5151\"<\/span>, <span style=\"color: #d14\">\"#149ece\"<\/span>, <span style=\"color: #d14\">\"#a7c636\"<\/span>, <span style=\"color: #d14\">\"#9e559c\"<\/span>, <span style=\"color: #d14\">\"#fc921f\"<\/span> ];\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> renderer = {\r\n  type: <span style=\"color: #d14\">\"unique-value\"<\/span>,\r\n  field: <span style=\"color: #d14\">\"DOM_CROP_ACRES\"<\/span>,\r\n  legendOptions: {\r\n    title: <span style=\"color: #d14\">\"Dominant crop in harvested acres by county (2007)\"<\/span>\r\n  },\r\n  uniqueValueInfos: fieldInfos.map(<span><span style=\"color: #333;font-weight: bold\">function<\/span>(<span>fieldInfo, index<\/span>)<\/span>{\r\n    <span style=\"color: #333;font-weight: bold\">return<\/span> {\r\n      value: fieldInfo.label,\r\n      label: fieldInfo.label,\r\n      symbol: createSymbol(colors[index])\r\n    }\r\n  }),\r\n  defaultSymbol: createSymbol(<span style=\"color: #d14\">\"gray\"<\/span>),\r\n  defaultLabel: <span style=\"color: #d14\">\"No predominance\"<\/span>\r\n}\r\n<\/code><\/pre>\n<\/details>\n"},{"acf_fc_layout":"image","image":{"ID":694272,"id":694272,"title":"Screen Shot 2020-01-02 at 10.31.02 AM","filename":"Screen-Shot-2020-01-02-at-10.31.02-AM.png","filesize":271304,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.31.02-AM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\/screen-shot-2020-01-02-at-10-31-02-am","alt":"Map of the United States counties colored by the predominant crop harvested in each county. Each color comes from the Metro Movement ramp in the Esri color ramps page.","author":"6561","description":"","caption":"","name":"screen-shot-2020-01-02-at-10-31-02-am","status":"inherit","uploaded_to":694072,"date":"2020-01-04 01:00:48","modified":"2020-01-13 17:04:47","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1352,"height":719,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.31.02-AM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.31.02-AM.png","medium-width":464,"medium-height":247,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.31.02-AM.png","medium_large-width":768,"medium_large-height":408,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.31.02-AM.png","large-width":1352,"large-height":719,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.31.02-AM.png","1536x1536-width":1352,"1536x1536-height":719,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.31.02-AM.png","2048x2048-width":1352,"2048x2048-height":719,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.31.02-AM-826x439.png","card_image-width":826,"card_image-height":439,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-02-at-10.31.02-AM.png","wide_image-width":1352,"wide_image-height":719}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/full\/YzPLVNG"},{"acf_fc_layout":"content","content":"<p>This looks much better.<\/p>\n<h2>Sequential example<\/h2>\n<p>Similarly, when mapping sequential data, such as corn yield as a percentage of harvested acres, simply paste the color values in the stops of the color visual variable.<\/p>\n<details>\n<summary>View the code<\/summary>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #333;font-weight: bold\">const<\/span> renderer = {\r\n  type: <span style=\"color: #d14\">\"simple\"<\/span>,\r\n  symbol: {\r\n    type: <span style=\"color: #d14\">\"simple-fill\"<\/span>,\r\n    color: [<span style=\"color: #008080\">0<\/span>,<span style=\"color: #008080\">0<\/span>,<span style=\"color: #008080\">0<\/span>,<span style=\"color: #008080\">0<\/span>],\r\n    outline: {\r\n      color: [<span style=\"color: #008080\">255<\/span>,<span style=\"color: #008080\">255<\/span>,<span style=\"color: #008080\">255<\/span>,<span style=\"color: #008080\">0.2<\/span>],\r\n      width: <span style=\"color: #008080\">0.5<\/span>\r\n    }\r\n  },\r\n  visualVariables: [{\r\n    type: <span style=\"color: #d14\">\"color\"<\/span>,\r\n    field: <span style=\"color: #d14\">\"M163_07\"<\/span>,  <span style=\"color: #998;font-style: italic\">\/\/ harvested corn<\/span>\r\n    normalizationField: <span style=\"color: #d14\">\"TOT_CROP_ACRES\"<\/span>,\r\n    legendOptions: {\r\n      title: <span style=\"color: #d14\">\"Corn yield as a percentage of harvested acres\"<\/span>\r\n    },\r\n    <span style=\"color: #998;font-style: italic\">\/\/ Orange 2 ramp<\/span>\r\n    stops: [\r\n      { value: <span style=\"color: #008080\">0.1<\/span>, color: <span style=\"color: #d14\">\"#fee6ce\"<\/span>, label: <span style=\"color: #d14\">\"&lt; 10%\"<\/span> },\r\n      { value: <span style=\"color: #008080\">0.4<\/span>, color: <span style=\"color: #d14\">\"#fdae6b\"<\/span> },\r\n      { value: <span style=\"color: #008080\">0.65<\/span>, color: <span style=\"color: #d14\">\"#e6550d\"<\/span>, label: <span style=\"color: #d14\">\"&gt;65%\"<\/span> }\r\n    ]\r\n  }]\r\n};\r\n\r\n<\/code><\/pre>\n<\/details>\n"},{"acf_fc_layout":"image","image":{"ID":694282,"id":694282,"title":"Screen Shot 2020-01-03 at 5.02.12 PM","filename":"Screen-Shot-2020-01-03-at-5.02.12-PM.png","filesize":202225,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.02.12-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\/screen-shot-2020-01-03-at-5-02-12-pm","alt":"Map of the United States counties colored by the percentage of harvested acres that yielded corn. Each county is colored using the Orange 2 color ramp.","author":"6561","description":"","caption":"","name":"screen-shot-2020-01-03-at-5-02-12-pm","status":"inherit","uploaded_to":694072,"date":"2020-01-04 01:02:29","modified":"2020-01-13 17:05:31","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1389,"height":698,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.02.12-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.02.12-PM.png","medium-width":464,"medium-height":233,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.02.12-PM.png","medium_large-width":768,"medium_large-height":386,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.02.12-PM.png","large-width":1389,"large-height":698,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.02.12-PM.png","1536x1536-width":1389,"1536x1536-height":698,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.02.12-PM.png","2048x2048-width":1389,"2048x2048-height":698,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.02.12-PM-826x415.png","card_image-width":826,"card_image-height":415,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.02.12-PM.png","wide_image-width":1389,"wide_image-height":698}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/full\/ExaLmWY"},{"acf_fc_layout":"content","content":"<p>You can make the visual tell a more complete story by adding a size variable to show total corn yield.<\/p>\n<details>\n<summary>View the code<\/summary>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #333;font-weight: bold\">const<\/span> renderer = {\r\n  type: <span style=\"color: #d14\">\"simple\"<\/span>,\r\n  symbol: {\r\n    type: <span style=\"color: #d14\">\"simple-marker\"<\/span>,\r\n    color: color ? color : [<span style=\"color: #008080\">0<\/span>,<span style=\"color: #008080\">0<\/span>,<span style=\"color: #008080\">0<\/span>,<span style=\"color: #008080\">0<\/span>],\r\n    outline: {\r\n      color: [<span style=\"color: #008080\">255<\/span>,<span style=\"color: #008080\">255<\/span>,<span style=\"color: #008080\">255<\/span>,<span style=\"color: #008080\">0.2<\/span>],\r\n      width: <span style=\"color: #008080\">0.5<\/span>\r\n    }\r\n  },\r\n  visualVariables: [{\r\n    type: <span style=\"color: #d14\">\"color\"<\/span>,\r\n    field: <span style=\"color: #d14\">\"M163_07\"<\/span>,  <span style=\"color: #998;font-style: italic\">\/\/ harvested corn<\/span>\r\n    normalizationField: <span style=\"color: #d14\">\"TOT_CROP_ACRES\"<\/span>,\r\n    legendOptions: {\r\n      title: <span style=\"color: #d14\">\"Corn yield as a percentage of harvested acres\"<\/span>\r\n    },\r\n    <span style=\"color: #998;font-style: italic\">\/\/ Orange 2 ramp<\/span>\r\n    stops: [\r\n      { value: <span style=\"color: #008080\">0.1<\/span>, color: <span style=\"color: #d14\">\"#fee6ce\"<\/span>, label: <span style=\"color: #d14\">\"&lt; 10%\"<\/span> },\r\n      { value: <span style=\"color: #008080\">0.4<\/span>, color: <span style=\"color: #d14\">\"#fdae6b\"<\/span> },\r\n      { value: <span style=\"color: #008080\">0.65<\/span>, color: <span style=\"color: #d14\">\"#e6550d\"<\/span>, label: <span style=\"color: #d14\">\"&gt;65%\"<\/span> }\r\n    ]\r\n  },\r\n  {\r\n    type: <span style=\"color: #d14\">\"size\"<\/span>,\r\n    field: <span style=\"color: #d14\">\"M163_07\"<\/span>,  <span style=\"color: #998;font-style: italic\">\/\/ harvested corn<\/span>\r\n    minSize: <span style=\"color: #d14\">\"4px\"<\/span>,\r\n    maxSize: <span style=\"color: #d14\">\"30px\"<\/span>,\r\n    minDataValue: <span style=\"color: #008080\">100<\/span>,\r\n    maxDataValue: <span style=\"color: #008080\">700000<\/span>\r\n  }]\r\n};\r\n\r\n<\/code><\/pre>\n<\/details>\n"},{"acf_fc_layout":"image","image":{"ID":694292,"id":694292,"title":"Screen Shot 2020-01-03 at 5.03.07 PM","filename":"Screen-Shot-2020-01-03-at-5.03.07-PM.png","filesize":178670,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.03.07-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\/screen-shot-2020-01-03-at-5-03-07-pm","alt":"Map of the United States counties colored by the percentage of harvested acres that yielded corn. Each county is colored using the Orange 2 color ramp and given an icon and size based on total corn yield.","author":"6561","description":"","caption":"","name":"screen-shot-2020-01-03-at-5-03-07-pm","status":"inherit","uploaded_to":694072,"date":"2020-01-04 01:03:11","modified":"2020-01-13 17:05:52","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1389,"height":678,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.03.07-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.03.07-PM.png","medium-width":464,"medium-height":226,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.03.07-PM.png","medium_large-width":768,"medium_large-height":375,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.03.07-PM.png","large-width":1389,"large-height":678,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.03.07-PM.png","1536x1536-width":1389,"1536x1536-height":678,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.03.07-PM.png","2048x2048-width":1389,"2048x2048-height":678,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.03.07-PM-826x403.png","card_image-width":826,"card_image-height":403,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-03-at-5.03.07-PM.png","wide_image-width":1389,"wide_image-height":678}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/full\/rNavmjg"},{"acf_fc_layout":"content","content":"<p>Of course, if you aren\u2019t completely happy with the colors in the ramp, you can tweak them to your liking since you have full control of the styling of your layers.<\/p>\n<h2>Query color ramps<\/h2>\n<p>Version 4.14 of the ArcGIS JS API added a new <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-smartMapping-symbology-support-colorRamps.html\">colorRamps<\/a> module making it easy to query these ramps. This module includes the following methods:<\/p>\n<ul>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-smartMapping-symbology-support-colorRamps.html#all\">all<\/a> \u2013 Returns all color ramps available in the API.<\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-smartMapping-symbology-support-colorRamps.html#byName\">byName<\/a> \u2013 Returns a color ramp matching a given name (e.g. &#8220;Orange 2&#8221;). These names are provided in the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/esri-color-ramps\/\">Esri color ramps<\/a> guide.<\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-smartMapping-symbology-support-colorRamps.html#byTag\">byTag<\/a> \u2013 Returns color ramps containing (and\/or excluding) a list of tags (e.g. &#8220;dark&#8221;, &#8220;reds&#8221;)<\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-smartMapping-symbology-support-colorRamps.html#names\">names<\/a> \u2013 Returns all color ramp names.<\/li>\n<\/ul>\n<p>These methods allow you to query for specific ramps for direct use in your apps. This is particularly useful for apps designed for allowing users to style layers.<\/p>\n<p>For example, I browsed through the color ramps and preselected several that I liked and added them to an app that allows the user to switch the colors in a sequential renderer. <\/p>\n<details>\n<summary>\nView the code<br \/>\n<\/summary>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #998;font-style: italic\">\/\/ Pre-selected ramps given to the user<\/span>\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> rampNames = [\r\n  <span style=\"color: #d14\">\"Orange 2\"<\/span>,\r\n  <span style=\"color: #d14\">\"Blue 6\"<\/span>,\r\n  <span style=\"color: #d14\">\"Green 4\"<\/span>,\r\n  <span style=\"color: #d14\">\"Pink 1\"<\/span>,\r\n  <span style=\"color: #d14\">\"Red 4\"<\/span>,\r\n  <span style=\"color: #d14\">\"Gray 1\"<\/span>,\r\n  <span style=\"color: #d14\">\"Purple 4\"<\/span>\r\n];\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> rampPicker = <span style=\"color: #0086b3\">document<\/span>.createElement(<span style=\"color: #d14\">\"div\"<\/span>);\r\nrampPicker.classList.add(<span style=\"color: #d14\">\"rampPicker\"<\/span>);\r\nrampPicker.innerHTML = <span style=\"color: #d14\">\"Select a ramp\"<\/span>\r\n\r\n<span style=\"color: #998;font-style: italic\">\/\/ get the colors associated with each ramp<\/span>\r\n<span style=\"color: #998;font-style: italic\">\/\/ and render a preview in the UI<\/span>\r\nrampNames.forEach(<span><span style=\"color: #333;font-weight: bold\">function<\/span>(<span>rampName<\/span>)<\/span>{\r\n  <span style=\"color: #333;font-weight: bold\">const<\/span> colorRamp = colorRamps.byName(rampName);\r\n  <span style=\"color: #333;font-weight: bold\">const<\/span> colors = colorRamp.colorsForClassBreaks[<span style=\"color: #008080\">2<\/span>].colors;\r\n\r\n  <span style=\"color: #333;font-weight: bold\">const<\/span> colorRampElement = symbolUtils.renderColorRampPreviewHTML(colors, {\r\n    align: <span style=\"color: #d14\">\"horizontal\"<\/span>,\r\n    width: <span style=\"color: #008080\">100<\/span>\r\n  });\r\n  <span style=\"color: #333;font-weight: bold\">const<\/span> colorRampElementContainer = <span style=\"color: #0086b3\">document<\/span>.createElement(<span style=\"color: #d14\">\"div\"<\/span>);\r\n  colorRampElementContainer.classList.add(<span style=\"color: #d14\">\"ramp\"<\/span>);\r\n\r\n  <span style=\"color: #998;font-style: italic\">\/\/ when the ramp preview element is clicked<\/span>\r\n  <span style=\"color: #998;font-style: italic\">\/\/ update the renderer with the colors in the ramp<\/span>\r\n  colorRampElementContainer.addEventListener(<span style=\"color: #d14\">\"click\"<\/span>, <span><span style=\"color: #333;font-weight: bold\">function<\/span>(<span><\/span>)<\/span>{\r\n    updateColorsInRenderer(colors);\r\n  });\r\n\r\n  colorRampElementContainer.appendChild(colorRampElement);\r\n  rampPicker.appendChild(colorRampElementContainer);\r\n});\r\n\r\n<span><span style=\"color: #333;font-weight: bold\">function<\/span> <span style=\"color: #900;font-weight: bold\">updateColorsInRenderer<\/span>(<span>colors<\/span>)<\/span>{\r\n  <span style=\"color: #333;font-weight: bold\">const<\/span> renderer = layer.renderer.clone();\r\n  <span style=\"color: #333;font-weight: bold\">const<\/span> colorVariable = renderer.visualVariables[<span style=\"color: #008080\">0<\/span>].clone();\r\n  colorVariable.stops.forEach(<span><span style=\"color: #333;font-weight: bold\">function<\/span>(<span>stop, index<\/span>)<\/span>{\r\n    stop.color = colors[index];\r\n  });\r\n  colorVariable.stops;\r\n  renderer.visualVariables = [ colorVariable ];\r\n  layer.renderer = renderer;\r\n}\r\n<\/code><\/pre>\n<\/details>\n"},{"acf_fc_layout":"storymap","title":"","description":"","static":false,"storymap_url":"<a href=\"https:\/\/codepen.io\/kekenes\/full\/oNgdYaB\">https:\/\/codepen.io\/kekenes\/full\/oNgdYaB<\/a>"},{"acf_fc_layout":"content","content":"<p>The app queries the color ramps and uses them as input to the<br \/>\n<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-symbols-support-symbolUtils.html#renderColorRampPreviewHTML\">renderColorRampPreviewHTML<\/a> method. This method renders a preview of the color ramp as either a continuous gradient, or as consecutive discrete colors.<\/p>\n<p>The app below demonstrates how to query for all ramp names, and render a preview as a gradient and as discrete colors.<\/p>\n<details>\n<summary>View the code<\/summary>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #333;font-weight: bold\">const<\/span> maxWidth = <span style=\"color: #008080\">300<\/span>;\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> rampsContainer = <span style=\"color: #0086b3\">document<\/span>.getElementById(<span style=\"color: #d14\">\"rampsContainer\"<\/span>);\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> colorRamp = colorRamps.byName(<span style=\"color: #d14\">\"Blue 6\"<\/span>);\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> continuousColors = colorRamp.colors;\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> discreteColors = colorRamp.colorsForClassBreaks;\r\n\r\ndiscreteColors.forEach(<span><span style=\"color: #333;font-weight: bold\">function<\/span>(<span>ramp<\/span>)<\/span>{\r\n  <span style=\"color: #998;font-style: italic\">\/\/ renders a color ramp discretely, each color in a square<\/span>\r\n  <span style=\"color: #333;font-weight: bold\">const<\/span> colorRampElement = symbolUtils.renderColorRampPreviewHTML(ramp.colors, {\r\n    align: <span style=\"color: #d14\">\"horizontal\"<\/span>,\r\n    gradient: <span style=\"color: #333;font-weight: 500\">false<\/span>,\r\n    width: maxWidth * (ramp.numClasses \/ <span style=\"color: #008080\">10<\/span>)\r\n  });\r\n\r\n  <span style=\"color: #333;font-weight: bold\">const<\/span> colorRampElementContainer = <span style=\"color: #0086b3\">document<\/span>.createElement(<span style=\"color: #d14\">\"div\"<\/span>);\r\n  colorRampElementContainer.classList.add(<span style=\"color: #d14\">\"ramp\"<\/span>);\r\n  colorRampElementContainer.appendChild(colorRampElement);\r\n  rampsContainer.appendChild(colorRampElementContainer);\r\n});\r\n\r\n<span style=\"color: #998;font-style: italic\">\/\/ renders a color ramp as a continuous gradient<\/span>\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> colorRampElement = symbolUtils.renderColorRampPreviewHTML(continuousColors, {\r\n  align: <span style=\"color: #d14\">\"horizontal\"<\/span>,\r\n  gradient: <span style=\"color: #333;font-weight: 500\">true<\/span>,\r\n  width: maxWidth\r\n});\r\n\r\n<span style=\"color: #333;font-weight: bold\">const<\/span> colorRampElementContainer = <span style=\"color: #0086b3\">document<\/span>.createElement(<span style=\"color: #d14\">\"div\"<\/span>);\r\ncolorRampElementContainer.classList.add(<span style=\"color: #d14\">\"ramp\"<\/span>);\r\n\r\ncolorRampElementContainer.appendChild(colorRampElement);\r\nrampsContainer.appendChild(colorRampElementContainer);\r\n<\/code><\/pre>\n<\/details>\n"},{"acf_fc_layout":"storymap","title":"","description":"","static":false,"storymap_url":"<a href=\"https:\/\/codepen.io\/kekenes\/full\/BayxpZE\">https:\/\/codepen.io\/kekenes\/full\/BayxpZE<\/a>"},{"acf_fc_layout":"content","content":"<h2>Visualization best practices<\/h2>\n<p>The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/visualization-best-practices\/\">Visualization best practices<\/a> page provides a guide about how to choose the most appropriate ramp based on the story you wish to tell.<\/p>\n<p>I encourage you to read through this page and bookmark it for future reference. It contains the information discussed in this post along with more helpful details about choosing the best ramp for your map<\/p>\n<h2>Smart Mapping<\/h2>\n<p>If you\u2019ve read <a href=\"https:\/\/www.esri.com\/arcgis-blog\/?s=#&amp;tag=smart-mapping&amp;products=js-api-arcgis\">some of my posts about Smart Mapping<\/a>, you may recognize some of these color ramps. The color ramps exposed in the Esri colors guide page are internally used by the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/visualization-overview\/#smart-mapping-apis\">Smart Mapping APIs<\/a>, which suggest color ramps appropriate for overlaying on top of a basemap.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":700422,"id":700422,"title":"Screen Shot 2020-01-10 at 3.31.06 PM","filename":"Screen-Shot-2020-01-10-at-3.31.06-PM.png","filesize":181078,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-10-at-3.31.06-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\/screen-shot-2020-01-10-at-3-31-06-pm","alt":"U.S. counties colored by the percentage of the population that lives in poverty. The colors used here also come from the Esri color ramps but were pre-selected in a smart mapping workflow.","author":"6561","description":"","caption":"Smart Mapping methods generate full renderers with scale-dependent outlines using the color ramps discussed in this post.","name":"screen-shot-2020-01-10-at-3-31-06-pm","status":"inherit","uploaded_to":694072,"date":"2020-01-10 23:31:19","modified":"2020-01-13 17:06:56","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1187,"height":699,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-10-at-3.31.06-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-10-at-3.31.06-PM.png","medium-width":443,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-10-at-3.31.06-PM.png","medium_large-width":768,"medium_large-height":452,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-10-at-3.31.06-PM.png","large-width":1187,"large-height":699,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-10-at-3.31.06-PM.png","1536x1536-width":1187,"1536x1536-height":699,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-10-at-3.31.06-PM.png","2048x2048-width":1187,"2048x2048-height":699,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-10-at-3.31.06-PM-790x465.png","card_image-width":790,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-10-at-3.31.06-PM.png","wide_image-width":1187,"wide_image-height":699}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-sm-color\/index.html"},{"acf_fc_layout":"content","content":"<p>While Smart mapping provides excellent tools and APIs for building powerful mapping applications, such as the new Map Viewer Beta, it isn\u2019t intended to be used inside every app for styling layers.<\/p>\n<p>That&#8217;s where the new guides and resources come into play. They make the color choices available to you in a more transparent way, without having to call any methods. Plus, the Smart Mapping methods create full renderers, including symbols with suggested outline widths and colors. When all you need is a ramp of colors, this guide will likely be your best option.<\/p>\n<h2>We welcome your feedback<\/h2>\n<p>Since these pages are brand new, we&#8217;re seeking your feedback for relevant content and UX\/UI improvements. If you have any requests for enhancements, notice bugs, or have issues with the UX, please respond using the <a href=\"mailto:js_feedback@esri.com\">email feedback link<\/a> at the bottom of the guide page. You can also create a more public post on <a href=\"https:\/\/community.esri.com\/community\/developers\/web-developers\/arcgis-api-for-javascript\">GeoNet<\/a> where collaboration from Esri staff and fellow users can help improve the content. We&#8217;re already aware of some room for improvement and will work to roll those improvements out as soon as possible.<\/p>\n<p>Thanks for reading!<\/p>\n"}],"authors":[{"ID":6561,"user_firstname":"Kristian","user_lastname":"Ekenes","nickname":"Kristian Ekenes","user_nicename":"kekenes","display_name":"Kristian Ekenes","user_email":"KEkenes@esri.com","user_url":"https:\/\/github.com\/ekenes","user_registered":"2018-03-02 00:18:32","user_description":"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"related_articles":[{"ID":659972,"post_author":"6751","post_date":"2019-11-19 19:55:59","post_date_gmt":"2019-11-20 03:55:59","post_content":"","post_title":"New color ramps in Map Viewer","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"new-color-ramps-in-map-viewer-beta","to_ping":"","pinged":"","post_modified":"2024-06-20 09:45:45","post_modified_gmt":"2024-06-20 16:45:45","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=659972","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":492182,"post_author":"7121","post_date":"2019-04-22 08:00:19","post_date_gmt":"2019-04-22 15:00:19","post_content":"","post_title":"Smart Choices for Basemaps and Color Ramps When Mapping Demographic Data","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"smart-choices-for-basemaps-and-color-ramps-when-mapping-demographic-data","to_ping":"","pinged":"","post_modified":"2020-01-03 09:39:24","post_modified_gmt":"2020-01-03 17:39:24","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=492182","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":250552,"post_author":"4161","post_date":"2025-09-22 14:09:32","post_date_gmt":"2025-09-22 21:09:32","post_content":"","post_title":"Better Breaks Define Your Thematic Map\u2019s Purpose","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"better-breaks-define-your-thematic-maps-purpose","to_ping":"","pinged":"","post_modified":"2025-09-22 17:10:36","post_modified_gmt":"2025-09-23 00:10:36","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=250552","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/Card-3.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/ColorRampBanner-2.png"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Better colors for better mapping<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Better colors for better mapping\" \/>\n<meta property=\"og:description\" content=\"The Esri color ramps and Visualization Best Practices guide pages assist you in creating better maps using better combinations of colors.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-20T19:16:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2019\/11\/ColorRampBanner-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"Better colors for better mapping\",\"datePublished\":\"2020-01-14T16:30:12+00:00\",\"dateModified\":\"2024-06-20T19:16:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"color\",\"data visualization\",\"smart mapping\",\"whats new december 2019\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\",\"name\":\"Better colors for better mapping\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2020-01-14T16:30:12+00:00\",\"dateModified\":\"2024-06-20T19:16:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Better colors for better mapping\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\",\"name\":\"Kristian Ekenes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png\",\"caption\":\"Kristian Ekenes\"},\"description\":\"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.\",\"sameAs\":[\"https:\/\/github.com\/ekenes\",\"https:\/\/www.linkedin.com\/in\/kristian-ekenes\/\",\"https:\/\/x.com\/kekenes\"],\"gender\":\"male\",\"jobTitle\":\"Principal Product Engineer\",\"worksFor\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Better colors for better mapping","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping","og_locale":"en_US","og_type":"article","og_title":"Better colors for better mapping","og_description":"The Esri color ramps and Visualization Best Practices guide pages assist you in creating better maps using better combinations of colors.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-06-20T19:16:24+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2019\/11\/ColorRampBanner-2.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@ESRI","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"Better colors for better mapping","datePublished":"2020-01-14T16:30:12+00:00","dateModified":"2024-06-20T19:16:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping"},"wordCount":5,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["color","data visualization","smart mapping","whats new december 2019"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping","name":"Better colors for better mapping","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2020-01-14T16:30:12+00:00","dateModified":"2024-06-20T19:16:24+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/better-colors-for-better-mapping#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Better colors for better mapping"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b","name":"Kristian Ekenes","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png","caption":"Kristian Ekenes"},"description":"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.","sameAs":["https:\/\/github.com\/ekenes","https:\/\/www.linkedin.com\/in\/kristian-ekenes\/","https:\/\/x.com\/kekenes"],"gender":"male","jobTitle":"Principal Product Engineer","worksFor":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes"}]}},"text_date":"January 14, 2020","author_name":"Kristian Ekenes","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/11\/ColorRampBanner-2.png","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":30791,"name":"color","slug":"color","term_group":0,"term_taxonomy_id":30791,"taxonomy":"post_tag","description":"","parent":0,"count":31,"filter":"raw"},{"term_id":30111,"name":"data visualization","slug":"data-visualization","term_group":0,"term_taxonomy_id":30111,"taxonomy":"post_tag","description":"","parent":0,"count":97,"filter":"raw"},{"term_id":24581,"name":"smart mapping","slug":"smart-mapping","term_group":0,"term_taxonomy_id":24581,"taxonomy":"post_tag","description":"","parent":0,"count":81,"filter":"raw"},{"term_id":515732,"name":"whats new december 2019","slug":"whats-new-december-2019","term_group":0,"term_taxonomy_id":515732,"taxonomy":"post_tag","description":"","parent":0,"count":15,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2696,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":363,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":765,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/694072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/6561"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=694072"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/694072\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=694072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=694072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=694072"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=694072"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=694072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}