Hello,
I am implementing basemap gallery expand as indicated in the sandbox, but it is not working.
Is there an api issue ?
Regards.
Then you need to debug why editGraphic is null.
Hello, this solved the problem.
What about the second ? moving the search result ? I've mentioned your above help in a link.
Thanks in advance.
Your require array and Subsequent vars are out of order. You had BasemapGallery then SketchViewModel instead of SketchViewModel then BasemapGallery.
<SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN> <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Search"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Locate"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Compass"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/Graphic"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/layers/GraphicsLayer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Sketch/SketchViewModel"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/BasemapGallery"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Expand"</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/support/webMercatorUtils"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/portal/Portal"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/BasemapGallery/support/PortalBasemapsSource"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/support/basemapUtils"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">,</SPAN> Search<SPAN class="punctuation token">,</SPAN> Locate<SPAN class="punctuation token">,</SPAN> Compass<SPAN class="punctuation token">,</SPAN> Graphic<SPAN class="punctuation token">,</SPAN> GraphicsLayer<SPAN class="punctuation token">,</SPAN> SketchViewModel<SPAN class="punctuation token">,</SPAN> BasemapGallery<SPAN class="punctuation token">,</SPAN> Expand<SPAN class="punctuation token">,</SPAN> Point<SPAN class="punctuation token">,</SPAN> webMercatorUtils<SPAN class="punctuation token">,</SPAN> Portal<SPAN class="punctuation token">,</SPAN> PortalBasemapsSource<SPAN class="punctuation token">,</SPAN> basemapUtils<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation 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>
Hello, this is my code combining two solutions in one page, by the way, your help mentioned here is not working in this page.
initView <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>settings<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> isSearchGra <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><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">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Search"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Locate"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Compass"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/Graphic"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/layers/GraphicsLayer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Sketch/SketchViewModel"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/BasemapGallery"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Expand"</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/support/webMercatorUtils"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/portal/Portal"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/BasemapGallery/support/PortalBasemapsSource"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/support/basemapUtils"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">,</SPAN> Search<SPAN class="punctuation token">,</SPAN> Locate<SPAN class="punctuation token">,</SPAN> Compass<SPAN class="punctuation token">,</SPAN> Graphic<SPAN class="punctuation token">,</SPAN> GraphicsLayer<SPAN class="punctuation token">,</SPAN> BasemapGallery<SPAN class="punctuation token">,</SPAN> SketchViewModel<SPAN class="punctuation token">,</SPAN> Expand<SPAN class="punctuation token">,</SPAN> Point<SPAN class="punctuation token">,</SPAN> webMercatorUtils<SPAN class="punctuation token">,</SPAN> Portal<SPAN class="punctuation token">,</SPAN> PortalBasemapsSource<SPAN class="punctuation token">,</SPAN> basemapUtils<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">GeoLocatePosition</SPAN><SPAN class="punctuation token">(</SPAN>longitude<SPAN class="punctuation token">,</SPAN> latitude<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> $<SPAN class="punctuation token">.</SPAN><SPAN class="token function">post</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode?f=pjson&featureTypes=&location="</SPAN> <SPAN class="operator token">+</SPAN> longitude <SPAN class="operator token">+</SPAN> <SPAN class="string token">","</SPAN> <SPAN class="operator token">+</SPAN> latitude <SPAN class="operator token">+</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> json <SPAN class="operator token">=</SPAN> JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">parse</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>json<SPAN class="punctuation token">.</SPAN>address<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#location"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">val</SPAN><SPAN class="punctuation token">(</SPAN>json<SPAN class="punctuation token">.</SPAN>address<SPAN class="punctuation token">.</SPAN>Match_addr<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">var</SPAN> basemap <SPAN class="operator token">=</SPAN> settings<SPAN class="punctuation token">.</SPAN>basemap <SPAN class="operator token">!==</SPAN> <SPAN class="string token">""</SPAN> <SPAN class="operator token">?</SPAN> settings<SPAN class="punctuation token">.</SPAN>basemap <SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"hybrid"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">let</SPAN> editGraphic<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// GraphicsLayer to hold graphics created via sketch view model</SPAN> <SPAN class="keyword token">const</SPAN> graphicsLayer <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">"tempGraphics"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</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="punctuation token">{</SPAN> basemap<SPAN class="punctuation token">:</SPAN> basemap<SPAN class="punctuation token">,</SPAN> layers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>graphicsLayer<SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> mapCenter <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> latitude<SPAN class="punctuation token">:</SPAN> settings<SPAN class="punctuation token">.</SPAN>latitude <SPAN class="operator token">!==</SPAN> <SPAN class="string token">''</SPAN> <SPAN class="operator token">?</SPAN> settings<SPAN class="punctuation token">.</SPAN>latitude <SPAN class="punctuation token">:</SPAN> <SPAN class="number token">34.01325</SPAN><SPAN class="punctuation token">,</SPAN> longitude<SPAN class="punctuation token">:</SPAN> settings<SPAN class="punctuation token">.</SPAN>longitude <SPAN class="operator token">!==</SPAN> <SPAN class="string token">''</SPAN> <SPAN class="operator token">?</SPAN> settings<SPAN class="punctuation token">.</SPAN>longitude <SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">6.83255</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> container<SPAN class="punctuation token">:</SPAN> settings<SPAN class="punctuation token">.</SPAN>mapDivId<SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Reference to the DOM node that will contain the view</SPAN> map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// References the map object created in step 3</SPAN> zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">14</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Sets zoom level based on level of detail (LOD)</SPAN> center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>mapCenter<SPAN class="punctuation token">.</SPAN>longitude<SPAN class="punctuation token">,</SPAN> mapCenter<SPAN class="punctuation token">.</SPAN>latitude<SPAN class="punctuation token">]</SPAN> <SPAN class="comment token">// Sets center point of view using longitude,latitude</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> searchWidget <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> view <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> locate <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Locate</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> view <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>settings<SPAN class="punctuation token">.</SPAN>showlocation<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>locate<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> position<SPAN class="punctuation token">:</SPAN> settings<SPAN class="punctuation token">.</SPAN>topleft <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">var</SPAN> compass <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Compass</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> view <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>settings<SPAN class="punctuation token">.</SPAN>showcompass<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>compass<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> position<SPAN class="punctuation token">:</SPAN> settings<SPAN class="punctuation token">.</SPAN>topleft <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">// Add the search widget to the top right corner of the view</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>searchWidget<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> position<SPAN class="punctuation token">:</SPAN> settings<SPAN class="punctuation token">.</SPAN>topright<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Create a BasemapGallery widget instance and set</SPAN> <SPAN class="comment token">// its container to a div element</SPAN> <SPAN class="keyword token">var</SPAN> allThoseEsriBasemaps <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">PortalBasemapsSource</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> query<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// title: "ArcGIS Online Basemaps",owner: "esri"</SPAN> id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'702026e41f6641fb85da88efe79dc166'</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">var</SPAN> basemapGallery <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">BasemapGallery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> source<SPAN class="punctuation token">:</SPAN> allThoseEsriBasemaps<SPAN class="punctuation token">,</SPAN> view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN> container<SPAN class="punctuation token">:</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"div"</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">// Create an Expand instance and set the content</SPAN> <SPAN class="comment token">// property to the DOM node of the basemap gallery widget</SPAN> <SPAN class="keyword token">var</SPAN> bgExpand <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Expand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN> content<SPAN class="punctuation token">:</SPAN> basemapGallery <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Add the expand instance to the ui</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>bgExpand<SPAN class="punctuation token">,</SPAN> settings<SPAN class="punctuation token">.</SPAN>bottomright<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> point <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"point"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// autocasts as new Point()</SPAN> longitude<SPAN class="punctuation token">:</SPAN> mapCenter<SPAN class="punctuation token">.</SPAN>longitude<SPAN class="punctuation token">,</SPAN> latitude<SPAN class="punctuation token">:</SPAN> mapCenter<SPAN class="punctuation token">.</SPAN>latitude <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Create a symbol for drawing the point</SPAN> <SPAN class="keyword token">const</SPAN> pointSymbol <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-marker"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// autocasts as new SimpleMarkerSymbol()</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">226</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">119</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">40</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// autocasts as new SimpleLineSymbol()</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">const</SPAN> polylineSymbol <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-line"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// autocasts as new SimpleLineSymbol()</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#8A2BE2"</SPAN><SPAN class="punctuation token">,</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"4"</SPAN><SPAN class="punctuation token">,</SPAN> style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"dash"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">const</SPAN> polygonSymbol <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// autocasts as new SimpleFillSymbol()</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"rgba(138,43,226, 0.8)"</SPAN><SPAN class="punctuation token">,</SPAN> style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN><SPAN class="punctuation token">,</SPAN> outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"white"</SPAN><SPAN class="punctuation token">,</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> pointGraphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> geometry<SPAN class="punctuation token">:</SPAN> webMercatorUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">geographicToWebMercator</SPAN><SPAN class="punctuation token">(</SPAN>point<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">:</SPAN> pointSymbol <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">GeoLocatePosition</SPAN><SPAN class="punctuation token">(</SPAN>mapCenter<SPAN class="punctuation token">.</SPAN>longitude<SPAN class="punctuation token">,</SPAN> mapCenter<SPAN class="punctuation token">.</SPAN>latitude<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#ShowCompassButton"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"ifChecked"</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>compass<SPAN class="punctuation token">.</SPAN>destroyed<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> compass <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Compass</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> view <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>compass<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> position<SPAN class="punctuation token">:</SPAN> settings<SPAN class="punctuation token">.</SPAN>topleft <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="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#ShowCompassButton"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"ifUnchecked"</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> compass<SPAN class="punctuation token">.</SPAN><SPAN class="token function">destroy</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="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#ShowLocationButton"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"ifChecked"</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>locate<SPAN class="punctuation token">.</SPAN>destroyed<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> locate <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Locate</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> view <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>locate<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> position<SPAN class="punctuation token">:</SPAN> settings<SPAN class="punctuation token">.</SPAN>topleft <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="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#ShowLocationButton"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"ifUnchecked"</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> locate<SPAN class="punctuation token">.</SPAN><SPAN class="token function">destroy</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> searchWidget<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"select-result"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#location"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">val</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>result<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#longitude"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">val</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>result<SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN>longitude<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#latitude"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">val</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>result<SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN>latitude<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">"The selected search result: "</SPAN><SPAN class="punctuation token">,</SPAN> event<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> view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">when</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> graphicsLayer<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>pointGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">const</SPAN> sketchViewModel <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SketchViewModel</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">,</SPAN> layer<SPAN class="punctuation token">:</SPAN> graphicsLayer<SPAN class="punctuation token">,</SPAN> pointSymbol<SPAN class="punctuation token">,</SPAN> polylineSymbol<SPAN class="punctuation token">,</SPAN> polygonSymbol <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">setUpClickHandler</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Listen the sketchViewModel's update-complete and update-cancel events</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"update-complete"</SPAN><SPAN class="punctuation token">,</SPAN> updateGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"update-cancel"</SPAN><SPAN class="punctuation token">,</SPAN> updateGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Runs when sketchViewModel's update-complete or update-cancel</SPAN> <SPAN class="comment token">// events are fired.</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">updateGraphic</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// Create a new graphic and set its geometry event.geometry</SPAN> <SPAN class="keyword token">debugger</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> graphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> geometry<SPAN class="punctuation token">:</SPAN> event<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">:</SPAN> editGraphic<SPAN class="punctuation token">.</SPAN>symbol <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>isSearchGra<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> graphic<SPAN class="punctuation token">.</SPAN>attributes <SPAN class="operator token">=</SPAN> editGraphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">;</SPAN> view<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN> graphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">// set the editGraphic to null update is complete or cancelled.</SPAN> editGraphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="comment token">// set up logic to handle geometry update and reflect the update on "graphicsLayer"</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">setUpClickHandler</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> view<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> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitTest</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> results <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>results<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> i <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><</SPAN> results<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN> i<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// Check if we're already editing a graphic</SPAN> <SPAN class="keyword token">var</SPAN> gra <SPAN class="operator token">=</SPAN> results<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>editGraphic <SPAN class="operator token">&&</SPAN> gra<SPAN class="punctuation token">.</SPAN>attributes <SPAN class="operator token">&&</SPAN> gra<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hasOwnProperty</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Match_addr"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> isSearchGra <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN> editGraphic <SPAN class="operator token">=</SPAN> results<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">;</SPAN> view<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN>editGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">update</SPAN><SPAN class="punctuation token">(</SPAN>editGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>editGraphic <SPAN class="operator token">&&</SPAN> gra<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">===</SPAN> <SPAN class="string token">"tempGraphics"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> isSearchGra <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Save a reference to the graphic we intend to update</SPAN> editGraphic <SPAN class="operator token">=</SPAN> results<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// Remove the graphic from the GraphicsLayer</SPAN> <SPAN class="comment token">// Sketch will handle displaying the graphic while being updated</SPAN> graphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN>editGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">update</SPAN><SPAN class="punctuation token">(</SPAN>editGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</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="punctuation token">}</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">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'basemap'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>portalItem<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">switch</SPAN> <SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>portalItem<SPAN class="punctuation token">.</SPAN>id<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">'8bf7167d20924cbf8e25e7b11c7c502c'</SPAN><SPAN class="punctuation token">:</SPAN> sbasemap <SPAN class="operator token">=</SPAN> <SPAN class="string token">'streets'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">'86de95d4e0244cba80f0fa2c9403a7b2'</SPAN><SPAN class="punctuation token">:</SPAN> sbasemap <SPAN class="operator token">=</SPAN> <SPAN class="string token">'satellite'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">'28f49811a6974659988fd279de5ce39f'</SPAN><SPAN class="punctuation token">:</SPAN> sbasemap <SPAN class="operator token">=</SPAN> <SPAN class="string token">'hybrid'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">'6e03e8c26aad4b9c92a87c1063ddb0e3'</SPAN><SPAN class="punctuation token">:</SPAN> sbasemap <SPAN class="operator token">=</SPAN> <SPAN class="string token">'topo'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">'979c6cc89af9449cbeb5342a439c6a76'</SPAN><SPAN class="punctuation token">:</SPAN> sbasemap <SPAN class="operator token">=</SPAN> <SPAN class="string token">'gray'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">'8b3d38c0819547faa83f7b7aca80bd76'</SPAN><SPAN class="punctuation token">:</SPAN> sbasemap <SPAN class="operator token">=</SPAN> <SPAN class="string token">'gray-vector'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">'358ec1e175ea41c3bf5c68f0da11ae2b'</SPAN><SPAN class="punctuation token">:</SPAN> sbasemap <SPAN class="operator token">=</SPAN> <SPAN class="string token">'dark-gray'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">'5ae9e138a17842688b0b79283a4353f6'</SPAN><SPAN class="punctuation token">:</SPAN> sbasemap <SPAN class="operator token">=</SPAN> <SPAN class="string token">'oceans'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">'d94dcdbe78e141c2b2d3a91d5ca8b9c9'</SPAN><SPAN class="punctuation token">:</SPAN> sbasemap <SPAN class="operator token">=</SPAN> <SPAN class="string token">'national-geographic'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">'aab054ab883c4a4094c72e949566ad40'</SPAN><SPAN class="punctuation token">:</SPAN> sbasemap <SPAN class="operator token">=</SPAN> <SPAN class="string token">'terrain'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">'b834a68d7a484c5fb473d4ba90d35e71'</SPAN><SPAN class="punctuation token">:</SPAN> sbasemap <SPAN class="operator token">=</SPAN> <SPAN class="string token">'osm'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">'c50de463235e4161b206d000587af18b'</SPAN><SPAN class="punctuation token">:</SPAN> sbasemap <SPAN class="operator token">=</SPAN> <SPAN class="string token">'streets-navigation-vector'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">case</SPAN> <SPAN class="string token">'00f90f3f3c9141e4bea329679b257142'</SPAN><SPAN class="punctuation token">:</SPAN> sbasemap <SPAN class="operator token">=</SPAN> <SPAN class="string token">'streets-vector'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">break</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">default</SPAN><SPAN class="punctuation token">:</SPAN> sbasemap <SPAN class="operator token">=</SPAN> <SPAN class="string token">'noStringConstant'</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#MapType"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">val</SPAN><SPAN class="punctuation token">(</SPAN>sbasemap<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>sbasemap<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="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></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Essadek,
There is no API issue that I am aware of. Most likely there is an issue in your code. Please share your code for review.
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
