Azure Maps Web SDK Samples

Welcome to the Azure Maps Web Control Sample Gallery. This is a collection of 163 code samples that have been made open-source on GitHub.

Open GitHub Project

Animations (6)

Learn how to animate data on the map.

Animate a Choropleth Map

Animate a Choropleth Map

This sample shows how to create a choropleth map and animate it over time.

Animate a Line

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 Symbol along a Path

Animate a Symbol along a Path

This sample shows how to animate a symbol along a path on the map smoothly.

HTML Marker Pulse Animation

HTML Marker Pulse Animation

This sample shows how to pulse animate the position of a HTML marker on the map using CSS.

Simple HTML Marker Animation

Simple HTML Marker Animation

This sample shows how to animate the position of a HTML marker on the map by updating the coordinates.

Simple Symbol Animation

Simple Symbol Animation

This sample shows how to animate the position of a symbol on the map by updating the coordinates.

Bubble Layer (4)

These samples demonstrate different ways to implement the bubble layer to render point based data.

Bubble Layer Options

Bubble Layer Options

This sample shows how the different options of the bubble layer affect rendering.

Cluster aggregates

Cluster aggregates

This sample shows how to define custom properties on clusters that are defined using data-driven style expresison calculation. These calculations aggregate values across all points contained within the cluster.

Data-Driven Bubble Layer Styling

Data-Driven Bubble Layer Styling

This sample shows how to use data-driven styles on a BubbleLayer to define the radius and color of each circle based on the magnitude of each data point.

Point Clusters in Bubble Layer

Point Clusters in Bubble Layer

This sample shows how to enable point based clustering on a data source and render them differently from individual points on the map.

Controls (2)

Add UI controls to the map to create an enhanced user experience.

Map Navigation Control Options

Map Navigation Control Options

This sample shows all the map navigation controls on the map and how they react with different option settings.

Map Style Picker

Map Style Picker

This sample shows how to add the map style picker control to the map.

Custom Modules (22)

Use custom modules to extend the functionality of the Azure Maps Web Control.

Animate a LineString

Animate a LineString

This sample shows how to animate a LineString such that its path is drawn out smoothly over time on top of the map.

Animate a point

Animate a point

This sample shows how to animate a point on the map to a new coordinate.

Animate multiple points

Animate multiple points

This sample shows how to animate multiple points on the map.

Animate point along path

Animate point along path

This sample shows how to animate a point along a path on the map.

Drop multiple symbols animation

Drop multiple symbols animation

This sample shows how to animate multiple points on the map as dropping symbols.

Drop symbol animation

Drop symbol animation

This sample shows how to animate a point on the map as a dropping symbol.

Bring Data Into View Control

Bring Data Into View Control

This sample shows how to create a simple custom control that centers and zooms the map to fit any data that is loaded on the map.

Draw Line

Draw Line

This sample shows how to draw a line on the map using the Line Drawing tools.

Draw Polygon and Select Data

Draw Polygon and Select Data

This sample shows how to draw a polygon on the map using the Polygon Drawing tools and then use the generated polygon to calculate all pins on the map that intersect with that polygon.

Draw Polygon

Draw Polygon

This sample shows how to draw a polygon on the map using the Polygon Drawing tools.

Create a Fullscreen Control

Create a Fullscreen Control

This sample shows how to create a custom fullscreen control that can be added to the map. In this case a control for toggling the map between its specified size in the page and fullscreen mode.

Geolocation Control Options

Geolocation Control Options

This sample shows all the options of the geolocation control.

Create a Geolocation Control

Create a Geolocation Control

Synchronize map views

Synchronize map views

This sample shows how to synchronize the views of two or more maps.

Simple Scale Bar Control

Simple Scale Bar Control

This sample shows how to create a custom scale bar control that can be added to the map.

Animate a snakeline

Animate a snakeline

This sample shows to use Snakeline module to animate the path of a line.

Expanding Spider Clusters

Expanding Spider Clusters

This sample shows how to visualize the contents of a cluster as a expanded spider cluster layout.

Spyglass map visualization

Spyglass map visualization

This sample shows how to add a spyglass data viewer to the map.

Spyglass module options

Spyglass module options

This sample shows how all the options of the spyglass module can be used to customize the user experience.

Swipe between two maps

Swipe between two maps

This sample shows how to swipe between two overlapping synchronized maps to view different data sets.

Swipe map module options

Swipe map module options

This sample shows how to swipe between two overlapping synchronized maps to view different data sets.

Create a Traffic Control

Create a Traffic Control

This sample shows how to create a custom traffic control that can be added to the map.

Demos (4)

These samples demonstrate real-life scenarios or highlight key topics.

Car vs Truck Route

Car vs Truck Route

This sample compares the route a truck has to take to the route a car can take.

Create a Choropleth Map

Create a Choropleth Map

This sample shows how to create a choropleth map. A choropleth map is a thematic map in which areas are shaded or patterned in proportion to the measurement of the statistical variable being displayed on the map, in this case the population density of each state.

Data-Driven Styling

Data-Driven Styling

This sample shows some basics around data-driven styling of layers in Azure Maps.

Large GeoJSON Files

Large GeoJSON Files

This sample demonstrates loading large GeoJSON files into the Azure Maps web control.

Device Sensors (3)

See how to access sensors from a devices browser and use them with Azure Maps.

Continuous User Position Tracking

Continuous User Position Tracking

This sample shows how to continuously get the users position information from the browser by using the HTML5 geolocation API and update it on a map.

Show a Users Position

Show a Users Position

This sample shows how to get the users position information from the browser by using the HTML5 geolocation API and show it on a map.

User Location Accuracy Circle

User Location Accuracy Circle

This sample shows how to display the users position on the map with an accuracy circle.

Drawing Tools Module (4)

Add mouse and touch based drawing capabilities to the map.

Add drawing toolbar to map

Add drawing toolbar to map

This sample shows how to use the Drawing Tools module and display the drawing toolbar on the map.

Change drawing rendering style

Change drawing rendering style

This sample shows how to customize the rendering of the drawing shapes in the drawing manager by accessing the rendering layers using the drawingManager.getLayers() function.

Drawing manager options

Drawing manager options

This sample shows how the different options of the drawing manager change the user experience.

Get drawn shapes from drawing manager

Get drawn shapes from drawing manager

This sample shows how to get the shapes that have been drawn on the map using the drawing managers drawingManager.getSource() function.

Geospatial Files (7)

Examples of how to import and export common geospatial file formats with Azure Maps.

Add a delimited file (CSV) to the map

Add a delimited file (CSV) to the map

This sample shows how to add a delimited file (CSV, TSV) to the map by converting it into GeoJSON.

Add TopoJSON data to the map

Add TopoJSON data to the map

This sample shows how to add TopoJSON data to the map, by converting it into GeoJSON in a Web Worker so that map can easily render it.

Drag and Drop GeoJSON File onto Map

Drag and Drop GeoJSON File onto Map

This sample shows how load add support for dragging and dropping GeoJSON files on to the map and having them render.

Drag and Drop Shapefiles onto the Map

Drag and Drop Shapefiles onto the Map

This sample shows how load add support for dragging and dropping zipped shapefile (.shp, .dbf, .prj) files from your local computer file system on to the map and having them render on the map.

Extract and display photo location

Extract and display photo location

This sample shows how to extract location information from images from a URL or by dragging and dropping them onto the map, and display them on the map.

Load large Shapefiles using a Web Worker

Load large Shapefiles using a Web Worker

This sample shows how to load large shapefiles (.shp, .dbf, .prj) onto the map using a web worker so that it doesn't freeze the UI.

Load Shapefiles onto the Map

Load Shapefiles onto the Map

This sample shows how to easily load shapefiles (.shp, .dbf, .prj) onto the map.

Heat Map Layer (5)

Heat maps are a type of data visualization used to represent the density of data using a range of colors. They\'re often used to show the data "hot spots" on a map and are a great way to render large point data sets.

Cluster weighted Heat Map

Cluster weighted Heat Map

This sample shows how to create a heat map that uses clustering on the data source to improve performance for large data sets.

Consistent zoomable Heat Map

Consistent zoomable Heat Map

This sample shows how to create a heat map where the radius of each data point covers the same physical area on the ground and creates a more consistent user experience when zooming the map.

Heat Map Layer Options

Heat Map Layer Options

This sample shows how the different options of the heat map affect rendering.

Simple Heat Map Layer

Simple Heat Map Layer

This sample shows how to create a simple heat map from a data set of point features.

Weighted Heat Map Layer

Weighted Heat Map Layer

This sample shows how to create a heat map which defines the intensity of each data point based on a property.

HTML Markers (10)

Use traditional HTML and CSS to represent point based data on the map as markers.

All built-in icon templates as HTML markers

All built-in icon templates as HTML markers

This sample shows all the built-in icon templates rendered as HTML markers.

CSS Styled HTML Marker

CSS Styled HTML Marker

This sample shows how to use CSS and HTML to create a marker on the map.

Draggable HTML Marker

Draggable HTML Marker

This sample shows how to make an HTML marker draggable.

HTML Marker events

HTML Marker events

This sample shows how to add events to an HTML marker.

HTML Marker with built-in icon template

HTML Marker with built-in icon template

This sample shows how use image templates with an HTML marker.

HTML Marker with Custom SVG Template

HTML Marker with Custom SVG Template

This sample shows how to create a custom SVG template and use it with the HtmlMarker class.

Simple HTML Marker

Simple HTML Marker

This sample shows how create a simple HtmlMarker and add it to the map.

Clustered Pie Chart HTML Markers

Clustered Pie Chart HTML Markers

This sample combines the HtmlMarkerLayer class with the PieChartMarker class to create pie charts for clustered markers on the map.

HTML Marker Layer

HTML Marker Layer

This sample provides a layer which renders point data from a data source as HTML markers on the map.

Pie Chart HTML Markers

Pie Chart HTML Markers

This sample shows how to create HtmlMarkers that look like scaled pie charts using inline SVG's. Click on a marker to view the data for each piece of a pie in a chart.

Image Layer (4)

See how to overlay images on the map as a layer.

Cross reference pixels in image layer

Cross reference pixels in image layer

This sample shows how to cross reference pixel positions on a source image with the position of an image overlay on a map.

Image Layer Options

Image Layer Options

This sample shows how the different options of the image layer affect rendering.

KML Ground Overlay as Image Layer

KML Ground Overlay as Image Layer

This sample shows how to overlay KML Ground Overlay information as an image layer on the map.

Simple Image Layer

Simple Image Layer

This sample shows how to overlay an image on the map as an Image layer.

Map (16)

These samples show how to use the many different features of the map.

Add a Context Menu to the Map

Add a Context Menu to the Map

This sample shows how to display a context menu when the user right clicks the map.

Add custom icon template to atlas namespace

Add custom icon template to atlas namespace

This sample shows how to add more image templates to the atlas namespace.

Detect if browser is supported

Detect if browser is supported

This sample shows how to detect if the browser is supported by the Azure Maps Web SDK. If it is, load the map, otherwise fallback gracefully.

Full Screen Map

Full Screen Map

This sample shows how to toggle between displaying the standard page layout, and a full screen map view.

Icon template options

Icon template options

This sample shows how the icon template options effect the rendering of built-in icon templates.

Lazy Load the Map

Lazy Load the Map

This sample shows how to delay the loading of the map SDK until it is needed.

Limit Map to Two Finger Panning

Limit Map to Two Finger Panning

This sample shows how to limit the map drag functionality such that the user is only able to drag the map when using two fingers. This is useful when using the map API inside of mobile apps where the user is likely to scroll the page using a single finger.

Limit Scroll Wheel Zoom

Limit Scroll Wheel Zoom

This sample shows how to limit the scroll zooming functionality of the map such that the map will only be zoomed when the CTRL key is pressed. When the CTRL key is not pressed, the scroll wheel will scroll the page when over the map.

Load Map with Options

Load Map with Options

This sample shows how to load the map and specify options at the same time.

Map Events

Map Events

This sample will highlight the name of the events that are firing as you interact with the map.

Map Localization

Map Localization

This sample lets you switch the map between all its supported languages.

Mini Overview Map

Mini Overview Map

This sample shows how to create a second mini overview map which shows the main maps area of focus.

Multiple Maps in Different Languages

Multiple Maps in Different Languages

This sample shows two maps rendered on the same page, displaying maps in different languages. Press one of the buttons to change the language of the second map instantly.

Multiple Maps

Multiple Maps

This sample shows how to render multiple maps on the same page.

Render world copies

Render world copies

This sample shows how to the renderWolrdCopies map style option changes the layout of the map when zoomed out.

Export Map as Image

Export Map as Image

This sample shows how to export the map canvas as an image which can be used in reports or emails.

Polygon and Line Layers (16)

Learn how to overlay geospatially accurate circles, polygons, linestrings, and multi-geometries on the map using polygon and line layers.

Add Arrow along a Path

Add Arrow along a Path

This sample shows how to add arrow icons along a line on the map.

Add arrows to end of paths

Add arrows to end of paths

This sample shows how to add arrow icons along a line on the map.

Data-driven stroke gradient

Data-driven stroke gradient

This sample shows how to create a path between a set of data points can apply a stroke gradient based on properties in each data point.

Fill polygon with built-in icon template

Fill polygon with built-in icon template

This sample shows how to use an image template as a fill pattern in a polygon layer.

Geospatially Accurate Circle

Geospatially Accurate Circle

This sample shows how to use the extended GeoJSON schema defined by Azure Maps to create a geospatially accurate circle on the map with a filled area and a styled outline.

Line Layer Options

Line Layer Options

This sample shows how the different options of the line layer affect rendering.

Line layer with built-in icon template

Line layer with built-in icon template

This sample shows how to use a built-in icon templates with a line layer.

Line with Stroke Gradient

Line with Stroke Gradient

This sample shows how to apply a stroke gradient to a line on the map.

Mercator Projection and Geospatial Circles

Mercator Projection and Geospatial Circles

This sample shows how the Mercator projection of the map affects the scale of geospatially accurate objects on the map.

Polygon Fill Pattern

Polygon Fill Pattern

This sample shows how to fill a polygon area using a pattern image rather than a solid color.

Polygon Hover Style

Polygon Hover Style

This sample shows how to create a hover effect on a polygon layer.

Polygon labels - calculated

Polygon labels - calculated

This sample shows how to create labels for polygons by calculating a coordinates and creating a point feature for the label.

Polygon labels - symbol layer

Polygon labels - symbol layer

This sample shows how the symbol layer can be used to automatically render labels for polygons on the map.

Polygon Layer Options

Polygon Layer Options

This sample shows how the different options of the polygon layer affect rendering.

Polygon masks

Polygon masks

Polygon masks limit the viewable area of the map to a polygon area.

Simple MultiPolygon

Simple MultiPolygon

This sample shows how to render a MultiPolygon on the map.

Popups (6)

See how to display information in a popup on the map.

Customize a popup

Customize a popup

This sample shows how to customize the look of a popup.

Popup events

Popup events

This sample shows how to add events to Popups.

Popup with Media Content

Popup with Media Content

This sample shows popups that contain media content.

Popups on Shapes

Popups on Shapes

This sample shows how to display a popup when a user interacts with any shape on the map.

Reusing Popup with Multiple Pins

Reusing Popup with Multiple Pins

This sample shows popups that contain media content.

Show popup on hover

Show popup on hover

This sample shows how to show a popup when the mouse hovers over or touches a shape.

REST Services (7)

Learn how to directly access the Azure Maps REST services from JavaScript.

Calculate a Simple Isochrone

Calculate a Simple Isochrone

This sample shows how to calculate an isochrone (drive time polygon) using the Azure Maps Route Reachable Range service and display it on the map.

Fill Address Form with Autosuggest

Fill Address Form with Autosuggest

This sample shows how to use the Azure Maps Search service with JQuery UI's autocomplete widget which provides address suggestions as the user types and which populates a form with the selected suggestion.

Get Users Timezone with Prompt

Get Users Timezone with Prompt

This sample shows how to determine a users timezone by passing the users location into the Azure Maps REST Timezone service. The users location is retrieved using the HTML5 geolocation API which displays a prompt to the user to share their location.

Route Waypoint Optimization

Route Waypoint Optimization

This sample shows how to calculate routes with and without waypoint optimization using the Azure Maps REST Route API.

Search Autosuggest and JQuery UI

Search Autosuggest and JQuery UI

This sample shows how to create a custom input UI for suggesting possible results for queries against the Azure Maps Search services.

Simple REST Directions (Route)

Simple REST Directions (Route)

This sample shows how to calculate simple directions between two points using the Azure Maps REST Route API and render it on a map.

Simple REST Geocoding Request

Simple REST Geocoding Request

This sample shows how to use the REST search API directly for geocoding locations.

Services Module (6)

Take advantage of the Services module to simplify integration of the REST services with the Azure Maps Web Control.

Calculate a simple route

Calculate a simple route

This sample shows how to calculate a simple route and display it on the map using the Services module for Azure Maps.

Calculate spaced positions along route

Calculate spaced positions along route

This sample shows how to calculate a evenly spaced out positions along a route, in this case every 10 kilometers.

Fuzzy Search with Services Module

Fuzzy Search with Services Module

This sample shows how to use the Services module for Azure Maps to perform a fuzzy search for points of interests, address, and places. Providing user location information allows the search service choose results that are more local to the user.

Load POIs as the map moves

Load POIs as the map moves

This sample shows how to load points of interest data on the map as the user moves the map.

Page through POI results

Page through POI results

This sample shows how to step through all the results available for a POI query. This sample also creates a list of the results and cross references the list items to the shapes on the map.

Reverse Geocode with Services Module

Reverse Geocode with Services Module

This sample shows how to use the Services module for Azure Maps to reverse geocode a coordinate.

Spatial Math (11)

Learn how to use the spatial math library that is built into the Azure Maps Web Control.

Calculate a convex hull

Calculate a convex hull

This sample shows how to calculate a convex hull from an array of shapes.

Cardinal Spline Options

Cardinal Spline Options

This sample provides a set of controls to test the various features of the Cardinal Spline calculation.

Convex hull and HTML markers

Convex hull and HTML markers

This sample shows how to calculate a convex hull for a set of HTML markers.

Display cluster area with Convex Hull

Display cluster area with Convex Hull

This sample shows how to display the area of the points contained within a cluster by calculating a convex hull.

Filter Data Along Route

Filter Data Along Route

This sample shows how to take a route line, calculate a buffer around it and then filter a set of points to find those that are within the buffer.

Get closest HTML marker to position

Get closest HTML marker to position

This sample shows how to calculate the closest marker to a given position, in this case, where the user clicked on the map.

Get closest point to geometry

Get closest point to geometry

This sample shows how to get the closest point on a geometry from another point or position.

Get closest point to position

Get closest point to position

This sample shows how to calculate the closest point to a given coordinate, in this case, where the user clicked on the map.

Introduction to Spatial Math

Introduction to Spatial Math

This sample shows how to use many of the built in spatial math functions in the Azure Maps web control.

Merge Two Polygons Together

Merge Two Polygons Together

This sample shows how to merge (union) two polygons together to create a single polygon object.

Simple Cardinal Spline

Simple Cardinal Spline

This sample shows how to create a simple cardinal spline and display it on the map.

Symbol Layer (13)

Render lots of styled points on the map in a Symbol layer with good performance. If working with smaller data sets use HTML based markers and take advantage of CSS for styling.

All built-in icon templates as symbols

All built-in icon templates as symbols

This sample shows all the built-in icon templates rendered on a symbol layer.

Change Mouse Cursor when Hovering Layer

Change Mouse Cursor when Hovering Layer

This sample shows how to change the mouse cursor when hovering over shapes in a layer. This will work with the bubble, line, polygon and symbol layer.

Create Symbols from Custom JSON

Create Symbols from Custom JSON

This sample shows how to use this JSON data to create clickable symbols on a map, that when clicked, display a popup with the title and description values of the symbol that was clicked.

Custom Symbol Image Icon

Custom Symbol Image Icon

This sample shows how to add a custom symbol icon to the map resources and then use it render point data with a custom symbol on the map.

Data-driven symbol icons

Data-driven symbol icons

This sample shows how to use multiple custom icons in a single symbol layer by using data-driven styling with an expression.

Display clusters with a Symbol Layer

Display clusters with a Symbol Layer

This sample shows how to enable point based clustering on a data source and render them with different symbols.

Draggable Symbols

Draggable Symbols

This sample shows how to create a symbol layer that lets you drag the symbols using the mouse.

Filter Symbols by Property

Filter Symbols by Property

This sample shows how to filter symbols on the map by property by creating a layer fro each property value and then toggling the visibility of that layer accordingly.

Formatted text field

Formatted text field

This sample shows how to format the symbol layers text field.

Styled Symbol Layer

Styled Symbol Layer

This sample shows how to create a symbol layer and apply styles to it to customize how it renders each symbol.

Layer events

Layer events

This sample highlights the name of the events that are firing as you interact with the Symbol Layer. The Symbol, Bubble, Line and Polygon layer all support the same set of events. The Tile Layer does not support any of these events.

Symbol Layer Options

Symbol Layer Options

This sample shows how the different options of the symbol layer affect rendering.

Symbol layer with built-in icon template

Symbol layer with built-in icon template

This sample shows how to use a built-in icon template with a symbol layer.

Third Party Map Controls (5)

As good as the Azure Maps Web Control is, there are many 3rd party map controls in which you can import Azure Maps data into which is a great option if you have an existing app built on one of these.

Raster Tiles in ArcGIS JS 4.6

Raster Tiles in ArcGIS JS 4.6

This sample shows how to render Azure Maps Raster Tiles in the ArcGIS version 4.6 JavaScript map control.

Raster Tiles in Cesium JS

Raster Tiles in Cesium JS

This sample shows how to render Azure Maps Raster Tiles in the Cesium JS map control.

Azure Maps Raster Tiles in Leaflet JS

Azure Maps Raster Tiles in Leaflet JS

This sample shows how to render Azure Maps Raster Tiles in the Leaflet JS map control.

Raster Tiles in OpenLayers

Raster Tiles in OpenLayers

This sample shows how to render Azure Maps Raster Tiles in the OpenLayers map control.

Satellite Imagery in OpenLayers

Satellite Imagery in OpenLayers

This sample shows how to render Azure Maps Satellite/Aerial imagery tiles in the OpenLayers map control.

Tile Layers (5)

Overlay raster tile layers on top the map using the same tiling system used by the base maps.

Tile Layer Options

Tile Layer Options

This sample shows how the different options of the tile layer affect rendering.

Tile Layer using X, Y, and Z

Tile Layer using X, Y, and Z

This sample shows how to create a simple tile layer which points to a set of tiles which use the x, y, zoom tiling system.

WMS Tile Layer

WMS Tile Layer

This sample shows how to create a tile layer which points to a Web Mapping Service (WMS).

WMTS Tile Layer

WMTS Tile Layer

This sample shows how to create a tile layer which points to a Web Mapping Tile Service (WMTS).

Animated Tile Layer

Animated Tile Layer

This sample shows how to animate an sequence of tile layers smoothly.

Traffic (2)

Overlay real-time traffic data on the map.

Traffic Overlay Options

Traffic Overlay Options

This sample shows how the different Traffic Options change how the traffic overlay is rendered on the map.

Traffic Overlay

Traffic Overlay

This sample shows how to show the traffic overlay over top of the map.

Tutorials (5)

These are the finished code samples for the tutorials in the Azure Maps documentation. You can find the full tutorial walkthroughs here.

Interactive Search Quickstart

Interactive Search Quickstart

This tutorial shows how to create an interactive search experience.

Route to a destination

Route to a destination

This tutorial shows how to calculate a route and display it on the map.

Search for points of interest

Search for points of interest

This tutorial shows how to search for points of interest and display them on the map.

Multiple routes by mode of travel

Multiple routes by mode of travel

This tutorial shows how to perform multiple routes for different modes of travel and display them on the map.

Simple Store Locator

Simple Store Locator

This tutorial shows how to create a simple store locator.