View padding

Loading...

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample shows how to use the padding property on the MapView. Use this to make center, extent, etc. work off a subsection of the full view. After setting the padding, you can place the UI elements in the padding area and still make the map center properly in the view.

In this sample a sidebar 320px wide is placed on top of the right side of the view. We can offset the center of the view by this same width so that zooming and UI elements are properly placed in the remaining view space.

// Same value as the #sidebar width in CSS
view.padding.right = 320;

113 results for Sample Code:

TitleSample
View padding Explore in the sandboxSandbox Share View live
Synchronize MapView and SceneView Explore in the sandboxSandbox Share View live
Intro to MapView - Create a 2D map Explore in the sandboxSandbox Share View live
Intro to FeatureLayer Explore in the sandboxSandbox Share View live
Load portal items via drag & drop Explore in the sandboxSandbox Share View live
Load a basic WebMap Explore in the sandboxSandbox Share View live
Bookmarks widget Explore in the sandboxSandbox Share View live
Custom BlendLayer Explore in the sandboxSandbox Share View live
WMTSLayer Explore in the sandboxSandbox Share View live
Popup actions Explore in the sandboxSandbox Share View live
Popup dock positions Explore in the sandboxSandbox Share View live
PopupTemplate - use functions to set content Explore in the sandboxSandbox Share View live
PopupTemplate with promise Explore in the sandboxSandbox Share View live
Visualize points with a heatmap Explore in the sandboxSandbox Share View live
Visualize features by type Explore in the sandboxSandbox Share View live
Swap web maps in the same view Explore in the sandboxSandbox Share View live
Compass widget Explore in the sandboxSandbox Share View live
Using widgets with React Explore in the sandboxSandbox Share View live
Legend widget Explore in the sandboxSandbox Share View live
Search widget with multiple sources Explore in the sandboxSandbox Share View live
Draw polyline Explore in the sandboxSandbox Share View live
Query features from a FeatureLayer Explore in the sandboxSandbox Share View live
Query features from a FeatureLayerView Explore in the sandboxSandbox Share View live
Intro to popups Explore in the sandboxSandbox Share View live
Intro to PopupTemplate Explore in the sandboxSandbox Share View live
Custom DynamicLayer Explore in the sandboxSandbox Share View live
Custom LERC Layer Explore in the sandboxSandbox Share View live
GeoRSSLayer Explore in the sandboxSandbox Share View live
Intro to ImageryLayer Explore in the sandboxSandbox Share View live
StreamLayer Explore in the sandboxSandbox Share View live
VectorTileLayer Explore in the sandboxSandbox Share View live
Overview map Explore in the sandboxSandbox Share View live
Multiple popup elements Explore in the sandboxSandbox Share View live
Disable rotation on the view Explore in the sandboxSandbox Share View live
Switch view from 2D to 3D Explore in the sandboxSandbox Share View live
Visualize all features with the same symbol Explore in the sandboxSandbox Share View live
Generate a predominance visualization Explore in the sandboxSandbox Share View live
Data-driven opacity Explore in the sandboxSandbox Share View live
CoordinateConversion widget Explore in the sandboxSandbox Share View live
Using widgets with Riot Explore in the sandboxSandbox Share View live
Intro to widgets using BasemapToggle Explore in the sandboxSandbox Share View live
CSVLayer - Project points on the fly Explore in the sandboxSandbox Share View live
VectorTileLayer from JSON Explore in the sandboxSandbox Share View live
Symbol playground Explore in the sandboxSandbox Share View live
Reference Arcade expressions in PopupTemplate Explore in the sandboxSandbox Share View live
Simple theme Explore in the sandboxSandbox Share View live
Themes Explore in the sandboxSandbox Share View live
Create an app with composite views Explore in the sandboxSandbox Share View live
Visualize data with class breaks Explore in the sandboxSandbox Share View live
Create a scale-dependent visualization Explore in the sandboxSandbox Share View live
Data-driven continuous size Explore in the sandboxSandbox Share View live
Feature Widget Explore in the sandboxSandbox Share View live
Update legend text Explore in the sandboxSandbox Share View live
Measurement in 2D Explore in the sandboxSandbox Share View live
Print widget Explore in the sandboxSandbox Share View live
ScaleBar widget Explore in the sandboxSandbox Share View live
Multi-line labels Explore in the sandboxSandbox Share View live
KMLLayer Explore in the sandboxSandbox Share View live
Select WMTSLayer sublayer Explore in the sandboxSandbox Share View live
Sketch update validation Explore in the sandboxSandbox Share View live
IdentifyTask Explore in the sandboxSandbox Share View live
Disable all zooming on the view Explore in the sandboxSandbox Share View live
Generate a class breaks visualization Explore in the sandboxSandbox Share View live
Multivariate data exploration Explore in the sandboxSandbox Share View live
Data-driven continuous color Explore in the sandboxSandbox Share View live
Visualize data with rotation Explore in the sandboxSandbox Share View live
Watch for changes Explore in the sandboxSandbox Share View live
Query statistics client-side by distance Explore in the sandboxSandbox Share View live
Query statistics client-side Explore in the sandboxSandbox Share View live
Geoprocessing - hotspot analysis Explore in the sandboxSandbox Share View live
Add labels to a FeatureLayer Explore in the sandboxSandbox Share View live
Add multiple label classes to a layer Explore in the sandboxSandbox Share View live
ImageryLayer - raster attribute table Explore in the sandboxSandbox Share View live
ImageryLayer - server side raster function Explore in the sandboxSandbox Share View live
Custom popup actions per feature attribute Explore in the sandboxSandbox Share View live
Popup with DOM node Explore in the sandboxSandbox Share View live
Using Esri Icon Fonts with map graphics Explore in the sandboxSandbox Share View live
Create a custom visualization using Arcade Explore in the sandboxSandbox Share View live
Scale feature sizes based on real world sizes (2D) Explore in the sandboxSandbox Share View live
Custom Recenter Widget Explore in the sandboxSandbox Share View live
Directions widget Explore in the sandboxSandbox Share View live
Add a Legend to LayerList Explore in the sandboxSandbox Share View live
Track current location Explore in the sandboxSandbox Share View live
ImageryLayer - client side rendering rules Explore in the sandboxSandbox Share View live
MapImageLayer - set renderers on sublayers Explore in the sandboxSandbox Share View live
MapImageLayer - Toggle sublayer visibility Explore in the sandboxSandbox Share View live
Sketch widget Explore in the sandboxSandbox Share View live
RouteTask Explore in the sandboxSandbox Share View live
Disable panning on the view Explore in the sandboxSandbox Share View live
Legend widget card style Explore in the sandboxSandbox Share View live
Client-side projection Explore in the sandboxSandbox Share View live
MapImageLayer - dynamic data layer with query table Explore in the sandboxSandbox Share View live
MapImageLayer - raster data source Explore in the sandboxSandbox Share View live
MapImageLayer - label sublayer features Explore in the sandboxSandbox Share View live
Disable scroll-zooming on the view Explore in the sandboxSandbox Share View live
Access features with pointer events Explore in the sandboxSandbox Share View live
Generate continuous color visualization Explore in the sandboxSandbox Share View live
Update Feature Attributes Explore in the sandboxSandbox Share View live
Highlight features by geometry Explore in the sandboxSandbox Share View live
Intro to graphics Explore in the sandboxSandbox Share View live
ImageryLayer - client side pixel filter Explore in the sandboxSandbox Share View live
Responsive apps using CSS Explore in the sandboxSandbox Share View live
Generate data-driven continuous size visualization Explore in the sandboxSandbox Share View live
Animate opacity visual variable Explore in the sandboxSandbox Share View live
GeometryEngine - geodesic buffers Explore in the sandboxSandbox Share View live
Create a FeatureLayer with client side graphics Explore in the sandboxSandbox Share View live
MapImageLayer - Explore data from a dynamic workspace Explore in the sandboxSandbox Share View live
Generate data-driven visualization of unique values Explore in the sandboxSandbox Share View live
Animate color visual variable Explore in the sandboxSandbox Share View live
LayerList widget with actions Explore in the sandboxSandbox Share View live
Query statistics by geometry Explore in the sandboxSandbox Share View live
Update FeatureLayer using applyEdits() Explore in the sandboxSandbox Share View live
Calcite Maps and Bootstrap Explore in the sandboxSandbox Share View live
Loading...