Sample Javascript Viewer

ChristianSmith · ‎05-27-2010

Does anyone know if the sample viewer team plans to upgrade, change / modify the JS sample viewer in the near future ?

Thanks

Smitty

KevinMacLeod1 · ‎01-09-2013

Hi Kelly,

First, you are awesome! Thank you for the support.

I am now exploring your customized template. I successfully added our layers.

Our first objective is getting our geocoder running. I got it running fine in the ESRI individual sample geocoder, no prob. Just had to change SingleLineInput to "Street" after noticing this was what it needed to be looking for in the JSON call, as that's what our geocoder service is set to require.

Then I set out to make it work in your sample above. I noticed you're using a different geocoder, esri.dijit.Geocoder versus the tasks.Locator in the API reference.

I found the GitHub documentation and source for it at https://github.com/Esri/geocoder-search-widget-js/blob/master/resources/media_wiki.txt

I parametrized what seems appropriate, i.e. our geocoder URL is http://sagisservices.thempc.org/saint/rest/services/Locators/SAGIS.CENTERLINES/GeocodeServer Also I set value: 'Address Search. Ex: 1 E Bay St', to populate the prompt text in the entry box, etc.

As discovered with the Sample Geocoder, our server asks for Street, not SingleLineInput. I found that this esri.dijit.Geocoder also wants SingleLineInput via JSON and we need to tell it Street. However we can't find where to change this in the esri.dijit.Geocoder code. If anyone sees where to change this setting please reply. Also we will post back what we find out and our results.

KevinMacLeod1 · ‎01-11-2013

Update: The SingleLineInput field is indeed hard-coded into the dijit Geocoder, but they are looking in to updating this. I'll post when it's fixed. In the meantime tasks.locator is an alternative.

BillShockley · ‎01-22-2013

Is it possible to add this toolbar to the Basic Javascript viewer:

http://help.arcgis.com/en/webapi/javascript/arcgis/samples/toolbar_navigation/index.html

if so, does it go in the layout.js file?

Thanks,
BIll

KevinMacLeod1 · ‎01-23-2013

Is it possible to add this toolbar to the Basic Javascript viewer:

http://help.arcgis.com/en/webapi/javascript/arcgis/samples/toolbar_navigation/index.html

if so, does it go in the layout.js file?

Thanks,
BIll

Hi Bill,

The addition of additional widgets to the esri sample Viewers is exactly what I'm working on now, too. I want to add the AGS TOC widget that adds a layer table of contents like ArcMap. http://forums.arcgis.com/threads/75725-BasicViewer-with-TOC

I am just beginning to read the appropriate DojIt appears is you must work with the Dojo BorderContainer and ContentPane. http://dojotoolkit.org/documentation/tutorials/1.8/dijit_layout/

It is probably best practice to have widgets each in separate .js files. My layout.js has grown enormously and I will be refactoring and modularizing it soon.

I will post when I have results or insights.

BillShockley · ‎01-25-2013

Is it possible to add this toolbar to the Basic Javascript viewer:

http://help.arcgis.com/en/webapi/javascript/arcgis/samples/toolbar_navigation/index.html

if so, does it go in the layout.js file?

Thanks,
BIll

With a little work I think I got it to work. I added this style code to the basicviewer.html file at the top:

 <style>
      .zoominIcon { background-image:url(images/nav_zoomin.png); width:16px; height:16px; }
      .zoomoutIcon { background-image:url(images/nav_zoomout.png); width:16px; height:16px; }
      .zoomfullextIcon { background-image:url(images/nav_fullextent.png); width:16px; height:16px; }
      .zoomprevIcon { background-image:url(images/nav_previous.png); width:16px; height:16px; }
      .zoomnextIcon { background-image:url(images/nav_next.png); width:16px; height:16px; }
      .panIcon { background-image:url(images/nav_pan.png); width:16px; height:16px; }
      .deactivateIcon { background-image:url(images/nav_decline.png); width:16px; height:16px; }
    </style>

then added the the navToolbar Id the correct div on the bottom:

<div id="webmap-toolbar-center"></div>
      <div id="navToolbar" data-dojo-type="dijit.Toolbar">
       <div data-dojo-type="dijit.form.Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);}">Zoom In</div>
       <div data-dojo-type="dijit.form.Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);}">Zoom Out</div>
       <div data-dojo-type="dijit.form.Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon', onClick:function(){navToolbar.zoomToFullExtent();}">Full Extent</div>
       <div data-dojo-type="dijit.form.Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){navToolbar.zoomToPrevExtent();}">Prev Extent</div>
       <div data-dojo-type="dijit.form.Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){navToolbar.zoomToNextExtent();}">Next Extent</div>
       <div data-dojo-type="dijit.form.Button" id="pan" data-dojo-props="iconClass:'panIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.PAN);}">Pan</div>
       <div data-dojo-type="dijit.form.Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon' ,onClick:function(){navToolbar.deactivate();}">Deactivate</div>
                <!--Basemap,measure,share,time and layer list tools added if enabled-->
              
     </div>
            </div>

Next in the layout.js file I added the dogo.requires that are needed to create it

dojo.require("esri.toolbars.navigation");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Toolbar");

then I added the function ( I think that's what its called:

navToolbar = new esri.toolbars.Navigation(map);
  
   navToolbar.zoomToFullExtent = function () {
                    var map = this.map;
                    map.setExtent(initialExtent);
                }

I think that's it and I got it load on the top bar next to the legend.

BillShockley · ‎02-07-2013

I am having problems with the full extent button...it doesn't work. Here is a snippet of my code:

var popup = new esri.dijit.Popup(null, dojo.create("div"));
         map = new esri.Map("map",{
                basemap: "topo",//{"opacity":0.5},//streets | satellite | hybrid | topo | gray | oceans | national-geographic | osm
    center: [-98.10467, 38.28937], //long, lat
    zoom: 8,
    slider: true,
                infoWindow: popup,
    //showInfoWindowOnClick: false
    
                sliderStyle: 'small',
                wrapAround180: !configOptions.constrainmapextent,
                showAttribution: true,
                //set wraparound to false if the extent is limited.
                logo: !configOptions.customlogo.image //hide esri logo if custom logo is provided      
        });

      
  //Add Zoom Toolbar
  navToolbar = new esri.toolbars.Navigation(map);
  
   navToolbar.zoomToFullExtent = function () {
                    var map = this.map;
                    map.setExtent(map);
                }

Any suggestions?

Bill

khadijaahal_el_fadl · ‎04-15-2013

Hi all i have upgraded the original 1.2 sample javascript viewer to 3.2 , but only the basic widgets.
if any one wants the code i can send it 🙂

iris hadar

Hi Iris, could you please send me the code ,i will be gratful 🙂

khadijaahal_el_fadl · ‎04-15-2013

Hi all i have upgraded the original 1.2 sample javascript viewer to 3.2 , but only the basic widgets.
if any one wants the code i can send it 🙂

iris hadar

Hi Iris ,could you please send me the code ? i will be grateful 🙂
thank you in advance

PierreLermusieaux · ‎05-02-2013

Downloaded the latest version (April 25, 2013 that points to jsapi 3.5), modified it very slightly as indicated in a post in the forum to read a web map definition in JSON format rather than pointing to a web map id from ArcGIS.com. The JSON webmap contains 1 polygon operationalLayer and the baseMapLayer. Setup the proxy to point to our site proxy. Everything else is kept as is. Results: displays the layer correctly on top of the basemap, and we are able to print successfully using the utility.arcgisonline.com Export Web Map Task. So one would conclude that everything in the application and the setup works as expected.

Then I switched to our out-of-the-box ArcGIS Server 10.1 (SP1) "//<server>:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export Web Map Task". When attempting to print, the request gets an {"error":{"code":500,"message":"Error performing execute operation","details":[]}} (please note the level of detail returned). Using Firebug and looking at the content of the Post for the execute request, I noted that the Web_Map_as_JSON string does not contain the url of our operationalLayer.

Then I proceeded to add the url into the Web_Map_as_JSON string, pasted it into the input field, and submitted the job using the Rest page for our Export Web Map Task. This was successful and I got the PDF as a response. From this we can conclude that our out-of-the-box Export Web Map Task is working properly and can access the layer of interest.

Any idea as to why that is and how one can fix it?

PierreLermusieaux · ‎05-11-2013

Downloaded the latest version (April 25, 2013 that points to jsapi 3.5), modified it very slightly as indicated in a post in the forum to read a web map definition in JSON format rather than pointing to a web map id from ArcGIS.com. The JSON webmap contains 1 polygon operationalLayer and the baseMapLayer. Setup the proxy to point to our site proxy. Everything else is kept as is. Results: displays the layer correctly on top of the basemap, and we are able to print successfully using the utility.arcgisonline.com Export Web Map Task. So one would conclude that everything in the application and the setup works as expected.

Then I switched to our out-of-the-box ArcGIS Server 10.1 (SP1) "//<server>:6080/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export Web Map Task". When attempting to print, the request gets an {"error":{"code":500,"message":"Error performing execute operation","details":[]}} (please note the level of detail returned). Using Firebug and looking at the content of the Post for the execute request, I noted that the Web_Map_as_JSON string does not contain the url of our operationalLayer.

Then I proceeded to add the url into the Web_Map_as_JSON string, pasted it into the input field, and submitted the job using the Rest page for our Export Web Map Task. This was successful and I got the PDF as a response. From this we can conclude that our out-of-the-box Export Web Map Task is working properly and can access the layer of interest.

Any idea as to why that is and how one can fix it?

The issue has been fixed and it had nothing to do with the Javascript Basic Viewer but had everything to do with the connection from ArcGIS Server to an SQLExpress instance. Thank you for a great starter application.