{"id":712232,"date":"2020-01-29T08:30:02","date_gmt":"2020-01-29T16:30:02","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=712232"},"modified":"2020-01-28T17:15:57","modified_gmt":"2020-01-29T01:15:57","slug":"how-and-why-to-adjust-size-by-scale-in-web-maps","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps","title":{"rendered":"How and why to adjust symbol size by scale in web maps"},"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":[26451,30111,28531,34771,24581],"industry":[],"product":[36831,36601],"class_list":["post-712232","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-cartography","tag-data-visualization","tag-renderer","tag-scale","tag-smart-mapping","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Though subtle, icon and outline sizes varied by scale will turn a mediocre visualization into a great one.","flexible_content":[{"acf_fc_layout":"content","content":"

When it comes to cartography, few things make me cringe more than overly prominent outlines that hide patterns, and icons that are either too small to see, or too large to take seriously.<\/p>\n

With web cartography in particular, where maps often span multiple scale levels, finding the right outline widths and icon sizes can feel impossible. You may find sizes that work at one scale, but zooming in or out can quickly turn good cartographic choices into mediocre ones.<\/p>\n

The ArcGIS API for JavaScript<\/a> (ArcGIS JS API) allows developers to define renderers<\/a> that work well across multiple scales. These APIs give you full control of icon, polyline, and outline sizes at specific scales, also while providing helper methods when you don\u2019t know where to start.<\/p>\n

The problem with static icon sizes<\/h2>\n

One icon size usually doesn’t look good at all scales. This is especially true for dense layers. For example, the points in the map below look good with a size of 10px at a national scale. <\/p>\n

Images have been scaled down from their original sizes. Click each image to see the icons at their true sizes.<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":712292,"id":712292,"title":"uk-weather-10px","filename":"uk-weather-10px.png","filesize":68993,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-10px.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\/uk-weather-10px","alt":"UK weather stations. Each point is clearly visible at 10px.","author":"6561","description":"","caption":"UK weather stations. Each point is 10px.","name":"uk-weather-10px","status":"inherit","uploaded_to":712232,"date":"2020-01-26 08:17:50","modified":"2020-01-29 00:02:49","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":1662,"height":1538,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-10px-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-10px.png","medium-width":282,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-10px.png","medium_large-width":768,"medium_large-height":711,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-10px.png","large-width":1167,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-10px-1536x1421.png","1536x1536-width":1536,"1536x1536-height":1421,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-10px.png","2048x2048-width":1662,"2048x2048-height":1538,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-10px-502x465.png","card_image-width":502,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-10px-1167x1080.png","wide_image-width":1167,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-10px.png"},{"acf_fc_layout":"content","content":"

But when zoomed out to a worldwide extent, 10px appears too big. The large icon size obscures the underlying data, potentially misrepresenting its density.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":712302,"id":712302,"title":"world-weather-10px","filename":"world-weather-10px-scaled.png","filesize":1760489,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-10px-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\/world-weather-10px","alt":"Worldwide weather stations. At 10px each, the points appear too cluttered.","author":"6561","description":"","caption":"Worldwide weather stations. Each point is 10px.","name":"world-weather-10px","status":"inherit","uploaded_to":712232,"date":"2020-01-26 08:18:00","modified":"2020-01-29 00:03:01","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":2560,"height":1491,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-10px-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-10px-scaled.png","medium-width":448,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-10px-scaled.png","medium_large-width":768,"medium_large-height":447,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-10px-scaled.png","large-width":1854,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-10px-1536x895.png","1536x1536-width":1536,"1536x1536-height":895,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-10px-2048x1193.png","2048x2048-width":2048,"2048x2048-height":1193,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-10px-798x465.png","card_image-width":798,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-10px-1854x1080.png","wide_image-width":1854,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-10px-scaled.png"},{"acf_fc_layout":"content","content":"

With a smaller sized point symbol, many of the issues listed above can be reduced or eliminated.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":712322,"id":712322,"title":"world-weather-3px","filename":"world-weather-3px-scaled.png","filesize":2006438,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-3px-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\/world-weather-3px","alt":"Worldwide weather stations. The visual looks much better at this scale when points are 3px.","author":"6561","description":"","caption":"Worldwide weather stations. Each point is 3px.","name":"world-weather-3px","status":"inherit","uploaded_to":712232,"date":"2020-01-26 08:18:16","modified":"2020-01-29 00:03:17","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":2560,"height":1412,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-3px-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-3px-scaled.png","medium-width":464,"medium-height":256,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-3px-scaled.png","medium_large-width":768,"medium_large-height":424,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-3px-scaled.png","large-width":1920,"large-height":1059,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-3px-1536x847.png","1536x1536-width":1536,"1536x1536-height":847,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-3px-2048x1129.png","2048x2048-width":2048,"2048x2048-height":1129,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-3px-826x456.png","card_image-width":826,"card_image-height":456,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-3px-1920x1059.png","wide_image-width":1920,"wide_image-height":1059}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/world-weather-3px-scaled.png"},{"acf_fc_layout":"content","content":"

But 3px makes the points almost impossible to see when you zoom to regional scales or beyond.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":712312,"id":712312,"title":"uk-weather-3px","filename":"uk-weather-3px.png","filesize":49987,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-3px.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\/uk-weather-3px","alt":"UK weather stations. The points are nearly impossible to discern when they are 3px at this scale.","author":"6561","description":"","caption":"UK weather stations. Each point is 3x.","name":"uk-weather-3px","status":"inherit","uploaded_to":712232,"date":"2020-01-26 08:18:10","modified":"2020-01-29 00:03:27","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":1624,"height":1462,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-3px-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-3px.png","medium-width":290,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-3px.png","medium_large-width":768,"medium_large-height":691,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-3px.png","large-width":1200,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-3px-1536x1383.png","1536x1536-width":1536,"1536x1536-height":1383,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-3px.png","2048x2048-width":1624,"2048x2048-height":1462,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-3px-517x465.png","card_image-width":517,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-3px-1200x1080.png","wide_image-width":1200,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/uk-weather-3px.png"},{"acf_fc_layout":"content","content":"

Dynamic size by scale<\/h2>\n

By using a size visual variable<\/a> and a very simple Arcade expression<\/a>, you can dynamically change the size of these points based on scale.<\/p>\n

The visualization profile<\/a> in Arcade has access to the view\u2019s scale via the $view.scale<\/code> global variable. In fact, that\u2019s all you need for your expression! Just map the scale values with specific sizes in the stops<\/a> property of the size variable<\/a>.<\/p>\n

renderer.visualVariables = [\r\n  {\r\n    type: \"size\"<\/span>,\r\n    valueExpression: \"$view.scale\"<\/span>,\r\n    stops: [\r\n      {\r\n        size: 7.5<\/span>,\r\n        value: 1155581<\/span>\r\n      },\r\n      {\r\n        size: 6<\/span>,\r\n        value: 9244648<\/span>\r\n      },\r\n      {\r\n        size: 3<\/span>,\r\n        value: 73957190<\/span>\r\n      },\r\n      {\r\n        size: 1.5<\/span>,\r\n        value: 591657527<\/span>\r\n      }\r\n    ]\r\n  }\r\n];\r\n<\/code><\/pre>\n
Now you get the best of both worlds: smaller icons at small scales (i.e. zoomed out) and larger icons at large scales (i.e. zoomed in).<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":712402,"id":712402,"title":"weather-side-by-side","filename":"weather-side-by-side.png","filesize":94342,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/weather-side-by-side.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\/weather-side-by-side","alt":"A size variable can control icon sizes at various scales. The zoomed out view on the left shows smaller icons, while the zoomed in view on the right shows larger icons.","author":"6561","description":"","caption":"A size variable can control icon sizes at various scales. The zoomed out view on the left shows smaller icons, while the zoomed in view on the right shows larger icons.","name":"weather-side-by-side","status":"inherit","uploaded_to":712232,"date":"2020-01-26 08:23:52","modified":"2020-01-26 08:27:17","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":1412,"height":640,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/weather-side-by-side-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/weather-side-by-side.png","medium-width":464,"medium-height":210,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/weather-side-by-side.png","medium_large-width":768,"medium_large-height":348,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/weather-side-by-side.png","large-width":1412,"large-height":640,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/weather-side-by-side.png","1536x1536-width":1412,"1536x1536-height":640,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/weather-side-by-side.png","2048x2048-width":1412,"2048x2048-height":640,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/weather-side-by-side-826x374.png","card_image-width":826,"card_image-height":374,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/weather-side-by-side.png","wide_image-width":1412,"wide_image-height":640}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/weather-side-by-side.png"},{"acf_fc_layout":"content","content":"
Click the >><\/code> icon to view the generated size variable and effective size for the given scale. <\/em><\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"","static":false,"storymap_url":"https:\/\/codepen.io\/kekenes\/full\/JjoVWpz<\/a>"},{"acf_fc_layout":"content","content":"
This same approach also works for polyline data. The following app<\/a> makes roads in Florida thicker as you zoom in, and thinner as you zoom out.<\/p>\n
Click the >><\/code> icon to view the generated size variable and effective size for the given scale. <\/em><\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"","static":false,"storymap_url":"https:\/\/codepen.io\/kekenes\/full\/abzxJKX<\/a>"},{"acf_fc_layout":"content","content":"
A little help from Smart Mapping<\/h2>\n
The SizeVariable<\/a> API is great because it gives you full control over configuring icon size and line width at any scale level. But you may ask “How do I know which scales matter, and the size range to use?”<\/p>\n
That’s where Smart Mapping<\/a> in the ArcGIS JS API comes in to play. When you use any createRenderer<\/a> method in the esri\/renderers\/smartMapping\/creators<\/a> modules, you can use the sizeOptimizationEnabled<\/code> parameter to generate a suggested size variable that adjusts icon and line sizes by scale. This is available in multiple methods, but for the purposes of this blog, I\u2019ll use the createRenderer<\/code> method in the locationRendererCreator<\/a> module.<\/p>\n
\nExpand\/collapse the code<\/summary>\n
locationRendererCreator\r\n  .createRenderer({\r\n    layer: layer,\r\n    view: view,\r\n    \/\/ generates a Size Variable that<\/span>\r\n    \/\/ adjusts symbol size by scale<\/span>\r\n    sizeOptimizationEnabled: true<\/span>\r\n  })\r\n  .then(function<\/span>(rendererResponse<\/span>) <\/span>{\r\n    \/\/ the renderer contains a size variable with stops<\/span>\r\n    \/\/ mapping icon sizes to scale values<\/span>\r\n    layer.renderer = rendererResponse.renderer;\r\n\r\n    \/\/ Or you could reuse your existing<\/span>\r\n    \/\/ renderer and set the size variable<\/span>\r\n    \/\/ accordingly ...<\/span>\r\n\r\n    const<\/span> existingRenderer = layer.renderer.clone();\r\n    const<\/span> existingVariables = existingRenderer.visualVariables;\r\n    const<\/span> scaleVariables = rendererResponse.renderer.visualVariables\r\n      .filter(function<\/span>(vv<\/span>)<\/span>{\r\n        return<\/span> vv.valueExpression && vv.valueExpression === \"$view.scale\"<\/span>;\r\n      });\r\n    existingRenderer.visualVariables = existingVariables.concat(scaleVariables);\r\n\r\n    layer.renderer = existingRenderer;\r\n  })\r\n  .catch(function<\/span>(error<\/span>) <\/span>{\r\n    console<\/span>.error(error);\r\n  });\r\n<\/code><\/pre>\n<\/details>\n
Once you have the variable, I suggest you copy it and use it directly in the app, so you can avoid making duplicate calls to the Smart Mapping methods every time the app loads.<\/p>\n
Graduated symbols by scale<\/h2>\n
You can even optimize visualizations of data-driven continuous size<\/a> (aka graduated symbols) by scale. This will cause the entire range of symbols to grow in size as you zoom in, and shrink as you zoom out. <\/p>\n
We\u2019ll use this example of traffic count data<\/a> in a polyline layer of Florida highways, though this principle can also be applied to point layers and polygon centroids.<\/p>\n
Note the size range at this scale looks pretty good.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":712422,"id":712422,"title":"fl-orlando","filename":"fl-orlando.png","filesize":588330,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-orlando.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\/fl-orlando","alt":"Annual average daily traffic on Florida highways. Thicker lines indicate heavier traffic.","author":"6561","description":"","caption":"Annual average daily traffic on Florida highways. Thicker lines indicate heavier traffic. ","name":"fl-orlando","status":"inherit","uploaded_to":712232,"date":"2020-01-26 08:29:48","modified":"2020-01-26 08:32: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":2060,"height":1428,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-orlando-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-orlando.png","medium-width":377,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-orlando.png","medium_large-width":768,"medium_large-height":532,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-orlando.png","large-width":1558,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-orlando-1536x1065.png","1536x1536-width":1536,"1536x1536-height":1065,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-orlando-2048x1420.png","2048x2048-width":2048,"2048x2048-height":1420,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-orlando-671x465.png","card_image-width":671,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-orlando-1558x1080.png","wide_image-width":1558,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/full\/GRgLWYZ"},{"acf_fc_layout":"content","content":"
As you zoom in, the width of each highway increases (note the difference in the map and legend between this image and the previous one).<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":712412,"id":712412,"title":"fl-zoomed-in","filename":"fl-zoomed-in.png","filesize":492486,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-zoomed-in.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\/fl-zoomed-in","alt":"Annual average daily traffic on Florida highways. Thicker lines indicate heavier traffic. The thickness of each line grows as you zoom in.","author":"6561","description":"","caption":"Annual average daily traffic on Florida highways. Thicker lines indicate heavier traffic. The thickness of each line grows as you zoom in.","name":"fl-zoomed-in","status":"inherit","uploaded_to":712232,"date":"2020-01-26 08:28:06","modified":"2020-01-26 08:31: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":2052,"height":1442,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-zoomed-in-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-zoomed-in.png","medium-width":371,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-zoomed-in.png","medium_large-width":768,"medium_large-height":540,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-zoomed-in.png","large-width":1537,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-zoomed-in-1536x1079.png","1536x1536-width":1536,"1536x1536-height":1079,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-zoomed-in-2048x1439.png","2048x2048-width":2048,"2048x2048-height":1439,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-zoomed-in-662x465.png","card_image-width":662,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-zoomed-in-1537x1080.png","wide_image-width":1537,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-zoomed-in.png"},{"acf_fc_layout":"content","content":"
And as you zoom out, the sizes shrink.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":712332,"id":712332,"title":"fl-size-range-state","filename":"fl-size-range-state.png","filesize":307223,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\/fl-size-range-state","alt":"Annual average daily traffic on Florida highways. Thicker lines indicate heavier traffic. The thickness of each line shrinks as you zoom out.","author":"6561","description":"","caption":"Annual average daily traffic on Florida highways. Thicker lines indicate heavier traffic. The thickness of each line shrinks as you zoom out.","name":"fl-size-range-state","status":"inherit","uploaded_to":712232,"date":"2020-01-26 08:18:30","modified":"2020-01-26 08:32:32","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":1774,"height":1382,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state.png","medium-width":335,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state.png","medium_large-width":768,"medium_large-height":598,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state.png","large-width":1386,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state-1536x1197.png","1536x1536-width":1536,"1536x1536-height":1197,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state.png","2048x2048-width":1774,"2048x2048-height":1382,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state-597x465.png","card_image-width":597,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state-1386x1080.png","wide_image-width":1386,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state.png"},{"acf_fc_layout":"content","content":"
Though it becomes more difficult to distinguish the varying size range as you zoom out, it\u2019s better than the alternative \u2013 bloated static sizes that are a bit more difficult to interpret in dense areas.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":712342,"id":712342,"title":"fl-size-range-state-static","filename":"fl-size-range-state-static.png","filesize":301621,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state-static.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\/fl-size-range-state-static","alt":"Annual average daily traffic on Florida highways. This line thickness works better when zoomed in, but degrades when zoomed out.","author":"6561","description":"","caption":"Annual average daily traffic on Florida highways. This line thickness works better when zoomed in, but degrades when zoomed out.","name":"fl-size-range-state-static","status":"inherit","uploaded_to":712232,"date":"2020-01-26 08:18:42","modified":"2020-01-29 00:01:40","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":1778,"height":1374,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state-static-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state-static.png","medium-width":338,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state-static.png","medium_large-width":768,"medium_large-height":593,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state-static.png","large-width":1398,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state-static-1536x1187.png","1536x1536-width":1536,"1536x1536-height":1187,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state-static.png","2048x2048-width":1778,"2048x2048-height":1374,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state-static-602x465.png","card_image-width":602,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state-static-1398x1080.png","wide_image-width":1398,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/fl-size-range-state-static.png"},{"acf_fc_layout":"content","content":"
The solution to make this work calls for a more complicated size variable. The size variable must reference an attribute field<\/a> or Arcade expression<\/a>, with two additional size variables (like the one described above) referenced by the minSize<\/a> and maxSize<\/a> properties. <\/p>\n
renderer.visualVariables = [\r\n  {\r\n    type: \"size\"<\/span>,\r\n    \/\/ Feature size depends on<\/span>\r\n    \/\/ the value of the AADT field<\/span>\r\n    field: \"AADT\"<\/span>,\r\n    \/\/ Features with this value and<\/span>\r\n    \/\/ higher in AADT will be given<\/span>\r\n    \/\/ the max size<\/span>\r\n    maxDataValue: 299000<\/span>,\r\n    \/\/ The max size will vary<\/span>\r\n    \/\/ based on the view scale<\/span>\r\n    maxSize: {\r\n      type: \"size\"<\/span>,\r\n      valueExpression: \"$view.scale\"<\/span>,\r\n      stops: [\r\n        {\r\n          size: 24<\/span>,\r\n          value: 9027.977411<\/span>\r\n        },\r\n        {\r\n          size: 13.5<\/span>,\r\n          value: 72223.819286<\/span>\r\n        },\r\n        {\r\n          size: 9<\/span>,\r\n          value: 577790.554289<\/span>\r\n        },\r\n        {\r\n          size: 4.5<\/span>,\r\n          value: 4622324.434309<\/span>\r\n        }\r\n      ]\r\n    },\r\n    \/\/ Features with this value and<\/span>\r\n    \/\/ lower in AADT will be given<\/span>\r\n    \/\/ the min size<\/span>\r\n    minDataValue: 0<\/span>,\r\n    \/\/ The min size will vary<\/span>\r\n    \/\/ based on the view scale<\/span>\r\n    minSize: {\r\n      type: \"size\"<\/span>,\r\n      valueExpression: \"$view.scale\"<\/span>,\r\n      stops: [\r\n        {\r\n          size: 1.5<\/span>,\r\n          value: 9027.977411<\/span>\r\n        },\r\n        {\r\n          size: 0.75<\/span>,\r\n          value: 72223.819286<\/span>\r\n        },\r\n        {\r\n          size: 0.5625<\/span>,\r\n          value: 577790.554289<\/span>\r\n        },\r\n        {\r\n          size: 0.375<\/span>,\r\n          value: 4622324.434309<\/span>\r\n        }\r\n      ]\r\n    }\r\n  }\r\n];\r\n\r\n<\/code><\/pre>\n
While this variable is more complicated to create, the sizeRendererCreator.createContinuousRenderer<\/a> method has you covered. You can generate a size variable to start with and customize it later in the development process.<\/p>\n
sizeRendererCreator\r\n  .createRenderer({\r\n    layer: layer,\r\n    view: view,\r\n    field: \"AADT\"<\/span>,\r\n    \/\/ generates a Size Variable that<\/span>\r\n    \/\/ adjusts symbol size by scale<\/span>\r\n    sizeOptimizationEnabled: true<\/span>\r\n  })\r\n  .then(function<\/span>(rendererResponse<\/span>) <\/span>{\r\n    \/\/ the renderer contains a size variable with stops<\/span>\r\n    \/\/ mapping icon sizes to scale values<\/span>\r\n    layer.renderer = rendererResponse.renderer;\r\n  })\r\n  .catch(function<\/span>(error<\/span>) <\/span>{\r\n    console<\/span>.error(error);\r\n  });\r\n<\/code><\/pre>\n
Outlines<\/h2>\n
Overly thick outlines probably make me cringe more than any other cartographic fail. Yet, outlines can be so hard to get right when multiple scales are involved. <\/p>\n
For example, the image below shows outlines that are so thick they completely obscure the fill color of small polygons in the downtown Houston area.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":712392,"id":712392,"title":"houston-zoomed-out-thick","filename":"houston-zoomed-out-thick.png","filesize":472343,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-zoomed-out-thick.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\/houston-zoomed-out-thick","alt":"Vacant housing in the Houston Area. Outlines are so thick you can't see the fill color in high density areas.","author":"6561","description":"","caption":"Vacant housing in the Houston Area. Outlines are so thick you can't see the fill color in high density areas.","name":"houston-zoomed-out-thick","status":"inherit","uploaded_to":712232,"date":"2020-01-26 08:19:24","modified":"2020-01-27 19:03: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":1978,"height":1432,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-zoomed-out-thick-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-zoomed-out-thick.png","medium-width":361,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-zoomed-out-thick.png","medium_large-width":768,"medium_large-height":556,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-zoomed-out-thick.png","large-width":1492,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-zoomed-out-thick-1536x1112.png","1536x1536-width":1536,"1536x1536-height":1112,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-zoomed-out-thick.png","2048x2048-width":1978,"2048x2048-height":1432,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-zoomed-out-thick-642x465.png","card_image-width":642,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-zoomed-out-thick-1492x1080.png","wide_image-width":1492,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/full\/yLyrMGj"},{"acf_fc_layout":"content","content":"
That outline choice is clearly unacceptable. But if you zoom to a very large scale, that outline choice may actually work.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":712362,"id":712362,"title":"houston-outlines-static","filename":"houston-outlines-static.png","filesize":143750,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-static.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\/houston-outlines-static","alt":"Vacant housing in the Houston Area. While thick outlines don't work well at small scales, they can be effective at large scales.","author":"6561","description":"","caption":"Vacant housing in the Houston Area. While thick outlines don't work well at small scales, they can be effective at large scales.","name":"houston-outlines-static","status":"inherit","uploaded_to":712232,"date":"2020-01-26 08:19:02","modified":"2020-01-27 19:03:55","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":2058,"height":1466,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-static-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-static.png","medium-width":366,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-static.png","medium_large-width":768,"medium_large-height":547,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-static.png","large-width":1516,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-static-1536x1094.png","1536x1536-width":1536,"1536x1536-height":1094,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-static-2048x1459.png","2048x2048-width":2048,"2048x2048-height":1459,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-static-653x465.png","card_image-width":653,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-static-1516x1080.png","wide_image-width":1516,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
That’s why the relatively common solution of removing outlines altogether may not be the best decision. It can cause confusion for the map reader at large scales because neighboring features with the same color may appear to be a single unified feature.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":712432,"id":712432,"title":"Screen Shot 2020-01-26 at 12.38.40 AM","filename":"Screen-Shot-2020-01-26-at-12.38.40-AM-scaled.png","filesize":1715002,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-26-at-12.38.40-AM-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\/screen-shot-2020-01-26-at-12-38-40-am","alt":"Removing outlines may be appropriate at small scales, but that may cause confusion at large scales where features of the same color border each other.","author":"6561","description":"","caption":"Removing outlines may be appropriate at small scales, but that may cause confusion at large scales where neighboring features of the same color appear to be a single polygon.","name":"screen-shot-2020-01-26-at-12-38-40-am","status":"inherit","uploaded_to":712232,"date":"2020-01-26 08:39:17","modified":"2020-01-27 17:51:13","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":2560,"height":958,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-26-at-12.38.40-AM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-26-at-12.38.40-AM-scaled.png","medium-width":464,"medium-height":174,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-26-at-12.38.40-AM-scaled.png","medium_large-width":768,"medium_large-height":287,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-26-at-12.38.40-AM-scaled.png","large-width":1920,"large-height":719,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-26-at-12.38.40-AM-1536x575.png","1536x1536-width":1536,"1536x1536-height":575,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-26-at-12.38.40-AM-2048x766.png","2048x2048-width":2048,"2048x2048-height":766,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-26-at-12.38.40-AM-826x309.png","card_image-width":826,"card_image-height":309,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/Screen-Shot-2020-01-26-at-12.38.40-AM-1920x718.png","wide_image-width":1920,"wide_image-height":718}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
Using the same pattern established earlier with the size variable, you can adjust outline width by scale simply by returning the view scale in an Arcade expression and mapping scale values to size stops. The only difference is that you must also set the target<\/a> property to outline<\/code>. That way the renderer knows the variable should apply to the outline.<\/p>\n
renderer.visualVariables = [\r\n  {\r\n    type: \"size\"<\/span>,\r\n    valueExpression: \"$view.scale\"<\/span>,\r\n    target: \"outline\"<\/span>,\r\n    stops: [\r\n      {\r\n        size: 2<\/span>,\r\n        value: 56187<\/span>\r\n      },\r\n      {\r\n        size: 1<\/span>,\r\n        value: 175583<\/span>\r\n      },\r\n      {\r\n        size: 0.5<\/span>,\r\n        value: 702332<\/span>\r\n      },\r\n      {\r\n        size: 0<\/span>,\r\n        value: 1404664<\/span>\r\n      }\r\n    ]\r\n  }\r\n];\r\n<\/code><\/pre>\n
Now you see outline widths shrink at small scales.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":712352,"id":712352,"title":"houston-outlines-dynamic-thin","filename":"houston-outlines-dynamic-thin.png","filesize":331959,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic-thin.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\/houston-outlines-dynamic-thin","alt":"Adding a size variable targeting polygon outlines makes it easier to see fill colors in smaller polygons at small scales.","author":"6561","description":"","caption":"Adding a size variable targeting polygon outlines makes it easier to see fill colors in smaller polygons at small scales.","name":"houston-outlines-dynamic-thin","status":"inherit","uploaded_to":712232,"date":"2020-01-26 08:18:52","modified":"2020-01-27 17:57: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":2084,"height":1420,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic-thin-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic-thin.png","medium-width":383,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic-thin.png","medium_large-width":768,"medium_large-height":523,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic-thin.png","large-width":1585,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic-thin-1536x1047.png","1536x1536-width":1536,"1536x1536-height":1047,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic-thin-2048x1395.png","2048x2048-width":2048,"2048x2048-height":1395,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic-thin-682x465.png","card_image-width":682,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic-thin-1585x1080.png","wide_image-width":1585,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/full\/yLyrMGj"},{"acf_fc_layout":"content","content":"
And grow at larger scales.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":712372,"id":712372,"title":"houston-outlines-dynamic","filename":"houston-outlines-dynamic.png","filesize":103645,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\/houston-outlines-dynamic","alt":"","author":"6561","description":"","caption":"At larger scales, polygon outlines will be thicker with some added transparency. This makes the outline visible, but not too prominent.","name":"houston-outlines-dynamic","status":"inherit","uploaded_to":712232,"date":"2020-01-26 08:19:11","modified":"2020-01-27 17:57:03","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":2062,"height":1474,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic.png","medium-width":365,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic.png","medium_large-width":768,"medium_large-height":549,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic.png","large-width":1511,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic-1536x1098.png","1536x1536-width":1536,"1536x1536-height":1098,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic-2048x1464.png","2048x2048-width":2048,"2048x2048-height":1464,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic-650x465.png","card_image-width":650,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/houston-outlines-dynamic-1511x1080.png","wide_image-width":1511,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/full\/yLyrMGj"},{"acf_fc_layout":"content","content":"
The same Smart Mapping methods mentioned above also have an outlineOptimizationEnabled<\/code> parameter that when set to true<\/code> generates this variable for you so you don\u2019t have to worry about arbitrary scale values.<\/p>\n
locationRendererCreator\r\n  .createContinuousRenderer({\r\n    layer: layer,\r\n    view: view,\r\n    outlineOptimizationEnabled: true<\/span>\r\n  })\r\n  .then(function<\/span>(rendererResponse<\/span>) <\/span>{\r\n    \/\/ the renderer contains a size variable with stops<\/span>\r\n    \/\/ mapping polygon outline widths to scale values<\/span>\r\n    const<\/span> renderer = rendererResponse.renderer;\r\n    layer.renderer = renderer;\r\n  })\r\n  .catch(function<\/span>(error<\/span>) <\/span>{\r\n    console<\/span>.error(error);\r\n  });\r\n\r\n<\/code><\/pre>\n
The power of subtlety<\/h2>\n
Icon sizes and outlines that scale shouldn\u2019t draw attention to themselves or be obvious to the map reader. They should feel so natural they go unnoticed.<\/p>\n
I believe the best visualizations aren’t flashy\u2014they look natural and are easy to understand. However, designing visualizations this way isn\u2019t a trivial matter. They still take effort to get right.<\/p>\n
The Smart Mapping methods aren’t intended to be the final decision for what’s best for you. In fact, in most cases you will likely tweak the suggested values until they feel right for your particular dataset. That may take a little extra time to get right, but the end result will be worth it.<\/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":""}],"related_articles":"","card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/banner-small.jpg","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/01\/banner-large.jpg"},"yoast_head":"\nHow and why to adjust symbol size by scale in web maps<\/title>\n<meta name=\"description\" content=\"Though subtle, icon and outline sizes varied by scale will turn a mediocre visualization into a great one.\" \/>\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\/how-and-why-to-adjust-size-by-scale-in-web-maps\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How and why to adjust symbol size by scale in web maps\" \/>\n<meta property=\"og:description\" content=\"Though subtle, icon and outline sizes varied by scale will turn a mediocre visualization into a great one.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2020\/01\/banner-small.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"826\" \/>\n\t<meta property=\"og:image:height\" content=\"465\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\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\/how-and-why-to-adjust-size-by-scale-in-web-maps#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"How and why to adjust symbol size by scale in web maps\",\"datePublished\":\"2020-01-29T16:30:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\"},\"wordCount\":12,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"cartography\",\"data visualization\",\"renderer\",\"scale\",\"smart mapping\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\",\"name\":\"How and why to adjust symbol size by scale in web maps\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2020-01-29T16:30:02+00:00\",\"description\":\"Though subtle, icon and outline sizes varied by scale will turn a mediocre visualization into a great one.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How and why to adjust symbol size by scale in web maps\"}]},{\"@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":"How and why to adjust symbol size by scale in web maps","description":"Though subtle, icon and outline sizes varied by scale will turn a mediocre visualization into a great one.","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\/how-and-why-to-adjust-size-by-scale-in-web-maps","og_locale":"en_US","og_type":"article","og_title":"How and why to adjust symbol size by scale in web maps","og_description":"Though subtle, icon and outline sizes varied by scale will turn a mediocre visualization into a great one.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","og_image":[{"width":826,"height":465,"url":"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2020\/01\/banner-small.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"How and why to adjust symbol size by scale in web maps","datePublished":"2020-01-29T16:30:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps"},"wordCount":12,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["cartography","data visualization","renderer","scale","smart mapping"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps","name":"How and why to adjust symbol size by scale in web maps","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2020-01-29T16:30:02+00:00","description":"Though subtle, icon and outline sizes varied by scale will turn a mediocre visualization into a great one.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-and-why-to-adjust-size-by-scale-in-web-maps#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"How and why to adjust symbol size by scale in web maps"}]},{"@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 29, 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\/2020\/01\/banner-large.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":26451,"name":"cartography","slug":"cartography","term_group":0,"term_taxonomy_id":26451,"taxonomy":"post_tag","description":"","parent":0,"count":558,"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":28531,"name":"renderer","slug":"renderer","term_group":0,"term_taxonomy_id":28531,"taxonomy":"post_tag","description":"","parent":0,"count":6,"filter":"raw"},{"term_id":34771,"name":"scale","slug":"scale","term_group":0,"term_taxonomy_id":34771,"taxonomy":"post_tag","description":"","parent":0,"count":13,"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"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2683,"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":361,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":761,"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\/712232","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=712232"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/712232\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=712232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=712232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=712232"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=712232"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=712232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
See also sizeRendererCreator.createVisualVariables<\/a>.<\/em><\/p>\n
Click the >><\/code> icon to view the generated size variable and effective size for the given scale. <\/em><\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"","static":false,"storymap_url":"https:\/\/codepen.io\/kekenes\/full\/GRgLWYZ<\/a>"},{"acf_fc_layout":"content","content":"
Check out this app<\/a>, which allows you to experiment with icons whose sizes vary by scale.<\/p>\n