Hide Table of Contents
View Web map viewer sample in sandbox
Web map viewer

Description

This sample demonstrates how to use the ArcGIS Portal API, added at version 2.8, to view web maps from the ArcGIS Online Community Basemap group. First we load the portal, in this case ArcGIS.com, using the Portal class. Once the portal has loaded query for the 'Community Basemap' group. Once the group is found a query is created to retrieve five of the top rated maps.

var params = {
q
: 'title:Community Basemaps AND owner:esri'
};
portal
.queryGroups(params).then(function(response){
var group = response.results[0];
var queryParams ={
q
:'type:"Web Map" -type:"Web Mapping Application"',
sortField
:'created',
sortOrder
:'desc',
num
:5
};
group.queryItems(queryParams).forEach(loadMap);
});

Note that when we query the group we can use the forEach function to loop through each of the items in the result array and create a map.

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>Web Map Viewer</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
  <link rel='stylesheet' href='css/layout.css'>

  <script>var dojoConfig = { parseOnLoad: true };</script>
  <script src="https://js.arcgis.com/3.46compact/"></script>
  <script>
    dojo.require('esri.arcgis.Portal');
    dojo.require('esri.arcgis.utils');
    dojo.require("esri.map");
    dojo.require('esri.dijit.Attribution');

    var portal, items;
    var webmaps = [], map, currentMap = 0;
    var i18n;

    function init() {
      portal = new esri.arcgis.Portal('https://www.arcgis.com');
      dojo.connect(portal, 'onLoad', loadPortal);
    }

    function loadPortal() {
      //query the group and retrieve the Web Maps.
      var params = {
        q: 'title:Community Basemaps AND owner:esri'
      };
      portal.queryGroups(params)
        .then(function (response) {
        if (response.results.length > 0) {
          var group = response.results[0];
          var queryParams = {
            q: 'type:"Web Map" -type:"Web Mapping Application"',
            num: 10
          };
          group.queryItems(queryParams)
            .then(function (response) {
            if (response.results.length > 0) {
              items = response.results;
              //load the first map
              createMap(items[0]);
              //create thumbnail gallery
              createThumbs(items);
            } else {
              console.log('This group does not contain any public web maps to display.');
              esri.hide(dojo.byId('loadingImg'));
            }

          });
        } else {
          esri.hide(dojo.byId('loadingImg'));
        }
      });
    }

    function createMap(item) {
      var mapDeferred = esri.arcgis.utils.createMap(item.id, dojo.create('div', {
        id: item.id
      }, dojo.byId('mainMap')), {
        mapOptions: {
          showAttribution: true,
          slider: false
        }
      });
      mapDeferred.then(function (response) {
        map = response.map;
        map.id = item.id;
        map.title = item.title;
        map.owner = item.owner;
        map.snippet = item.snippet;
        webmaps[currentMap] = map;

        updateDetails(map);
        esri.hide(dojo.byId('loadingImg'));
      }, function (error) {
        if (map) {
          map.destroy();
          dojo.destroy(map.container);
          getNext();
        }
      });
    }

    function createThumbs(items) {
      var frag = document.createDocumentFragment();
      dojo.forEach(items, function (item, index) {
        if (item.id) {
          var thumbnail = item.thumbnailUrl || 'https://static.arcgis.com/images/desktopapp.png'; //use default image if one is not provided
          var li = dojo.create('li', {
            innerHTML: '<img src="' + thumbnail + '"/><p class="ellipsis">' + item.title + '</p>'

          }, frag);
          dojo.addClass(li, 'grid_2 gallery_grid');
        }
        dojo.connect(li, 'onclick', function () {
          //close the thumbnail panel
          hideMap();
          esri.hide(dojo.byId('thumbnailContainer'));
          currentMap = index;
          showMap();
        });
      });
      dojo.place(frag, 'thumbnailList');
    }

    function showMap() {
      //animate the display of the next map to fade-in
      //increment the map count div
      var myMap = webmaps[currentMap];
      if (myMap && myMap.id) {
        var node = dojo.byId(myMap.id);
        esri.show(node);
        updateDetails(myMap);
        var anim = dojo.fadeIn({
          node: node
        });
        anim.play();
      } else {
        //create the map
        esri.show(dojo.byId('loadingImg'));
        createMap(items[currentMap]);
      }
    }

    function updateDetails(item) {
      dojo.byId('mapTitle')
        .innerHTML = item.title;
      dojo.byId('mapOwner')
        .innerHTML = item.snippet;
      dojo.byId('mapCount')
        .innerHTML = dojo.string.substitute(
        "Map ${page} of  ${total}", {
        page: (currentMap + 1),
        total: items.length
      });
    }

    function hideMap() {
      //Fade out the previous map
      var node = dojo.byId(webmaps[currentMap].id);
      esri.hide(node);
      dojo.byId('mapTitle').innerHTML = '';
      dojo.byId('mapOwner').innerHTML = '';
      dojo.byId('mapCount').innerHTML = '';

      var anim = dojo.fadeOut({
        node: node
      });
      anim.play();
    }

    function getNext() {
      //hide the existing map
      hideMap();
      (currentMap >= -1 && currentMap < (items.length - 1)) ? currentMap += 1 : currentMap = 0;
      showMap();
    }

    function getPrevious() {
      hideMap();
      (currentMap <= items.length && currentMap > 0) ? currentMap -= 1 : currentMap = items.length - 1;
      showMap();
    }

    function toggleGallery() {
      var tc = dojo.byId('thumbnailContainer');
      tc.style.display === 'none' ? esri.show(tc) : esri.hide(tc);
    }

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

<body>
<div class='container_12'>
<div  id='mapSection' class='grid_12 rounded'>
  <div id='mainMap' >
 <div id='thumbnailContainer' class='gallery-thumbs-container' style='display:none;'>
<div id='thumbnailList' class='container_12 gallery-thumbs-list'></div>
 </div>
     <img id="loadingImg" alt="" src="images/loading.gif" style="position:absolute; right:50%; top:50%; z-index:100;display:none;"/>
    <div class="gallery-nav">
        <div class="gallery-nav-right" onclick='getNext();'></div>
        <div class="gallery-nav-left" onclick='getPrevious();'></div>
    </div>
  </div>
  </div>

  <div class='clear' ></div>
  <div id='detailsSection' class='grid_12 rounded'>
  <div class='grid_9 alpha'>
    <div class='pod' style='padding-left:10px;'>
      <div id='mapTitle' class='title' ></div>
      <div class='subtitle' id='mapOwner'></div>
    </div>
  </div>

  <div class='grid_3 omega'>
    <div class='pod'>
      <div id='mapCount' class='subtitle'></div>
    </div>
  </div>
      <div>
         <div id='thumbs' class='gallery-thumb' onclick='toggleGallery();'></div>
  </div>
  </div>

</div>
</body>
</html>
 
          
Show Modal