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.
Bubble Layer (3)
These samples demonstrate different ways to implement the bubble layer to render point based data.
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.
Geospatial Files (7)
Examples of how to import and export common geospatial file formats with Azure Maps.
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.
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.
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.
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.
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.
Spatial Math (3)
Learn how to use the spatial math library that is built into the Azure Maps Web Control.
Spatial Math with Turf.js (4)
Perform advanced spatial math operations using 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.
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 (4)
Onverlay 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.