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
Map navigation using CSS3 transforms
Explore in the sandbox
Open in CodePen
View live sample
Description
The sample code below shows three new map configuration options added at version 2.6 of the API: fadeOnZoom, force3DTransforms and navigationMode. The first two are boolean while the third is a string. Valid options for navigationMode are "css-transforms" and "classic". If classic is specified, fadeOnZoom and force3DTransforms are ignored. There are two reasons to use CSS transforms: aesthetics and performance. Most will agree that the fade effect provides a better experience than simply adding and removing images that make up map layers. In terms of performance, using CSS transforms causes some browsers to use hardware acceleration. This can be especialy helpful on mobile devices. By default, version 2.6 uses CSS transforms in browsers that support them. The purpose of this sample is to show the new map configuration options and the syntax to use them.Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Force esri.Map to use CSS3 Transforms</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{ margin: 0; padding: 0; }
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
var map;
function init() {
map = new esri.Map("map", {
center: [-48.813, 42.221],
zoom: 3,
fadeOnZoom: true,
force3DTransforms: true,
navigationMode: "css-transforms"
});
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
map.addLayer(basemap);
}
dojo.ready(init);
</script>
</head>
<body class="tundra">
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
</div>
</div>
</body>
</html>