ArcGIS API for JavaScript – Basic Viewer template now available

We recently added a new JavaScript application template to
ArcGIS.com called the Basic Viewer. Using ArcGIS.com and the Basic Viewer
template, you can quickly create and publish applications with commonly
requested functionality such as a legend, basemap gallery and print tools. The
template includes many out-of-the-box widgets from the ArcGIS API for
JavaScript including the Editor, TimeSlider and Measurement widgets.
The Basic Viewer template is a fully configurable application that you can configure in ArcGIS.com or via a configuration file if you choose to download the template and host it on your
web server.

How to make a web application with the Basic Viewer

Create a Web application based on the Basic Viewer template
by performing the following steps:

  1. Open an existing map (or create a new one) using
    the ArcGIS.com
    map viewer
    . Use the map viewer to add layers, set an extent, configure map popups and add map notes. All of these settings are honored by the template and will appear in the application built using the template.
  2. Click the Share button and choose who can view the map. To publish the map as an application, you need to make the map available to a group, your organization, or the public.
  3. Click the Make
    a Web Application
    option to display a gallery of templates.
  4. Select Basic Viewer and use the Preview
    option to view your web map in the Basic Viewer template. The preview option is a great way to determine which template works best for your map.
  5. Close the preview window and select the Publish option for the Basic Viewer
    template to create a custom application based on the template. This published
    application is added to ArcGIS.com and can be shared with the public or with
    users in your group or organization.

If you would rather host the application on your own
web server, you can select the download option and download a zip file
containing the full source code for the template. The zip file contains
instructions for installing and configuring the template.

Configure the published template

After publishing the web map as an application, use the Configure App option to modify the application’s tools, title and color scheme.

  1. The last step of the application publishing process displays a dialog with details
    about the newly published application, and includes a link so you can view the
    item. Click go to the item now to edit the application’s description, thumbnail
    image, tags, and to begin the configuration process. You can always access the
    application via the My Content tab.
  2. Click the Configure App button to display the application configuration page. This page displays a preview of your web map using the Basic Viewer template along with options that allow you to change the appearance of the application and specify the functionality you want to
    include.
    Basic Viewer Config Pane
  3. After making the changes, click Refresh to view the template with your new settings and click Save to apply
    the changes to your application. Note that you can return to the configuration panel at any time and modify the template.

Click here
to view an application created using the Basic Viewer template. We hope you enjoy using the new template and are excited to see applications you build!

Contributed by Kelly Hutchins of the ArcGIS API for JavaScript development team

This entry was posted in Services and tagged , . Bookmark the permalink.

Leave a Reply

10 Comments

  1. Kelly says:

    Ken,

    You will need to setup a proxy. Detailed instructions on how to do that are found here:
    http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/ags_proxy.htm

    After setting up the proxy you’ll want to add the path to the proxy to the index.html file. In the configOptions object look for proxyurl and set the path there. For example:

    proxyurl: “http://servername/proxy/proxy.ashx”,

  2. Kelly says:

    I suspect its still an issue with the proxy. If you run the application then open either Firebug or Chrome Developer tools do you see any errors?
    For example, if I setup the basic viewer then provide an incorrect path to the proxy in my index.html file I’d see a message like this in the console tab:

    “NetworkError: 404 Not Found – http://testserver/proxy/proxy1.ashx?https://www.arcgis.com/sharing/generateToken

  3. Kelly says:

    Frank,

    You can download the source code for the template here:
    http://www.arcgis.com/home/item.html?id=89db99ee00834c85b3f9284d9e81c964

    But the general idea is that when the base map is switched I destroy and recreate the overview map look in the source code for the addOverview function to see how this works. You’ll also want to look at the addBasemap function – this is where I listen for the basemap gallery’s onSelectionChange event so I’m notified when a new basemap is selected.
    dojo.connect(basemapGallery, “onSelectionChange”, function () {
    //close the basemap window when an item is selected
    //destroy and recreate the overview map – so the basemap layer is modified.
    destroyOverview();
    dijit.byId(‘basemapBtn’).closeDropDown();
    });

  4. ulrichschaeffler says:

    Hello,
    how can I generally download a map template, after I have created it in ArcGIS.com map viewer?

    Thank you Uli

  5. suresh.rajamani says:

    How to configure my url as basemap url instead of arcgis online service?

  6. suresh.rajamani says:

    How to configure the basic viewer with local ArcGIS Javascript api?
    Please provide a sample.

  7. ganeshssac says:

    HI Kelly,
    Hi Guys
    I have downloaded the JavaScript sample viewer application and I was trying to customizing the print task with our organisation own service to create print web maps. when I use the default print service below from ArcGIS online

    “http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task”
    it works perfectly fine.
    When I change the printurl property to own print service, it doesn’t work. It comes up with error message saying request time exceeded.

    I am wondering it might due the proxy settings on my application . Although I followed the procedure as per JavaScript api references proxy settings user guide, and changed the config proxyUrl Property in the index.html to : “/proxy/proxy.ashx”

    and then in the common.config.js file – changed printTask url property:”to my own print service”

    Even though setting all the proxy, it comes with request time exceeded.

    I just wanted to ask is there any better way to check whether the proxy implemented on the webserver is communicating well with the application. Can anyone give me guide to check how to test proxy is working properly.
    you can also thread posted here:
    http://forums.arcgis.com/threads/100816-Javascript-sample-viewer-Print-task-error

    Regards
    Ganesh

  8. ganeshssac says:

    from your comment below:
    what is this servername in the proxyurl – is it computer name or something else?

    proxyurl: “http://servername/proxy/proxy.ashx”

  9. correaj says:

    Kelly,

    Is there a place I can get started that would show me how to add custom widgets(dijits) to the menu bar of the basic viewer?

    John

  10. scottstopyak says:

    This is a pretty good map. I have it running on apache in a centos server, which works well. I couldn’t figure out how to get it running under IIS. Anyway, the main reason for this post is to inquire and or complain about the accessibility. The way that I understand it, this cannot be viewed without signing in to an esri account. (Unless I spend 25 grand on the portal extension). This is a very significant barrier to making it useable as a public facing viewer. No one wants to fill out a form and verify an email and sign in…yada yada …just to view a map link they clicked on. Is there no way to avoid this? What gives?