nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Custom buttons

GregoryBologna

I am using JS API 4.12. What options are available to create custom buttons with events to a MapView? Do I create a custom widget or use dojo? I'm not sure if this is valid, but I tried using dojo by adding "dijit/form/Button" but the rendered dojo button appears to add a toggle button and other stuff.

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Gregory,

I think you are looking for something like this:

<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>
    <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>
    <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Intro to MapView <SPAN class="operator token">-</SPAN> Create a 2D map <SPAN class="operator token">-</SPAN> <SPAN class="number token">4.12</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<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>
      #viewDiv <SPAN class="punctuation token">{</SPAN>
        padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><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>
      <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>link
      rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN>
      href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.12/esri/themes/light/main.css"</SPAN>
    <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.12/"</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="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="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> <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> <SPAN class="string token">"streets"</SPAN>
        <SPAN class="punctuation token">}</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> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
          map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
          zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">12</SPAN><SPAN class="punctuation token">,</SPAN>
          <SPAN class="comment token">//padding: 12</SPAN>
          center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">65</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// longitude, latitude</SPAN>
          constraints<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            maxScale<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">285</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
          autoResize<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
          popup<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            viewModel<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
              actions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              actionsMenuEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            dockEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
            dockOptions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
              breakpoint<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            featureNavigationEnabled<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="keyword token">var</SPAN> element <SPAN class="operator 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>
        element<SPAN class="punctuation token">.</SPAN>className <SPAN class="operator token">=</SPAN> <SPAN class="string token">"esri-icon-collection esri-widget--button esri-widget esri-interactive"</SPAN><SPAN class="punctuation token">;</SPAN>
        element<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> <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">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"clicked"</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>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>element<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</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 id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</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>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>

All comments

GregoryBologna

This works great. The button element is good. It has that 3d-ish click style. Thank you.

khutchins

Robert's reply is correct but a I'd modify the line where you create the element to use document.createElement("button") instead of document.createElement("div").

     <SPAN class="keyword token">var</SPAN> element <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'button'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

The reason for using a button instead of a div since button's have keyboard accessibility built-in by default so you can navigate to the button using the tab keys and activate it using return or enter. This is important when building web sites to ensure they meet accessibility standards (508 and WCAG).

RobertScheitlin__GISP

Gregory,

I think you are looking for something like this:

<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>
    <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>
    <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Intro to MapView <SPAN class="operator token">-</SPAN> Create a 2D map <SPAN class="operator token">-</SPAN> <SPAN class="number token">4.12</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<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>
      #viewDiv <SPAN class="punctuation token">{</SPAN>
        padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><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>
      <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>link
      rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN>
      href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.12/esri/themes/light/main.css"</SPAN>
    <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.12/"</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="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="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> <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> <SPAN class="string token">"streets"</SPAN>
        <SPAN class="punctuation token">}</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> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
          map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
          zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">12</SPAN><SPAN class="punctuation token">,</SPAN>
          <SPAN class="comment token">//padding: 12</SPAN>
          center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">65</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// longitude, latitude</SPAN>
          constraints<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            maxScale<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">285</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
          autoResize<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
          popup<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            viewModel<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
              actions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
              <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
              actionsMenuEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            dockEnabled<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
            dockOptions<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
              breakpoint<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
            featureNavigationEnabled<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="keyword token">var</SPAN> element <SPAN class="operator 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>
        element<SPAN class="punctuation token">.</SPAN>className <SPAN class="operator token">=</SPAN> <SPAN class="string token">"esri-icon-collection esri-widget--button esri-widget esri-interactive"</SPAN><SPAN class="punctuation token">;</SPAN>
        element<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> <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">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"clicked"</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>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>element<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</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 id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</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>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>

GregoryBologna

Thanks. This may not work out afterall because the map takes longer to load when adding "dijit/form/Button". I am looking into building a widget using React.

add to require

"dijit/form/Button"

var view = new MapView({

map: map,

container: "viewDiv",

center: [lng, lat],

zoom: 12,

padding: padding,

constraints: {

maxScale: 285

autoResize: true,

popup: {

viewModel: {

actions: {

zoom: false

actionsMenuEnabled: false

dockEnabled: false,

dockOptions: {

breakpoint: false,

featureNavigationEnabled: true

}

});

create button

var button = new Button({

type: "button",

iconClass: "esri-icon-collection esri-widget--button esri-widget esri-interactive",

showLabel: false,

label: "",

onClick: function(){

console.log("clicked");

}

});

then add to view

view.ui.add(button, "top-right");

RobertScheitlin__GISP

Gregory,

Can you share your code that displays this issue?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.