3D Layer
Add 2D and 3D layers to the map using WebGL.
Weather
Use current or historical weather information.
Satellite Images
See the world in high resolution.
Traffic
Live traffic and accident information.
Travel Times
Calculate travel time using an isochrone.
Azure Maps Samples
Welcome to the Azure Maps Web Control V3 Code Sample Gallery. This is a collection of 284 code samples that have been made open source on GitHub. Build your location-aware solutions with a seamless development experience. Easily integrate open source and other map controls, as well as Open Geospatial Consortium standards, such as GeoJSON and KML.
Babylon custom WebGL layer
This sample shows how to create a custom 3D layer with Babylon.js.
Deck GL custom WebGL layer
This sample shows how to create a custom 3D layer with Deck.gl.
Integration with Flowmap.gl
This sample shows a flow map on top of Azure Maps using the flowmap.gl module.
Yellow Cab vs Green Cab Trips in Manhattan
This sample creates a WebGL trips layer in Manhattan, NY using Deck.gl 3D framework for Azure Maps.
Three.js custom WebGL layer
This sample shows how to create a custom 3D layer with Three.js.
Threebox custom WebGL layer
This sample shows how to create a custom 3D layer with Threebox.
Simple 2D WebGL layer
This sample showcases the creation of a custom WebGL layer that draws a 2D triangle directly on the map.
Animations (26)
Learn how to animate data on the map. Many of these samples leverage the open source Azure Maps Animation module.
Animate a Choropleth Map
This sample shows how to create a choropleth map and animate it over time.
Animate a GPS trace
This sample shows how to smoothly animate a symbol along a route path taking into consideration timestamps for each point in the route path.
Animate a Line
This sample shows how to animate the position of a line on the map by updating its coordinates and layer.
Animate a snakeline
This sample shows how to animate a LineString such that its path is drawn out smoothly over time on top of the map using what is called a snakeline animation.
Animate along a path
This sample shows how to animate a symbol along a path on the map smoothly. This sample also includes controls and options for the animation.
Animate along a route path
This sample shows how to smoothly animate a symbol along a route path taking into consideration timestamps for each point in the route path. This sample also includes controls and options for the animation.
Animate marker along path
This sample shows how to easily animate a HTML marker along a path on the map.
Animate multiple points
This sample shows how to animate multiple points on the map.
Animate point along path
This sample shows how to easily animate a point along a path on the map.
Animate to new position of marker
This sample shows how to animate a marker on the map to a new coordinate.
Animate to new position of point
This sample shows how to animate a point on the map to a new coordinate.
Animated tile layer
This sample shows how to animate an sequence of tile layers smoothly.
Animated traffic flow
This sample shows how to animate the flow of traffic relative to the congestion level using the flowing dashed line animation.