Hi I am trying to get custom recenter button and basemap 3 custom button like below image. Is their any example
Use "dojo/dom-construct" in the require and define it in the function variables like domConstruct.
Then after you have initialised your view you can create the button.
<SPAN class="comment token">// create DOM object</SPAN> recenterBtn <SPAN class="operator token">=</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toDom</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"<div class='map-button esri-component esri-locate esri-widget--button esri-widget' role='button' title='Recenter'><span aria-hidden='true' role='presentation' class='esri-icon esri-icon-globe'></span></div>"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// add to 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>recenterBtn<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"bottom-right"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// add button click listener</SPAN> recenterBtn<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> recenterFunction<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>
Use the MapView goTo() function to set the center view: MapView | ArcGIS API for JavaScript 4.14
Add your own CSS to style it as you wish.
Also see the Custom Recenter Widget | ArcGIS API for JavaScript 4.14 example for the TypeScript version.
Thanks Basson it worked for me
It depends on how many basemaps you want to use.
Have a look at the documentation for BasemapToggle | ArcGIS API for JavaScript 4.14 and the BasemapGallery | ArcGIS API for JavaScript 4.14 widgets.
Otherwise the function for switching basemaps can be simple as:
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">setbasemap</SPAN><SPAN class="punctuation token">(</SPAN>basemap<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> map<SPAN class="punctuation token">.</SPAN>basemap <SPAN class="operator token">=</SPAN> basemap<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
and attach the click event to the buttons
basemapBtn.addEventListener('click', function(){ setbasemap('hybrid'); });<SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Its done, it was some minor error, btw thanks alot for ur kind efforts.
So now i will create basemap buttons with the same method now, but what method do i call on click to change basemap
You must still create the recenter function e.g.
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">recenterView</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">goTo</SPAN><SPAN class="punctuation token">(</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">126</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">49</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">15</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>
which you then call with the listener
recenterBtn<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> recenterView<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN></SPAN>
4.x
What version of the API are you using? 3.x or 4.x?
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
