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; } } }

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

Encontre mais publicações marcadas com

Accepted answers

All comments

JoseSanchez

Jonathan,

I also have another question, could the Basic Viewer be added to the http://esri.github.io/#ActionScript,JavaScript

Several other developers are using this viewer as a starting point of their JavaScript developments.

Thanks

JonathanUihlein

I'll do my best to help answer these questions (Sorry for derailing this thread BTW!!)

The widgets and AMD style scripts will continue to work when the ESRI JSAPI switches to using DOJO 2.0 (hooray!). This is a LONG time away and the time-frame mostly depends on when DOJO releases version 2.0 of their API. Speculation is that ESRI JSAPI Version 4.0 will use DOJO 2.0.

If you continue to use ESRI JSAPI Version 3.7 (or 3.8, 3.9, or previous versions), your application and the templates will continue to work as expected.

It's up to you to switch to AMD when it is most convenient for you. Although, it is not an over-night switch.

However, it is not a big deal if you don't switch to AMD right away. It takes some time to learn the basics and even longer to master the caveats and intricacies.

I assume there will be a new version with pure AMD, although that might be released closer to when the big 'required' switch to AMD is scheduled to occur (a year? more? It's hard to guess at this point).

Going back to the topic of this post, could you please give me some samples of source code to add this type of buttons, panels, etc:

Sure! Let me look at the code again and I'll get something together. Thanks for the great questions!

JoseSanchez

Hi again,

I do not understand!!

I downloaded the Basic Viewer generated from the template. Because some js files are AMD style I assumed that the whole project was AMD.

Does it mean that this code is legacy code and will not run soon?

Are we going to get a new version with pure AMD?

Going back to the topic of this post, could you please give me some samples of source code to add this type of buttons, panels, etc:

Toolbar with the following buttons:
o Previous Extent, Next Extent
o Select By Rectangle, By Polygon, by Circle,
o Buffer,
o Network Tracing (VERY IMPORTANT)
�?� Customize Base map toolbar, to show custom base maps instead of Esri base maps
�?� popup results window showing the selection of several features
o Layers list, add interactivity when check/uncheck layer maps refreshes. Currently I only get one layer per map service, can not check/uncheck layers inside a group
�?� Multi search floating panel, search by address, intersection, folio, etc,

Thanks

Anytime you see "dojo.something", it generally means that is non-AMD.

In the index file is the following code:
dojo.require("utilities.App");
dojo.require("templateConfig.commonConfig");
var i18n;
dojo.ready(function(){ ...
This indicates a non-AMD style application.

I am speaking with you, as an employee of ESRI, attempting to help 😃

http://www.esri.com/careers/students/summer-internships/intern-profiles/intern-profile-web-design-development

You said you had the Basic Viewer in AMD style and I wanted to see your code, because the viewer you linked is in legacy style, so buttons are added in a different way (it matters).

JonathanUihlein

Anytime you see "dojo.something", it generally means that is non-AMD.

In the index file is the following code:

dojo.require("utilities.App");
dojo.require("templateConfig.commonConfig");
var i18n;
dojo.ready(function(){ ...

This indicates a non-AMD style application.

I am speaking with you, as an employee of ESRI, attempting to help 😃

http://www.esri.com/careers/students/summer-internships/intern-profiles/intern-profile-web-design-development

You said you had the Basic Viewer in AMD style and I wanted to see your code, because the viewer you linked is in legacy style, so buttons are added in a different way (it matters).

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.

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]

jsn.png

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

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

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.

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

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

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

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.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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