Can you please take a look at this demo snippet and let me know how I can add animation to cluster breaks on zoom in out?
As you can see in the demo cluster symbols disappear on zoom in, out and re rendered after zoom stops but how we can add animation to clusters
<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1, maximum-scale=1,user-scalable=no"</SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Cluster<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F3.25%2Fdijit%2Fthemes%2Ftundra%2Ftundra.css" target="_blank">https://js.arcgis.com/3.25/dijit/themes/tundra/tundra.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F3.25%2Fesri%2Fcss%2Fesri.css" target="_blank">https://js.arcgis.com/3.25/esri/css/esri.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
html<SPAN class="punctuation token">,</SPAN> body <SPAN class="punctuation token">{</SPAN> height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN>
#map<SPAN class="punctuation token">{</SPAN> margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="comment token">/* center the image in the popup */</SPAN>
<SPAN class="punctuation token">.</SPAN>esriViewPopup <SPAN class="punctuation token">.</SPAN>gallery <SPAN class="punctuation token">{</SPAN> margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN> auto <SPAN class="operator token">!</SPAN>important<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="comment token">// helpful for understanding dojoConfig.packages vs. dojoConfig.paths:</SPAN>
<SPAN class="comment token"><SPAN>// </SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwww.sitepen.com%2Fblog%2F2013%2F06%2F20%2Fdojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases%2F" target="_blank">http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/</A></SPAN>
<SPAN class="keyword token">var</SPAN> dojoConfig <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
paths<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
extras<SPAN class="punctuation token">:</SPAN> location<SPAN class="punctuation token">.</SPAN>pathname<SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="regex token">/\/[^/]+$/</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">"/extras"</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F3.25%2F" target="_blank">https://js.arcgis.com/3.25/</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="keyword token">var</SPAN> map<SPAN class="punctuation token">;</SPAN>
<SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
<SPAN class="string token">"dojo/parser"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dojo/ready"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dojo/_base/array"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/Color"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dojo/dom-style"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dojo/query"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/request"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/graphic"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/geometry/Extent"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/symbols/SimpleMarkerSymbol"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/symbols/SimpleFillSymbol"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/symbols/PictureMarkerSymbol"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/renderers/ClassBreaksRenderer"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/layers/GraphicsLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/SpatialReference"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/dijit/PopupTemplate"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/geometry/Point"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/geometry/webMercatorUtils"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"extras/ClusterLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dijit/layout/BorderContainer"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dijit/layout/ContentPane"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dojo/domReady!"</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>
parser<SPAN class="punctuation token">,</SPAN> ready<SPAN class="punctuation token">,</SPAN> arrayUtils<SPAN class="punctuation token">,</SPAN> Color<SPAN class="punctuation token">,</SPAN> domStyle<SPAN class="punctuation token">,</SPAN> query<SPAN class="punctuation token">,</SPAN>
Map<SPAN class="punctuation token">,</SPAN> esriRequest<SPAN class="punctuation token">,</SPAN> Graphic<SPAN class="punctuation token">,</SPAN> Extent<SPAN class="punctuation token">,</SPAN>
SimpleMarkerSymbol<SPAN class="punctuation token">,</SPAN> SimpleFillSymbol<SPAN class="punctuation token">,</SPAN> PictureMarkerSymbol<SPAN class="punctuation token">,</SPAN> ClassBreaksRenderer<SPAN class="punctuation token">,</SPAN>
GraphicsLayer<SPAN class="punctuation token">,</SPAN> SpatialReference<SPAN class="punctuation token">,</SPAN> PopupTemplate<SPAN class="punctuation token">,</SPAN> Point<SPAN class="punctuation token">,</SPAN> webMercatorUtils<SPAN class="punctuation token">,</SPAN>
ClusterLayer
<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="token function">ready</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
parser<SPAN class="punctuation token">.</SPAN><SPAN class="token function">parse</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> clusterLayer<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> popupOptions <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="string token">"markerSymbol"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleMarkerSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"circle"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">20</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.25</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"marginLeft"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"20"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"marginTop"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"20"</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"oceans"</SPAN><SPAN class="punctuation token">,</SPAN>
center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">117.789</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">33.543</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">13</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"load"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="comment token">// hide the popup's ZoomTo link as it doesn't make sense for cluster features</SPAN>
domStyle<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"a.action.zoomTo"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"display"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"none"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// get the latest 1000 photos from instagram/laguna beach</SPAN>
<SPAN class="keyword token">var</SPAN> photos <SPAN class="operator token">=</SPAN> <SPAN class="token function">esriRequest</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"data/1000-photos.json"</SPAN><SPAN class="punctuation token">,</SPAN>
handleAs<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"json"</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
photos<SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>addClusters<SPAN class="punctuation token">,</SPAN> error<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">addClusters</SPAN><SPAN class="punctuation token">(</SPAN>resp<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> photoInfo <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> wgs <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SpatialReference</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
<SPAN class="string token">"wkid"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4326</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
photoInfo<SPAN class="punctuation token">.</SPAN>data <SPAN class="operator token">=</SPAN> arrayUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">map</SPAN><SPAN class="punctuation token">(</SPAN>resp<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>p<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> latlng <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Point</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">parseFloat</SPAN><SPAN class="punctuation token">(</SPAN>p<SPAN class="punctuation token">.</SPAN>lng<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="token function">parseFloat</SPAN><SPAN class="punctuation token">(</SPAN>p<SPAN class="punctuation token">.</SPAN>lat<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> wgs<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> webMercator <SPAN class="operator token">=</SPAN> webMercatorUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">geographicToWebMercator</SPAN><SPAN class="punctuation token">(</SPAN>latlng<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> attributes <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="string token">"Caption"</SPAN><SPAN class="punctuation token">:</SPAN> p<SPAN class="punctuation token">.</SPAN>caption<SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"Name"</SPAN><SPAN class="punctuation token">:</SPAN> p<SPAN class="punctuation token">.</SPAN>full_name<SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"Image"</SPAN><SPAN class="punctuation token">:</SPAN> p<SPAN class="punctuation token">.</SPAN>image<SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"Link"</SPAN><SPAN class="punctuation token">:</SPAN> p<SPAN class="punctuation token">.</SPAN>link
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="string token">"x"</SPAN><SPAN class="punctuation token">:</SPAN> webMercator<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"y"</SPAN><SPAN class="punctuation token">:</SPAN> webMercator<SPAN class="punctuation token">.</SPAN>y<SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"attributes"</SPAN><SPAN class="punctuation token">:</SPAN> attributes
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// popupTemplate to work with attributes specific to this dataset</SPAN>
<SPAN class="keyword token">var</SPAN> popupTemplate <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">PopupTemplate</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
<SPAN class="string token">"title"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"fieldInfos"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
<SPAN class="string token">"fieldName"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Caption"</SPAN><SPAN class="punctuation token">,</SPAN>
visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="string token">"fieldName"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Name"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"label"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"By"</SPAN><SPAN class="punctuation token">,</SPAN>
visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="string token">"fieldName"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Link"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"label"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"On Instagram"</SPAN><SPAN class="punctuation token">,</SPAN>
visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// cluster layer that uses OpenLayers style clustering</SPAN>
clusterLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ClusterLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
<SPAN class="string token">"data"</SPAN><SPAN class="punctuation token">:</SPAN> photoInfo<SPAN class="punctuation token">.</SPAN>data<SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"distance"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"clusters"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"labelColor"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#fff"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"labelOffset"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">10</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"resolution"</SPAN><SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getWidth</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">/</SPAN> map<SPAN class="punctuation token">.</SPAN>width<SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"singleColor"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#888"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"singleTemplate"</SPAN><SPAN class="punctuation token">:</SPAN> popupTemplate
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> defaultSym <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleMarkerSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setSize</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">4</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> renderer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ClassBreaksRenderer</SPAN><SPAN class="punctuation token">(</SPAN>defaultSym<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"clusterCount"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> picBaseUrl <SPAN class="operator token">=</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fstatic.arcgis.com%2Fimages%2FSymbols%2FShapes%2F" target="_blank">https://static.arcgis.com/images/Symbols/Shapes/</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> blue <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">PictureMarkerSymbol</SPAN><SPAN class="punctuation token">(</SPAN>picBaseUrl <SPAN class="operator token">+</SPAN> <SPAN class="string token">"BluePin1LargeB.png"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">32</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">32</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setOffset</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">15</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> green <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">PictureMarkerSymbol</SPAN><SPAN class="punctuation token">(</SPAN>picBaseUrl <SPAN class="operator token">+</SPAN> <SPAN class="string token">"GreenPin1LargeB.png"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">64</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">64</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setOffset</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">15</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> red <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">PictureMarkerSymbol</SPAN><SPAN class="punctuation token">(</SPAN>picBaseUrl <SPAN class="operator token">+</SPAN> <SPAN class="string token">"RedPin1LargeB.png"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">72</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">72</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setOffset</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">15</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
renderer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addBreak</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">,</SPAN> blue<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
renderer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addBreak</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">200</SPAN><SPAN class="punctuation token">,</SPAN> green<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
renderer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addBreak</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">200</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1001</SPAN><SPAN class="punctuation token">,</SPAN> red<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
clusterLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setRenderer</SPAN><SPAN class="punctuation token">(</SPAN>renderer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayer</SPAN><SPAN class="punctuation token">(</SPAN>clusterLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// close the info window when the map is clicked</SPAN>
map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> cleanUp<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// close the info window when esc is pressed</SPAN>
map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"key-down"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">.</SPAN>keyCode <SPAN class="operator token">===</SPAN> <SPAN class="number token">27</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="token function">cleanUp</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">cleanUp</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hide</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
clusterLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clearSingles</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">error</SPAN><SPAN class="punctuation token">(</SPAN>err<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"something failed: "</SPAN><SPAN class="punctuation token">,</SPAN> err<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="comment token">// show cluster extents...</SPAN>
<SPAN class="comment token">// never called directly but useful from the console </SPAN>
window<SPAN class="punctuation token">.</SPAN>showExtents <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> extents <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"clusterExtents"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN> extents <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeLayer</SPAN><SPAN class="punctuation token">(</SPAN>extents<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
extents <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"clusterExtents"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> sym <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleFillSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setColor</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">205</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">193</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">197</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.5</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
arrayUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>clusterLayer<SPAN class="punctuation token">.</SPAN>_clusters<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>c<SPAN class="punctuation token">,</SPAN> idx<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> e <SPAN class="operator token">=</SPAN> c<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">;</SPAN>
extents<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Extent</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> e<SPAN class="punctuation token">[</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> e<SPAN class="punctuation token">[</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> e<SPAN class="punctuation token">[</SPAN><SPAN class="number token">3</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> map<SPAN class="punctuation token">.</SPAN>spatialReference<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> sym<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayer</SPAN><SPAN class="punctuation token">(</SPAN>extents<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>div data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/BorderContainer"</SPAN>
data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"design:'headline',gutters:false"</SPAN>
style<SPAN class="operator token">=</SPAN><SPAN class="string token">"width: 100%; height: 100%; margin: 0;"</SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"map"</SPAN>
data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/ContentPane"</SPAN>
data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"region:'center'"</SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
