Portal Gallery | ArcGIS API for JavaScript 3.26

This sample demonstrates how to display a set of web maps that contain gpx data in a gallery. The sample uses the Portal API, added at version 2.8 to allow developers to quickly build applications using data from thier organizations. This map pulls all the web maps from a group, loops through them and creates a thumbnail and link for each item. When clicked the link opens the web map in the Elevation Profile Template from the ArcGIS Online template gallery. This template, built using the ArcGIS API for JavaScript, displays the elevation profile for the selected feature.

Code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Grid Layout</title>

    <link rel="stylesheet" href="css/grid960.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css">

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="https://js.arcgis.com/3.26/"></script>
    <script>
    dojo.require('esri.arcgis.Portal');
    dojo.require("esri.IdentityManager");
    dojo.require("dojox.lang.aspect");

    var displayOptions = {
      templateUrl: 'https://www.arcgis.com/apps/OnePane/basicviewer/profile.html',
      themeName:'gray',
      numItemsPerPage: 6,
      group: {
        "owner": "Kelly",
        "title": "Running Routes"
      },
      portalUrl: 'https://www.arcgis.com'
    };
    var portal;
    var group;
    var nextQueryParams;
    var queryParams;

    function init() {
      portal = new esri.arcgis.Portal(displayOptions.portalUrl);
      dojo.connect(portal, 'onLoad', loadPortal);
      dojox.lang.aspect.advise(portal, "queryItems", {
        afterReturning: function (queryItemsPromise) {
          queryItemsPromise.then(function (result) {
            nextQueryParams = result.nextQueryParams;
            queryParams = result.queryParams;
          });
        }
      });
    }

    function loadPortal() {
        var params = {
          q: 'title: ' + displayOptions.group.title + ' AND owner:' + displayOptions.group.owner
        };
        portal.queryGroups(params).then(function(groups){
        //get group title and thumbnail url
        if (groups.results.length > 0) {
          group = groups.results[0];
          if (group.thumbnailUrl) {
            dojo.create('img', {
              src: group.thumbnailUrl,
              width: 64,
              height: 64,
              alt: group.title
            }, dojo.byId('groupThumbnail'));
          }

          dojo.byId('groupTitle').innerHTML = group.title;
          dojo.byId('sidebar').innerHTML = group.snippet;

          //Retrieve the web maps and applications from the group and display
          var params = {
            q: ' type: Web Map',
            num: displayOptions.numItemsPerPage
          };
          group.queryItems(params).then(updateGrid);
        }
      });
    }

    function updateGrid(queryResponse) {
      //update the gallery to get the next page of items

      var galleryList = dojo.byId('galleryList');
      dojo.empty(galleryList);  //empty the gallery to remove existing items

      //navigation buttons
      (queryResponse.results.length < 6) ? esri.hide(dojo.byId('next')) : esri.show(dojo.byId('next'));
      (queryResponse.queryParams.start > 1) ? esri.show(dojo.byId('prev')) : esri.hide(dojo.byId('prev'));

      //Build the thumbnails for each item the thumbnail when clicked will display the web map in a template or the web application
      var frag = document.createDocumentFragment();
      dojo.forEach(queryResponse.results, function (item) {
        if (item.id) {
          var url = (item.type === 'Web Map') ?
            displayOptions.templateUrl + '?webmap=' + item.id + '&theme=' + displayOptions.themeName :
            item.url;

          var li = dojo.create('li', {}, frag);
          var a = dojo.create('a', {
            href: url,
            target: '_blank',
            innerHTML: '<div class="tooltip"><p>' + item.snippet + '</p></div><img src="' + item.thumbnailUrl + '"/><div>' + item.title + '</div>'
          }, li);
        }
      });

      dojo.place(frag, galleryList);
    }

    function getNext() {
      if (nextQueryParams.start > -1) {
        group.queryItems(nextQueryParams).then(updateGrid);
      }
    }

    function getPrevious() {
      if (nextQueryParams.start !== 1) { //we aren't at the beginning keep querying.
        var params = queryParams;
        params.start = params.start - params.num;
        group.queryItems(params).then(updateGrid);
      }
    }

    dojo.ready(init);
    </script>
  </head>

  <body>
    <div id='header'>
      <div class='container_16'>
        <div class='grid_2'>
          <span id='groupThumbnail'></span>
        </div>
        <div class='grid_14'>
          <h1 id='groupTitle'></h1>
        </div>
      </div>
    </div>
    <div id='mainContent'>
      <div class='container_16'>
        <div class="grid_3">
          <div id='sidebar'></div>
        </div>
        <div class="grid_13">
          <a id='prev' style='left:-8px;' class="large leftbutton gray navButton"
          href='javascript:getPrevious();'>◄ Prev</a>
          <ul id='galleryList' class='gallery'></ul>
          <a id='next' style='right:20px;' class="large rightbutton gray navButton"
          href='javascript:getNext();'>Next ►</a>
        </div>
      </div>
    </div>
  </body>

</html>

	Site wide shortcuts
`?`	Bring up this help dialog
`esc`	Dismiss this help dialog
`gh`	Go to Home
`gg`	Go to Guide
`ga`	Go to API Reference
`gs`	Go to Sample Code
`gt`	Scroll to top of page
`spacebar`	Scroll page down
`shift spacebar`	Scroll page up
`gb`	Scroll to bottom of page

	Sample Code
`/`	Focus search
`es`	Explore in the Sandbox
`s`	Share in online code editor
`vl`	View live example

Explore in the sandbox View live sample Download as a zip file

Description

Code

Keyboard shortcuts

Explore in the sandbox
View live sample
Download as a zip file