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?
Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
