Azure Maps Web SDK Samples
Welcome to the Azure Maps Web Control Sample Gallery. This is a collection of 128 code samples that have been made open-source on GitHub.
Bubble Layer (3)
These samples demonstrate different ways to implement the bubble layer to render point based data.
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.
Geospatial Files (7)
Examples of how to import and export common geospatial file formats with Azure Maps.
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.
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 hidden 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 uses initially 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.
Polygon and Line Layers (9)
Learn how to overlay geospatially accurate circles, polygons, linestrings, and multi-geometries on the map using polygon and line layers.
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.
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 predictive mode. The UI is managed using JQuery UIs autocomplete widget.
Services Module (3)
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.
Spatial Math (6)
Learn how to use the spatial math library that is built into the Azure Maps Web Control.
Symbol Layer (11)
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.
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.
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.
Tile Layers (5)
Overlay raster tile layers on top the map using the same tiling system used by the base maps.
These are the finished code samples for the tutorials in the Azure Maps documentation. You can find the full tutorial walkthroughs here.