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

Sample Javascript Viewer

ChristianSmith

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

Thanks

Smitty

Encontre mais publicações marcadas com

Accepted answers

All comments

kenbuja

Does anyone know how to become a part of the beta testing program for the Javascript Viewer that ESRI is currently developing?

I would like to be a part of this program so I can determine how many of my business needs can be accomplished by the viewer and how many business needs can be fulfilled by extending the widgets or building additional widgets.

The beta release is scheduled for march 28. You can apply to be part of the beta program here.

KevinMacLeod1

Jeff your new site looks really nice.

I agree they are two distinct philosophies. To really win the market ESRI needs both. I am excited about this!

mvolz47

Does anyone know how to become a part of the beta testing program for the Javascript Viewer that ESRI is currently developing?

I would like to be a part of this program so I can determine how many of my business needs can be accomplished by the viewer and how many business needs can be fulfilled by extending the widgets or building additional widgets.

GrantHerbert

updated link to our new viewer

www.mymanatee.org/gisapps/mobile/index.html

Hey Jeff, that looks great! Impressive work.

JeffPace1

updated link to our new viewer

www.mymanatee.org/gisapps/mobile/index.html

JeffPace1

I totally agree and understand.

I will happily give you the code, but here are my concerns

1. It is not AMD style. The original viewer was released at 1.6 and has never been updated. I have been patching it along, badly. It functions at 3.4 but I have not tested it past that. Taking it to AMD style would be a ridiculous amount of work, which is why we deprecated it
2. I have alot of stuff hardcoded into to make it work. Back in the 1.6 days alot of functionality (like legends, etc..) didnt exist. We wrote a lot of code to custom include that, and dropped it but didnt always clean up the code afterwards
3. It doesnt work on mobile devices
4. It doesnt work AT ALL on touch devices. In fact, its a disaster, hence deprecating.
5. There is alot of code in there to make it work on IE6 (which we finally dropped support for last year)
6. Its slow as dirt

Your call. Our new viewer is way better, and I am excited to see what ESRI comes up with (would be nice to be in a supported environment, so to speak)

BobbySells

Thanks for the replies Anthony and Jeff.
I agree 100% about one stop shop. I jumped on Flex as soon as ESRI debuted it and have done a tremendous amount of modification and development. We made heavy use of the single viewer model with multiple configs that are loaded from a database.
Jeff-that is why I wondered if there was a base sample to get going with. I downloaded the basic viewer from github but was interested in continuing with the Flex look and feel.
Bobby

JeffPace1

Bobby,
I got your email, but figured I would reply here.

I would recommend waiting for ESRI's supported viewer this summer. We are already abandoning that viewer and are moving to a "tablet" first one.

Some musings:

ESRI aggressively is pitching the "one use, one app" philosophy, as seen in the samples. Need directions, write an app that does directions. Need parcel info? Write a parcel viewer.

Good for simple users. Terrible for both developers and for advanced users. The problem is there are WAY more simple users

So the whole "modular viewer template" that you can add dozens of widgets to, a desktop replacement as it were, is going away. At least, its almost actively discouraged.

A few (myself included) of the more veteran javascript developers disagree, any there are many threads discussing it. Its a philosophy difference that I think will be aggravated by the influx of former flex developers that are used to dropping widgets onto an application to add functionality.

I'm not sure what the answer is, but I know for my user base, they want one app that can do everything. They don't, ever, want to "do this here, then go here to do that, then over there to do this".

Our old viewer did this pretty well, but it was heavy weight and not very mobile-friendly. Our new one (very in development stage) is mobile first, but desktop replacement as the end goal. www.mymanatee.org/gisapps/mobile/mobile/index.html

We will consider ESRI's app when we see it this summer, and see how much we can migrate. But so far so good in this one.

Also I apologize if anyone has emailed or PM'd and I didn't reply. I prefer to keep dialog to the forums where it is to the benefit of everyone.

-Jeff

AntGiles

Currently all the talk at the developer summit is about the new web app builder for Javascript. It looks like a pretty neat product and will be out for beta testing at the end of the month. Check out the video:

http://video.esri.com/watch/3211/web-app-builder

Regards

Anthony

BobbySells

So we are going from the Flex API, which we have highly customized and invested in, to Javascript. I couldn't believe there was no sample viewer to get started with and build from there. I saw Jeff's manatee.org site and instantly see that it resembles flex. Is there a basic template that has that feel to get started with?
Bobby

JohnGravois

yusuke,

thanks for finding this fix. i have submitted a pull request to the repro on your behalf so that the change can be incorporated into the AGOL template in a future update.

https://github.com/Esri/basic-viewer-template/pull/1

you could even do this yourself next time if you wanted.

thanks again!

YusukeNUNOKAWA

I found the problem in Basic Viewer Template: Internet Explorer freezes when reopening a panel after closing it in web application based on basic viewer template.

The following source code was download in the GitHub page of "Basic Viewer Template".
https://github.com/Esri/basic-viewer-template
This implemention is not good.
Function for closing a panel is called with "href" property, "onclick" property better than it.

<div style="float:right;clear:both;" id="paneCloseBtn"><a title=${close_title} alt=${close_alt} href="JavaScript:hideLeftPanel();"><img src=images/closepanel.png border="0"/></a></div>

I fix it like the following.

<div style="float:right;clear:both;" id="paneCloseBtn" onclick="hideLeftPanel();"><a title=${close_title} alt=${close_alt} href="#"><img src=images/closepanel.png border="0"/></a></div>

In ArcGIS Online, I can't touch it.
Could you please fix it.

AlexeyMokrev

Hello.
I have a similar problem with code 500.
Please tell me in detail how you solved it?

PierreLermusieaux

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.

PierreLermusieaux

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?

khadijaahal_el_fadl

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

khadijaahal_el_fadl

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 🙂

BillShockley

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

BillShockley

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.

KevinMacLeod1

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

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

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.

KevinMacLeod1

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.

khutchins

If you define the web map using the JSON spec then it does not make a request to arcgis.com unless you are referencing services from arcgis.com. If you view the source for the sample I sent you'll see that the web map is defined using JSON for example here's the JSON for one of the layers that will make up the map.

{
"isReference": true,
"opacity": 1,
"visibility": true,
"url": "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"
}],
"title": "World_Terrain_Base"
}

I am seeking an easy way to leverage the power of ArcGIS.com's "builder" website, but for our website running on our own server in our intranet. I see ways to achieve the functionality of webmap id with json referencing item id's. However that seems to do the same thing, call ArcGIS.com, right? I guess this is useful to over-ride individual things that were set on ArcGIS.com? Am I missing something? I do not see what the difference between referencing a single webmap id is, and referencing individual item id numbers. It still calls on ArcGIS.com. Thank you again.

KevinMacLeod1

Trevor that's certainly an important point, thank you for bring this topic up. We are all good ESRI customers and we are looking to work with ESRI to continue to improve the products. However this is of course a good thing to keep track of in general for application development.

For us, we intend to adhere to ESRI Terms and Conditions. I reviewed the Terms and Conditions for Web Mapping at http://www.esri.com/legal/pdfs/e-800-termsofuse.pdf

In our case, we are a municipal entity, and our website will NOT be a for-profit project. Also it will only be accessible via an internal intranet network, and will not exceed the transaction use limit. In fact, we are looking to avoid use of ArcGIS.com for all operational layers and even basemap layers. (We submitted our data to the Community Basemap and we have a good imagery base). We therefore appear to be in compliance with the Terms.

Kelly I am reading the web map documentation.. still trying to comprehend it, and the sample you provided.

I am seeking an easy way to leverage the power of ArcGIS.com's "builder" website, but for our website running on our own server in our intranet. I see ways to achieve the functionality of webmap id with json referencing item id's. However that seems to do the same thing, call ArcGIS.com, right? I guess this is useful to over-ride individual things that were set on ArcGIS.com? Am I missing something? I do not see what the difference between referencing a single webmap id is, and referencing individual item id numbers. It still calls on ArcGIS.com. Thank you again.

TrevorWeiland

@kmacleod - ArcGIS.com for personal use is free, however, for organizational use it is not- nor is it cheap ($17,500 per year for 100 users).

The self-hosted portal concept is interesting but just over the horizon. Discussing it is difficult as so much of how it will function is yet unknown- will be worth standing up a web server, maintaining the software, and administrating user accounts will be an organizational decision when we are able to evaluate this product. It will not be costless regardless of what ESRI charges.

I don't know if the self-hosted portal concept is a good substitute for a Sample Viewer.

NianweiLiu

We recently documented this spec here:

http://resources.arcgis.com/en/help/arcgis-web-map-json/

That's very helpful. It looks like it still missing a few items that has been around for a while, for example, pre-defined query. It's quite useful to create focused apps without much coding. I recall seen "query" in some of the JSON returned from arcgis.com, maybe still in beta?
After all, WebADF's XML spec has pre-defined query that can be configed using app manager, and ArcXML has "STOREDQUERY" tag for similar capabilities.

khutchins

The basic viewer (and other templates) all use the esri.arcigs.utils.createMap method to build a map based on an input webmap id. The createMap method also accepts an object that represents a webmap - we have a sample here showing this approach:

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/ags_createwebmapitem.html

So you could create an object in the proper format and pass that in to createMap. In the past its been difficult to recommend this approach because we haven't had documentation for the web map specification. We recently documented this spec here:

http://resources.arcgis.com/en/help/arcgis-web-map-json/

KevinMacLeod1

I believe this is coming with the json representation of a webmap.

Jeff and all others interested, I had an idea along with some new documentation which appears relevant.

http://www.arcgis.com/apidocs/rest/

The above link documents what appears to be calls to ArcGIS.com or portal? Maybe this will enable use of the Basic Viewer with our own services?

As you and others here noted, calls to ArcGIS.com I guess are JSON, e.g. ..
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/intro_webmap.html

We had discussed using the JavaScript Basic Viewer template without ArcGIS.com (using our own Arc Servers so as to work in an intranet if Internet connectivity is lost)...
http://forums.arcgis.com/threads/44091-Javascript-Template-without-ArcGIS.com-Map-Services

So, Does the Basic Viewer template call ArcGIS.com and look at a specific 'config file'? I use that term loosely, meaning only, that it would seem that while we specify many things locally such as embed (true or false), the logo, links, etc... many settings are stored at ArcGIS.com, such as which layers to load, their scale dependency and transparency, and other settings that are so nicely adjustable via a graphical UI. However, all these are merely referenced by "webmapid" so all this info must be stored in a file on ArcGIS.com. I am still reviewing the threads below and the template code itself, but I wanted to throw it out here in case I'm on the wrong track. But, if I am understanding this correctly, this may allow us to use the Basic Viewer with our own ArcServer REST Services, yet use ArcGIS.com as a "Flex Builder" but for JavaScript. It would be great if we could just download the "configuration" file of our ArcGIS.com WebMap so it would be a drop-in way to create our website, almost as easily as Flex. Or perhaps we can identify these settings via JSON and somehow through this accomplish the same goal?

I hope the links above help others with the same goal. Thanks all for the great support from ESRI folks and the community.

JeffPace1

I believe this is coming with the json representation of a webmap.

Participe da Conversa

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

Entrar
Registrar

Links Rápidos

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