ArcGIS Developers

Documentation
Features
Pricing
Support

ArcGIS API for JavaScript

Overview
Sample Code
API Reference
Showcase
Blog

Get Started
- Featured samples
- Intro to MapView (2D)
- Intro to SceneView (3D)
- Intro to layers
- Intro to popups
- Intro to widgets
Latest Samples
- ElevationProfile widget
- Visualize data on Mars
- SceneLayer attribute editing (Editor widget)
- Point clustering - query clusters
- Intro to layer effect
- Highlight feature with drop-shadow
- FeatureEffect - multiple effects
- FeatureEffect - drop-shadow
- Size visual variable themes
- VectorTileLayer - update style layers
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
- VectorTileLayer - update style layers
- IntegratedMeshLayer
- IntegratedMeshLayer modification
- StreamLayer
- KMLLayer
- OGCFeatureLayer
- OpenStreetMapLayer
- WebTileLayer
- WMSLayer
- WMTSLayer
- Select WMTS sublayer
- GeoJSONLayer
- GeoRSSLayer
- BuildingSceneLayer with Slice widget
- Filter BuildingSceneLayer with BuildingExplorer
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
- Intro to ImageryTileLayer
- Intro to WCSLayer
- Client side pixel filter
- Server side raster function
- Client side rendering rules
- ImageryTileLayer - shaded relief renderer
- Visualizing wind data with VectorFieldRenderer
- 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
- Build a custom layer view using deck.gl
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
- Edit features in 3D with the Editor widget
- SceneLayer attribute editing (Editor widget)
- Editor widget with configurations
- FeatureTable with editing enabled
- 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
Visual effects
- Intro to layer blending
- Intro to layer effect
- Multiply blendMode
- Composite blending
- Highlight feature with effects and blending
- Highlight feature with drop-shadow
- FeatureLayerView - query statistics by geometry
- Highlight features by geometry
- Apply effects to features
- FeatureEffect - multiple effects
- FeatureEffect - drop-shadow
- Animate color visual variable
- Animate layer view effect
Visualization
- Symbol Playground
- Vary point sizes by scale
- Visualize features by unique types
- Visualize data with class breaks
- Visualize data with dictionary renderer
- Size visual variable themes
- 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
- CIMSymbol lines and polygons
- Arrows along a line
- 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
- Urban visualizations with polygon patterns
- Animate color visual variable
- Update legend text
- Update a renderer's attribute
- Customize ColorSlider Histogram
- Client-side projection
Clustering
- Point clustering - basic configuration
- Point clustering - generate suggested configuration
- Point clustering - query clusters
- Point clustering - advanced configuration
- Point clustering with visual variables
Popups
- Intro to PopupTemplate
- Dock popup positions
- Multiple popup elements
- Custom popup content
- 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
- FeatureTable widget with popup interaction
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
Time
- TimeSlider widget
- Filter features with TimeSlider
- TimeSlider with timeOffset
- Time-based layer
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
- ElevationProfile widget
- FeatureTable widget
- FeatureTable widget with a map
- FeatureTable with editing enabled
- FeatureTable widget with popup interaction
- Intro to 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
- TableList widget
- Track current location
- Track widget simulation
- TimeSlider widget
- TimeSlider with timeOffset
- Expand widget
- Feature widget
- Feature widget in a side panel
- Feature widget - Query graphics from multiple layerViews
- 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
- Visualize data on Mars
- Satellites in 3D view
- SceneView memory resources
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
- 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 mouse-wheel

OpenStreetMapLayer

Explore in the sandboxView live

This sample shows how to add an instance of OpenStreetMapLayer to a Map in a SceneView. The tiled servers hosting the data are already enabled for CORS.

OpenStreetMapLayer

Was this page helpful?

ArcGIS Developers

Home
Features
Documentation
Resources
Pricing
FAQ

Location Services

Basemap layers
Geocode and search
Route and directions
Demographic data
Data hosting
Status

ArcGIS APIs

ArcGIS API for JavaScript
ArcGIS Runtime API for Android
ArcGIS Runtime API for iOS
ArcGIS Runtime API for .NET
ArcGIS Runtime API for Java
ArcGIS Runtime API for Qt
ArcGIS API for Python

Open Source APIs

Esri Leaflet
ArcGIS REST JS

3rd Party API Clients

Mapbox GL JS
OpenLayers

Extending ArcGIS

ArcGIS Pro SDK
ArcGIS Enterprise SDK
ArcGIS Earth Automation API
ArcPy
ArcObjects SDK for .Net
ArcObjects SDK for Java

App Builders

ArcGIS Experience Builder
ArcGIS Web AppBuilder
ArcGIS AppStudio
ArcGIS Survey123

Copyright © 2021 Esri. All rights reserved.

Privacy
Terms of Use

GeoNet
Esri on Facebook
Esri on Twitter
Esri on GitHub