Go to Latest version (official documentation)

JavaScript API 4.14 Sample Code

JavaScript API Sample Code

  • Home
  • Guide
  • Sample Code
  • API Reference
  • Showcase
  • Support

Themes

Get Started

Featured samples
Intro to MapView (2D)
Intro to SceneView (3D)
Intro to layers
Intro to popups
Intro to widgets

Latest Samples

Point clustering
Point clustering with visual variables
Filter clustered points
Filter clustered points with a slider
Vary point sizes by scale
Daylight widget
Line of sight widget
Save a web map
Disable view navigation
TimeSlider with timeOffset
Time-based layer
Add or remove graphics from a FeatureLayer
Tessellation helpers for custom WebGL layer views
Tiling support for custom WebGL layer views
Masking effect using a custom layer view

Mapping and Views

Load a basic web map
Save a web map
Load a basic web scene
Save a web scene
Web scene - slides
Create a local scene
SceneView - goTo()
View padding
Use Portal Basemaps
Create a custom basemap
Swap web maps in the same view
Switch view from 2D to 3D
Composite views
Custom background for SceneView
Underground navigation in global mode
Take a screenshot of a SceneView

Layers

Create layer from portal item
VectorTileLayer
VectorTileLayer from JSON
IntegratedMeshLayer
StreamLayer
KMLLayer
OpenStreetMapLayer
WebTileLayer
WMSLayer
WMTSLayer
Select WMTS sublayer
GeoJSONLayer
GeoRSSLayer
BuildingSceneLayer with Slice widget
Filter BuildingSceneLayer

FeatureLayer

Intro to FeatureLayer
Created from array of graphics
Add or remove graphics from a FeatureLayer
Highlight point features
Label features using Arcade expressions
Add labels to a FeatureLayer
Multi-line labels
Add multiple label classes to a layer
Filter features by attributes
Apply effects to features
Basic Querying on FeatureLayer
Created from a shapefile

SceneLayer

Intro to SceneLayer
Filter features by geometry with SceneLayer
Realistic buildings
Coloring options for textured buildings
Add edges to a SceneLayer
Point geometries
Filter and query
Query client-side 3D extents
SceneLayerView - query statistics by geometry
Highlight SceneLayer

MapImageLayer

Intro to MapImageLayer
Toggle sublayer visibility
Set definition expressions on sublayers
Set renderers on sublayers
Label sublayer features
Create dynamic map layers
Dynamic data layer with table join
Dynamic data layer with query table
MapImageLayer - Explore data from a dynamic workspace
Dynamic data layer with raster data

CSVLayer

Intro to CSVLayer
CSVLayer - Project points on the fly

ImageryLayer

Intro to ImageryLayer
Client side pixel filter
Server side raster function
Client side rendering rules
Raster attribute table
Client-side chart for ImageryLayer
Image coordinate system

PointCloudLayer

Intro to PointCloudLayer
Toggle visualizations
Change point size and density
Intensity color modulation
Filter points in a PointCloudLayer

Custom Layers

Custom TileLayer
Custom DynamicLayer
Custom LERC Layer
Custom BlendLayer
Custom ElevationLayer - Exaggerating elevation
Custom ElevationLayer - Thematic data as elevation
Custom WebGL layer views
Animated lines with WebGL
Tessellation helpers for custom WebGL layer views
Tiling support for custom WebGL layer views
Masking effect using a custom layer view

Query

FeatureLayerView - query
Query attachments
Query related features
Query statistics client-side by distance
Query statistics client-side
Highlight features by geometry
Query features from a FeatureLayer
FeatureLayerView - query statistics by geometry
SceneLayerView - query statistics by geometry

Editing

Edit features with the Editor widget
Editor widget with configurations
FeatureLayer applyEdits
Update Feature Attributes
Advanced attribute editing
Popup with edit action

Draw

Sketch widget
Sketch update validation
Draw non-intersecting line
Import glTF 3D models
Sketch in 3D

Visualization

Symbol Playground
Vary point sizes by scale
Visualize features by unique types
Visualize data with class breaks
Visualize data with dictionary renderer
Generate data-driven continuous color visualization
Generate data-driven visualization of unique values
Generate continuous color visualization for 3D buildings
Generate a class breaks visualization
Generate a relationship visualization
Generate a predominance visualization
Generate a dot density visualization
Data-driven continuous color
Data-driven continuous size
Dot density
Visualize points with a heatmap
Create a scale-dependent visualization
Wurman dots
Data-driven extrusion
Multivariate visualizations (3D)
Multivariate data exploration
Extrude buildings footprints based on real world heights
Create a custom visualization using Arcade
CIMSymbol
WebStyleSymbol (2D)
Visualize feature layer with proportionally-sized WebStyleSymbols (2D)
Visualize features with realistic WebStyleSymbols
Realistic water visualization in 3D
Path visualization in 3D
Point styles for cities
Using callout lines with labels
Animate opacity visual variable
Animate color visual variable
Update legend text
Update a renderer's attribute
Customize ColorSlider Histogram
Client-side projection

Clustering

Point clustering
Point clustering with visual variables
Filter clustered points
Filter clustered points with a slider

Popups

Intro to PopupTemplate
Dock popup positions
Multiple popup elements
Reference Arcade expressions in PopupTemplate
Summarize intersecting points in a popup
PopupTemplate with functions
PopupTemplate with promise
Popup with DOM node
Popup actions
Custom popup actions per feature
Popup with edit action

Graphics

Intro to graphics
Add graphics to a SceneView
Working with 3D mesh primitives
Low poly terrain using mesh geometry

Searching

Search widget
Search widget with multiple sources
Search widget with custom source
QueryTask
FindTask
IdentifyTask

Analysis

GeometryEngine - geodesic buffers
Geoprocessing - viewshed analysis
Geoprocessing - hotspot analysis
RouteTask
Query Elevation (points)
Query Elevation (lines)

Widgets

BasemapGallery widget
Bookmarks widget
CoordinateConversion widget
CoordinateConversion widget - custom formats
Daylight widget
Directions widget
Histogram widget
HistogramRangeSlider
LayerList widget
LayerList widget with actions
Legend widget
Add a Legend to LayerList
Legend widget card style
Line of sight widget
Locate button
Measurement widget
Measurement in 2D
Measurement in 3D
BuildingSceneLayer with Slice widget
Print widget
Swipe widget
Swipe widget with scroll
Track current location
Track widget simulation
TimeSlider widget
TimeSlider with timeOffset
Expand widget
Feature widget
Feature widget in a side panel
Using the view's UI
Responsive widgets
Responsive apps using CSS

Widgets (Advanced)

Create a custom widget
Custom Recenter widget
Using widgets with React
Custom widgets with Vue

More 3D

Toggle ground elevation
SceneView - shadow and lighting
SceneView - hitTest
Elevation options
ElevationLayer
Satellites in 3D view

Time

TimeSlider widget
Filter features with TimeSlider
TimeSlider with timeOffset
Time-based layer

Other

Animate layer visibility
Request data from a remote server
Access ArcGIS Online items via OAuth
Chaining promises
Access features with pointer events
Synchronize MapView and SceneView
Calcite Maps and Bootstrap
Using Esri Icon Fonts
Watch for changes
Event explorer / watch properties
Zoom to extent of features
Drag and drop portal items
Disable view navigation
Disable rotation on the view
Disable all zooming on the view
Back to Top
Loading...

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

Explore in the sandbox Open in CodePen View live

This sample shows how to use out-of-the-box themes. See the Styling guide topic for more information.

Tags
2DMapViewstylingCSSthemestyle4.1

Sample search results

TitleSample
Loading...
Feedback on this topic?
ArcGIS for Developers
  • Home
  • Features
  • Documentation
  • Support
  • Pricing
  • Startups
  • Blog
ArcGIS Platform
  • ArcGIS Online
  • ArcGIS Desktop
  • ArcGIS Enterprise
  • ArcGIS for Developers
  • ArcGIS Solutions
  • ArcGIS Marketplace
About Esri
  • About Us
  • Careers
  • Insiders Blog
  • User Conference
  • Developer Summit

Copyright © 2020 Esri. All rights reserved. | Privacy | Terms of use | FAQ

Keyboard shortcuts


Site wide shortcuts
?Bring up this help dialog
escDismiss this help dialog
ghGo to Home
ggGo to Guide
gaGo to API Reference
gsGo to Sample Code
gtScroll to top of page
spacebarScroll page down
shift spacebarScroll page up
gbScroll to bottom of page
Sample Code
/Focus search
escRemove search focus
enterFocus first search result
esExplore in the Sandbox
sShare in online code editor
vlView live example