Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Mobile gallery with map
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample shows how to use the Gallery widget added at version 2.2. The Gallery widget is a touch-aware thumbnail gallery designed for mobile devices such as the iPhone, iPad, Android, and other supported devices. Users can browse through the gallery of thumbnails using a flick motion.
In this sample, the basemap gallery is displayed using the small thumbnail which is suitable for smaller mobile devices like the iPhone.
var params = {};params.items = items;
params.thumbnailStyle="small";
gallery = new esri.dijit.Gallery(params,"galleryDiv");
When an end-user clicks a thumbnail in the gallery, the map page is displayed with the selected basemap.
dojo.connect(gallery,"onSelect",function(item){
basemaps.select(item.id);
$.mobile.changePage("#mapPage", null, false, true);
});
basemaps.select(item.id);
$.mobile.changePage("#mapPage", null, false, true);
});
Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Mobile Gallery</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"/>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css"/>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}
.ui-content {
padding: 0 !important;
}
#map {
height: 100%;
width: 100%;
position: absolute;
z-index: 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="https://js.arcgis.com/3.46compact/"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.dijit.Gallery");
dojo.require("esri.dijit.BasemapGallery");
var map,
gallery,
basemapGallery;
function init() {
map = new esri.Map('map', {
basemap: "topo-vector",
center: [-71.121865, 42.370011],
zoom: 9
});
basemapGallery = new esri.dijit.BasemapGallery({
showArcGISBasemaps: true,
bingMapsKey: '/*Please enter your own Bing Maps key*/',
map: map
});
dojo.connect(basemapGallery, 'onLoad', function () {
items = $.map(basemapGallery.basemaps, function (basemap) {
return {
thumbnailUrl: basemap.thumbnailUrl,
id: basemap.id,
title: basemap.title
};
});
//display basemaps in the gallery
var params = {};
params.items = items;
params.thumbnailStyle = 'small';
gallery = new esri.dijit.Gallery(params, 'galleryDiv');
dojo.connect(gallery, 'onSelect', function(item) {
console.dir(item);
basemapGallery.select(item.id);
$(".rp").panel("close");
});
gallery.startup();
});
dojo.connect(basemapGallery, 'onError', function (msg) {
console.log(msg);
});
dojo.connect(map, 'onLoad', function (evt) {
$(document).ready(jQueryReady);
});
}
function jQueryReady() {
}
dojo.ready(init);
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-theme="a" data-role="header" data-position="fixed">
<h3>Map Gallery</h3>
<a href="#right-panel" data-rel="panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-btn-right">Menu</a>
</div>
<div data-role="content">
<div id="map"></div>
</div>
<div class="rp" data-role="panel" data-swipe-close="false" id="right-panel" data-theme="c" data-position="right">
<div id="galleryDiv"></div>
</div>
</div>
</body>
</html>