topic Re: Simple Button available in JSAPI? in ArcGIS JavaScript Maps SDK Questions

Simple Button available in JSAPI?

Arne_Gelfert — Sun, 12 Dec 2021 07:25:18 GMT

I'm looking for the simplest way to add a button to my view UI when developing with the JS API. By simple I mean really just a UI elements that I can hookup to any necessary callback. For example, I might want to include the search widget to search for a record to select/highlight in the map, and only when the extra simple button is clicked, do I get a popup or a buffer for my feature. I'm surprised there isn't something like a "Simple Button" widget. Or have I missed it? I see an Action Button for use inside a Popup, which I think will be helpful in another context. But more than I need.

Currently, I'm having to follow the advice here to do:

<div id="mapDiv">  
        <div id="button">  
            <button data-dojo-type="dijit/form/Button" id='simpBtn'>My Simple Button</button>  
        </div>  
    </div>  ‍‍‍‍‍

But the result doesn't blend right in with the style of my other UI elements. This approach here didn't seem to work for me. My button just gets covered up by map despite the z-index of 100.

I've been taking my time before getting into the custom widgets using Typescript. Has the time come to take that approach.

Re: Simple Button available in JSAPI?

ReneRubalcava — Sun, 12 Dec 2021 07:25:21 GMT

I'm not exactly sure I follow the use case, but you can add any DOM element to a View UI in 4x.

So you could do something like this

var btn = document.createElement('button');
btn.innerText = 'Open Popup for Search';
view.ui.add(btn, 'top-right');
btn.addEventListener('click', () => {
  if (searchResult) {
    view.popup.open({
      features: [searchResult],
      location: searchResult.geometry
    });
  }
});‍‍‍‍‍‍‍‍‍‍‍

Here is a sample that kind of does what you described.

JS Bin - Collaborative JavaScript Debugging

You would need to style the button as desired, is all.

Re: Simple Button available in JSAPI?

Arne_Gelfert — Mon, 22 Apr 2019 20:37:04 GMT

Thanks, Rene. That's great. Somehow, I didn't realize that I could use the

view.ui.add()

syntax to integrate a regular HTML dom element into my view. Learning one post at a time here.