Hide Table of Contents
View Portal Gallery sample in sandbox
Portal Gallery

Description

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.40/esri/css/esri.css">

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="https://js.arcgis.com/3.40/"></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>
 
          
Show Modal