Extend the esri JavaScript BasicViewer with additional buttons

[JoseSanchez]

Hi all,

I downloaded the JavaScript BasicViewer source code and I would like to add a few more buttons, for example the Home button, th Locator button, a select by rectangle button, a buffer button.


Is there any place that explains where and how to add additional buttons.

Thanks

[JonathanUihlein]

Hi jsn,

Have you checked out the 'Whats New in Version 3.7?' page?
(https://developers.arcgis.com/en/javascript/jshelp/whats_new.html)

It has some samples that you may find useful, like the following:
https://developers.arcgis.com/en/javascript/jssamples/widget_home.html

Hope this helps.

[JoseSanchez]

Yes I checked the samples and they are very clear!!

If you try to add them to the JavaScript basic viewer it becomes very complicate.

This template has a Home button but I do not know where it is coded in the source code

http://www.arcgis.com/apps/StorytellingTextLegend/index.html

And this is the template I am modifying to add the home button, it has onle a zoom In and Zoom Out buttons:

http://www.arcgis.com/apps/OnePane/basicviewer/index.html

Thanks

[JonathanUihlein]

Just had a chance to look the page you linked.

It looks like a fairly old template that utilizes the legacy style of DOJO.

If you look at the source, you can see several additional javascript files are included.
The Home button logic is located in the map.js script file.

<script type="text/javascript" src="javascript/map.js"></script>

But, again, this is fairly old and you may want to look at writing your application in AMD style.

Sometime in the future, DOJO 2.0 will be released and the legacy style will no longer be supported in newer versions of the ESRI JSAPI.

At that point, upgrading to the newest ESRI JSAPI would entail rewriting your entire application to follow AMD style.

[JoseSanchez]

Hi,

I am modifying the Basic viewer, and the code exported is already in AMD format:

http://www.arcgis.com/apps/OnePane/basicviewer/index.html

Where can I add a Home Button
https://developers.arcgis.com/en/javascript/jssamples/widget_home.html

or a Locator button:
https://developers.arcgis.com/en/javascript/jssamples/widget_locate.html


The code from Home and Locator buttons is very easy to uderstand , the issue is when I want to insert these buttons in the viewer, I do not see where.

The social media template has already these buttons and it is written in  AMD:
http://www.arcgis.com/apps/SocialMedia/index.html


Thanks

[JoseSanchez]

Hi all,

The question is how to add a button to the JavaScript Basic Viewer:
http://www.arcgis.com/apps/OnePane/basicviewer/index.html

More specifically how to add the Home Button:
https://developers.arcgis.com/en/javascript/jssamples/widget_home.html

This is how I added the button:
From  the sample  https://developers.arcgis.com/en/javascript/jssamples/widget_home.html copy/paste the description of HomeButton Into  the file: ..\css\layout.css

#HomeButton { 
      position: absolute; 
      top: 95px; 
      left: 20px; 
      z-index: 50; 
    }

Then copy/paste the tag "HomeButton"  into index.html file

<div id="HomeButton"></div>   

inside the Map Section

<!-- Map Section -->
           
          <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='region:"center"' dir="ltr">


           <div id="HomeButton" class="HomeButton"></div>


            <div id="logo" class="logo" style="display:none;">
              <!--If a logo is specified in config section then the logo will be added
              to the map-->
            </div>
            <!--Floating window that contains the measure dijit-->
            <div id="floater">
              <div id="measureDiv"></div>
            </div>
            <!--Floating window contains the time slider-->
           
            <div id="timeFloater" style='display:none;'>
             
              
            </div>
          

          </div>

Then declare the object HomeButton in the file ..\javascript\layout.js

dojo.require("esri.dijit.HomeButton");

var homeButton;

�?�

    dojo.connect(dijit.byId('map'), 'resize', resizeMap);
    adjustPopupSize();
    var layers = response.itemInfo.itemData.operationalLayers;


    //constrain the extent
    if (configOptions.constrainmapextent) {
        var basemapExtent = map.getLayer(map.layerIds[0]).fullExtent.expand(1.5);
        //create a graphic with a hole over the web map's extent. This hole will allow
        //the web map to appear and hides the rest of the map to limit the visible extent to the webmap.
        var clipPoly = new esri.geometry.Polygon(map.spatialReference);
        clipPoly.addRing([
            [basemapExtent.xmin, basemapExtent.ymin],
            [basemapExtent.xmin, basemapExtent.ymax],
            [basemapExtent.xmax, basemapExtent.ymax],
            [basemapExtent.xmax, basemapExtent.ymin],
            [basemapExtent.xmin, basemapExtent.ymin]
        ]);
        //counter-clockwise to add a hole
        clipPoly.addRing([
            [webmapExtent.xmin, webmapExtent.ymin],
            [webmapExtent.xmax, webmapExtent.ymin],
            [webmapExtent.xmax, webmapExtent.ymax],
            [webmapExtent.xmin, webmapExtent.ymax],
            [webmapExtent.xmin, webmapExtent.ymin]
        ]);

        var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(), new dojo.Color("white"));

        var maxExtentGraphic = new esri.Graphic(clipPoly, symbol);

        map.graphics.add(maxExtentGraphic);
    }


//  Add Home button
             
 
   homeButton = new esri.dijit.HomeButton({ 
        map: map,
        id:  'HomeButton'
      }, 'HomeButton'); 
     
      homeButton.startup(); 

�?�.

Done!  the button now is visible.

[JonathanUihlein]

I am modifying the Basic viewer, and the code exported is already in AMD format:
http://www.arcgis.com/apps/OnePane/basicviewer/index.html

Would you mind sharing the AMDified version of the Basic Viewer?
I'd love to take a look and play around with it.

I notice you are still using legacy-style DOJO in your code, rather than AMD.

Legacy Code Example:

dojo.require("esri.dijit.HomeButton");

[JoseSanchez]

This is the AMDified version of the Esri's JavaScript Basic Viewer:

http://www.arcgis.com/apps/OnePane/basicviewer/index.html

The code I added follows the existing code in the "layout.js" file, but if you take a look to the index.htm or other .js files they follow the AMD style.

For a detailed explanation of why it was coded this way, please contact Esri directly.

Regards

[JonathanUihlein]

This is the AMDified version of the Esri's JavaScript Basic Viewer:

http://www.arcgis.com/apps/OnePane/basicviewer/index.html

The code I added follows the existing code in the "layout.js" file, but if you take a look to the index.htm or other .js files they follow the AMD style.

For a detailed explanation of why it was coded this way, please contact Esri directly.

Regards

Hi jsn, I think you might be confused as to what AMD style is. I've looked through every single js file included in this sample application and only the widgets are in AMD style.

The script in index.htm is *not* in AMD style. Most other scripts are obfuscated.

App.js, custommenu.js are widgets in AMD style. Are these what you were referring to? I can understand if you think the application is AMD style since the widgets are...

I'm really curious what specific script files you are referring to. I could ask ESRI, but I think they would ask me the same thing I am asking you 😄


*edit, attached picture of all scripts from the viewer
[ATTACH=CONFIG]28304[/ATTACH]

[JoseSanchez]

Jon,

In the index.html file there is a function declared  this way:
  dojo.ready(function(){
        i18n = dojo.i18n.getLocalization("esriTemplate","template");

This is the new style, the old style was:

function init(){
     dojo.require("utilities.app");
     dojo.require("templateConfig.commonConfig");
....

//show map on load
    dojo.addOnLoad(init);

which I found easier to code and understand.

This post is about how to add buttons in the Esri Basic Viewer code generated by the template. This is NOT about AMD.

Again if you need information about how the Basic Viewer was coded, talk with Esri directly.