Azure Maps Web Control Samples
Welcome to the Azure Maps Web Control Sample Gallery. This is a collection of 110 code samples that have been made open-source on GitHub.
Animate a Choropleth Map
This sameples shows hwo to create a choropleth map and animate it over time.
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
This sample shows how to animate a symbol along a path on the map smoothly.
HTML Marker Pulse Animation
This sample shows how to pulse animate the position of a HTML marker on the map.
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
This sample shows how to animate the position of a symbol on the map by updating the coordinates.
Bubble Layer (3)
These samples demonstrate different ways to implement the bubble layer to render point based data.
Bubble Layer Options
This sample shows how the different options of the bubble layer affect rendering.
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
This sample shows how to enable point based clustering on a data source and render them differently from symbols.
Map Navigation Control Options
This sample shows all the map navigaiton controls on the map and how they react with different option settings.
Map Style Picker
This sample shows how to add the map style picker control to the map.
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
This sample shows how to draw a line on the map using the Line Drawing tools.
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
This sample shows how to draw a polygon on the map using the Polygon Drawing tools.
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.
Simple Scale Bar Control
This sample shows how to create a custom scale bar control that can be added to the map.
Expanding Spider Clusters
This sample shows how to visualize the contents of a cluster as a expanded spider cluster layout.
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
This sameples shows hwo 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
This sample shows some basics around data-driven styling of layers in Azure Maps.
Large GeoJSON Files
This sample demonstrates loading large GeoJSON files into the Azure Maps web control.
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
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
This sample shows how to display the users position on the map with an accuracy circle.
Geospatial Files (7)
Examples of how to import and export common geospatial file formats with Azure Maps.
-to-the-map.png)
Add a delimited file (CSV) to the map
This sample shows how to add a delimied file (CSV, TSV) to the map by convering it into GeoJSON.
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
This sample shows how load add support for dragging and droping GeoJSON files on to the map and having them render.
Drag and Drop Shapefiles onto the Map
This sample shows how load add support for dragging and droping 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
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
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
This sample shows how to easily load shapefiles (.shp, .dbf, .prj) onto the map.
Heat Map Layer Options
This sample shows how the different options of the heat map affect rendering.
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
This sample shows how to create a heat map which defines the intensity of each data point based on a property.
Adding Mouse Events to default HTML Marker
This sample shows how to add mouse events to an HTML marker that uses the default htmlContent by wraping it with a DOM element and adding JavaScript events to it.
Adding Mouse Events to HTML Markers
This sample shows how to add mouse events to an HTML marker by adding standard JavaScript events to the HTML content of the marker.
CSS Styled HTML Marker
This sample shows how to use CSS and HTML to create a marker on the map.
Draggable HTML Marker
This sample shows how to make an HTML marker draggable.
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
This sample shows how create a simple HtmlMarker and add it to the map.
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
This sample provides a layer which renders point data from a data source as HTML markers on the map.
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 Options
This sample shows how the different options of the image layer affect rendering.
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
This sample shows how to overlay an image on the map as an Image layer.
Add a Context Menu to the Map
This sample shows how to display a context menu when the user right clicks the map.
Full Screen Map
This sample shows how to toggle between displying the standard page layout, and a full screen map view.
Lazy Load the Map
This sample shows how to delay the loading of the map SDK until it is needed. This is useful if your map is hiden and not displayed by default (i.e. hosted in a tab). By waiting until the user actually needs the map before loading it, you can reduce the amount of resources the browser usesinitially and speed up your page loading while also reducing the number of transactions that are generated by your application and thus reducing your costs.
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
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
This sample shows how to load the map and specify options at the same time.
Map Events
This sample will highlight the name of the events that are firing as you interact with the map.
Map Localization
This sample lets you switch the map between all its supported languages.
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
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
This sample shows how to render multiple maps on the same page.
Export Map as Image
This sample shows how to export the map canavs as an image which can be used in reports or emails.
Polygon and Line Layers (8)
Learn how to overlay geospatially accurate circles, polygons, linestrings, and multi-geometries on the map using polygon and line layers.
Geospatially Accurate Cirle
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
This sample shows how the different options of the line layer affect rendering.
Line with Stroke Gradient
This sample shows how to apply a stroke gradient to a line on the map.
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
This sample shows how to fill a polygon area using a pattern image rather than a solid color.
Polygon Hover Style
This sample shows how to create a hover effect on a polygon layer.
Polygon Layer Options
This sample shows how the different options of the polygon layer affect rendering.
Simple MultiPolygon
This sample shows how to render a MultiPolygon on the map.
Popup with Media Content
This sample shows popups that contain media content.
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
This sample shows popups that contain media content.
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
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
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 retrived using the HTML5 geolocation API which displays a prompt to the user to share their location.
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
This sample shows how to create a custom input UI for suggesting possible results for queries against the Azure Maps Search services. Several of the search services have a typeahead URL parameter which when set to true will tell the geocoder that a partial query has been passed in and to go into predicitive mode. The UI is managed using JQuery UIs autocomplete widget.
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
This sample shows how to use the REST search API directly for geocoding locations.
Services Module (2)
Take advantage of the Services module to simplify integration of the REST services with the Azure Maps Web Control.
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.
Reverse Geocode with Services Module
This sample shows how to use the Services module for Azure Maps to reverse geocode a coordinte.
Spatial Math (3)
Learn how to use the spatial math library that is built into the Azure Maps Web Control.
Cardinal Spline Options
This sample provides a set of controls to test the various features of the Cardinal Spline calculation.
Introduction to Spatial Math
This sample shows how to use many of the built in spatial math functions in the Azure Maps web control.
Simple Cardinal Spline
This sample shows how to create a simple cardinal spline and display it on the map.
Spatial Math with Turf.js (4)
Perform advanced spatial math operations using the open source Turf.js library.
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.
.png)
Generate Random Points within Bounds
This sample shows how to generate a 1,000 random point features within a bounding box using the open source Turf.js library.
.png)
Generate Random Polygons within Bounds
This sample shows how to generate random polygon features within a bounding box using the open source Turf.js library.
.png)
Merge Two Polygons Together (Turf.js)
This sample shows how to merge (union) two polygons together to create a single polygon object. To accomplish this, this sample uses the open source Turf.js library.
Symbol Layer (8)
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.
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
It is fairly common to access JSON data in your application which contains location data but is not in GeoJSON format. 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
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.
Draggable Symbols
This sample shows how to create a symbol layer that lets you drag the symbols using the mouse.
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.
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.
Styled Symbol Layer
This sample shows how to create a symbol layer and apply styles to it to customize how it renders each symbol.
Symbol Layer Options
This sample shows how the different options of the symbol layer affect rendering.
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
This sample shows how to render Azure Maps Raster Tiles in the ArcGIS version 4.6 JavaScript map control.
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
This sample shows how to render Azure Maps Raster Tiles in the Leaflet JS map control.
Raster Tiles in OpenLayers
This sample shows how to render Azure Maps Raster Tiles in the OpenLayers map control.
Satellite Imagery in OpenLayers
This sample shows how to render Azure Maps Satellite/Aerial imagery tiles in the OpenLayers map control.
Tile Layers (4)
Onverlay raster tile layers on top the map using the same tiling system used by the base maps.
Tile Layer Options
This sample shows how the different options of the tile layer affect rendering.
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
This sample shows how to create a tile layer which points to a Web Mapping Service (WMS).
WMTS Tile Layer
This sample shows how to create a tile layer which points to a Web Mapping Tile Service (WMTS).
Traffic Overlay Options
This sample shows how the different Traffic Options change how the traffic overlay is rendered on the map.
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
This tutorial shows how to create an interactive search experience.
Route to a destination
This tutorial shows how to calculate a route and display it on the map.
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
This tutorial shows how to perform multiple routes for different modes of travel and display them on the map.
Simple Store Locator
This tutorial shows how to create a simple store locator.