https://samples.azuremaps.com/html-markers/html-marker-events
HTML Marker events - Azure Maps Web SDK Samples
This sample shows how to add events to an HTML marker.
azure maps webhtml markereventssdksamples
https://samples.azuremaps.com/animations/bouncing-marker-animation
Bouncing marker animation - Azure Maps Web SDK Samples
This sample shows how to animate an HTML marker to make it appear to be bouncing on the map.
azure maps webbouncingmarkeranimationsdk
https://samples.azuremaps.com/controls/custom-navigation-controls
Custom navigation controls - Azure Maps Web SDK Samples
This sample shows how to create a set of map navigation controls that can be placed anywhere on the page.
azure maps webcustomnavigationcontrolssdk
https://samples.azuremaps.com/line-layer/line-layer-options
Line Layer Options - Azure Maps Web SDK Samples
This sample shows how the different options of the line layer affect rendering.
layer options azuremaps web sdklinesamples
https://samples.azuremaps.com/controls/spyglass-map-visualization
Spyglass map visualization - Azure Maps Web SDK Samples
This sample shows how to add a spyglass data viewer to the map.
azure maps webspyglassvisualizationsdksamples
https://samples.azuremaps.com/popups/show-popup-on-hover
Show popup on hover - Azure Maps Web SDK Samples
This sample shows how to show a popup when the mouse hovers over or touches a shape.
azure maps webshowpopuphoversdk
https://samples.azuremaps.com/polygons/polygon-extrusion-layer-options
Polygon Extrusion Layer Options - Azure Maps Web SDK Samples
This sample shows how the different options of the polygon extrusion layer affect rendering.
layer options azuremaps web sdkpolygonextrusionsamples
https://samples.azuremaps.com/3d-layer/webgl
Simple 2D WebGL layer - Azure Maps Web SDK Samples
This sample showcases the creation of a custom WebGL layer that draws a 2D triangle directly on the map.
azure maps websimplewebgllayersdk
https://samples.azuremaps.com/symbol-layer/load-missing-image-into-sprite
Load missing image into sprite - Azure Maps Web SDK Samples
This sample shows how to add an event that fires when an image is missing from the maps image sprite, and then load in the missing image.
azure maps webmissing imageloadspritesdk
https://samples.azuremaps.com/map/mouse-events-with-keys-pressed
Mouse events with keys pressed - Azure Maps Web SDK Samples
This sample shows how to monitor keys that are pressed when mouse events on the map. This same approach can be used with layers as well.
azure maps webmouseeventskeyspressed
https://samples.azuremaps.com/device-sensors/continuous-user-position-tracking
Continuous User Position Tracking - Azure Maps Web SDK Samples
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.
azure maps webcontinuoususerpositiontracking
https://samples.azuremaps.com/map/inspect-features-under-the-mouse
Inspect features under the mouse - Azure Maps Web SDK Samples
This sample shows how to access any rendered feature on the map, whether it came from a vector tile source, a GeoJSON file, or is part of the base map.
azure maps webinspectfeaturesmousesdk
https://samples.azuremaps.com/animations/html-marker-pulse-animation
HTML Marker Pulse Animation - Azure Maps Web SDK Samples
This sample shows how to pulse animate the position of a HTML marker on the map using CSS.
azure maps webhtml markerpulseanimationsdk
https://samples.azuremaps.com/map/limit-map-to-two-finger-panning
Limit Map to Two Finger Panning - Azure Maps Web SDK Samples
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...
azure maps weblimittwofingerpanning
https://samples.azuremaps.com/rest-services/calculate-a-simple-isochrone
Calculate a Simple Isochrone - Azure Maps Web SDK Samples
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.
azure maps webcalculatesimplesdksamples
https://samples.azuremaps.com/html-markers/draggable-html-marker
Draggable HTML Marker - Azure Maps Web SDK Samples
This sample shows how to make an HTML marker draggable.
azure maps webhtml markerdraggablesdksamples
https://samples.azuremaps.com/spatial-io-module/ogc-map-layer-options
OGC map layer options - Azure Maps Web SDK Samples
This sample shows how the different options of the OGC map layer affect rendering.
layer options azuremaps web sdkogcsamples
https://samples.azuremaps.com/animations/animate-point-along-path
Animate point along path - Azure Maps Web SDK Samples
This sample shows how to easily animate a point along a path on the map.
azure maps webanimatepointalongpath
https://samples.azuremaps.com/popups/popups-on-shapes
Popups on Shapes - Azure Maps Web SDK Samples
This sample shows how to display a popup when a user interacts with any shape on the map.
azure maps webpopupsshapessdksamples
https://samples.azuremaps.com/controls/custom-styled-legend
Custom styled legend - Azure Maps Web SDK Samples
This sample shows how to create a custom styled legend using CSS.
azure maps webcustomstyledlegendsdk
https://samples.azuremaps.com/drawing-tools-module/get-drawn-shapes-from-drawing-manager
Get drawn shapes from drawing manager - Azure Maps Web SDK Samples
This sample shows how to get the shapes that have been drawn on the map using the drawing managers drawingManager.getSource() function.
azure maps webgetdrawnshapesdrawing
https://samples.azuremaps.com/line-layer/data-driven-stroke-gradient
Data-driven stroke gradient - Azure Maps Web SDK Samples
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.
azure maps webdata drivenstrokegradientsdk
https://samples.azuremaps.com/map/detect-if-browser-is-supported
Detect if browser is supported - Azure Maps Web SDK Samples
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.
azure maps webdetectbrowsersupportedsdk
https://samples.azuremaps.com/spatial-io-module/simple-data-layer-options
Simple data layer options - Azure Maps Web SDK Samples
This sample shows how the different options of the simple data layer affect rendering.
layer options azuremaps web sdksimple datasamples
https://samples.azuremaps.com/animations/animate-to-new-position-of-marker
Animate to new position of marker - Azure Maps Web SDK Samples
This sample shows how to animate a marker on the map to a new coordinate.
azure maps webnew positionanimatemarkersdk
https://samples.azuremaps.com/polygons/extruded-choropleth-map
Extruded choropleth map - Azure Maps Web SDK Samples
This sample shows how to create a choropleth map of extruded polygons using data driven styling.
azure maps webextrudedchoroplethsdksamples
https://samples.azuremaps.com/spatial-io-module/simple-wfs-example
Simple WFS example - Azure Maps Web SDK Samples
This sample shows how to easily query a Web Feature Service (WFS) and overlay the results on a map.
azure maps websimplewfsexamplesdk
https://samples.azuremaps.com/polygons/mercator-projection-and-geospatial-circles
Mercator Projection and Geospatial Circles - Azure Maps Web SDK Samples
This sample shows how the Mercator projection of the map affects the scale of geospatially accurate objects on the map.
azure maps webmercatorprojectiongeospatialcircles
https://samples.azuremaps.com/animations/animate-multiple-points
Animate multiple points - Azure Maps Web SDK Samples
This sample shows how to animate multiple points on the map.
azure maps webanimatemultiplepointssdk
https://samples.azuremaps.com/image-layer/image-layer-options
Image Layer Options - Azure Maps Web SDK Samples
This sample shows how the different options of the image layer affect rendering.
layer options azuremaps web sdkimagesamples
https://samples.azuremaps.com/services-module/calculate-a-simple-route
Calculate a simple route - Azure Maps Web SDK Samples
This sample shows how to calculate a simple route and display it on the map using the Services module for Azure Maps.
azure maps webcalculatesimpleroutesdk
https://samples.azuremaps.com/html-markers/html-marker-with-custom-svg-template
HTML Marker with Custom SVG Template - Azure Maps Web SDK Samples
This sample shows how to create a custom SVG template and use it with the HtmlMarker class.
azure maps webhtml markercustomsvgtemplate
https://samples.azuremaps.com/drawing-tools-module/drawing-toolbar-options
Drawing toolbar options - Azure Maps Web SDK Samples
This sample shows how the different options of the drawing toolbar change the user experience.
options azure mapsweb sdkdrawingtoolbarsamples
https://samples.azuremaps.com/symbol-layer/symbol-layer-options
Symbol Layer Options - Azure Maps Web SDK Samples
This sample shows how the different options of the symbol layer affect rendering.
layer options azuremaps web sdksymbolsamples
https://samples.azuremaps.com/weather/get-current-weather-at-a-location
Get current weather at a location - Azure Maps Web SDK Samples
This sample shows how to retrieve weather data using the Azure Maps Current Conditions REST API.
azure maps webget currentweatherlocationsdk
https://samples.azuremaps.com/spatial-analysis/calculate-nearest-locations
Calculate nearest locations - Azure Maps Web SDK Samples
This sample shows how to do a spatial join between two sets of points based on the shortest stright line distance or travel time along roads using the route...
azure maps webcalculatenearestlocationssdk
https://samples.azuremaps.com/popups/popup-templates
Popup templates - Azure Maps Web SDK Samples
This sample shows how to use a various popup templates to generate formatted content from porperties of features.
azure maps webpopuptemplatessdksamples
https://samples.azuremaps.com/vector-tiles/vector-tile-bubble-layer
Vector tile bubble layer - Azure Maps Web SDK Samples
This sample shows how to how to use a vector tile service to render point data on the map.
azure maps webvectortilebubblelayer
https://samples.azuremaps.com/rest-services/geolocation-sample
Geolocation Sample - Azure Maps Web SDK Samples
azure maps webgeolocationsamplesdk
https://samples.azuremaps.com/html-markers/simple-html-marker
Simple HTML Marker - Azure Maps Web SDK Samples
This sample shows how create a simple HtmlMarker and add it to the map.
azure maps webhtml markersimplesdksamples
https://samples.azuremaps.com/map/swipe-map-module-options
Swipe map module options - Azure Maps Web SDK Samples
This sample shows how to swipe between two overlapping synchronized maps to view different data sets.
options azure mapsweb sdkswipemodulesamples
https://samples.azuremaps.com/controls/dynamic-legend-and-layer-controls
Dynamic legend and layer controls - Azure Maps Web SDK Samples
This sample shows how to create use the dynamic legend and layer controls.
azure maps webdynamiclegendlayercontrols
https://samples.azuremaps.com/tutorials/interactive-search
Interactive Search Quickstart - Azure Maps Web SDK Samples
This tutorial shows how to create an interactive search experience.
azure maps webinteractivesearchquickstartsdk
https://samples.azuremaps.com/popups/popups-with-leader-lines
Popups with leader lines - Azure Maps Web SDK Samples
This sample shows how to add events to Popups.
azure maps webpopupsleaderlinessdk
https://samples.azuremaps.com/spatial-math/cardinal-spline-options
Cardinal Spline Options - Azure Maps Web SDK Samples
This sample provides a set of controls to test the various features of the Cardinal Spline calculation.
options azure mapsweb sdkcardinalsplinesamples
https://samples.azuremaps.com/symbol-layer/all-built-in-icon-templates-as-symbols
All built-in icon templates as symbols - Azure Maps Web SDK Samples
This sample shows all the built-in icon templates rendered on a symbol layer.
azure maps webbuilticontemplatessymbols
https://samples.azuremaps.com/map/map-events
Map Events - Azure Maps Web SDK Samples
This sample will highlight the name of the events that are firing as you interact with the map.
azure maps webeventssdksamples
https://samples.azuremaps.com/drawing-tools-module/create-a-measuring-tool
Create a measuring tool - Azure Maps Web SDK Samples
This sample shows how to use the drawing tools to measure distances and areas.
azure maps webcreatemeasuringtoolsdk
https://samples.azuremaps.com/drawing-tools-module/allow-map-panning-with-drawing-tools
Allow map panning with drawing tools - Azure Maps Web SDK Samples
This sample shows how to allow the map to pan when using the drawing tools with the interaction type set to click.
azure maps weballowpanningdrawingtools
https://samples.azuremaps.com/drawing-tools-module/snap-drawn-line-to-roads
Snap drawn line to roads - Azure Maps Web SDK Samples
This sample shows how to snap a line drawn using the drawing tools to the road network.
azure maps websnapdrawnlineroads
https://samples.azuremaps.com/controls/map-style-picker
Map Style Picker - Azure Maps Web SDK Samples
This sample shows how to add the map style picker control to the map.
azure maps webstylepickersdksamples
https://samples.azuremaps.com/services-module/methods-for-geocoding-multiple-addresses
Methods for geocoding multiple addresses - Azure Maps Web SDK Samples
This sample shows two different methods for geocoding a bunch of addresses quickly from within a web app.
azure maps webmethodsgeocodingmultipleaddresses
https://samples.azuremaps.com/html-markers/html-marker-layer
HTML Marker Layer - Azure Maps Web SDK Samples
This sample provides a layer which renders point data from a data source as HTML markers on the map.
azure maps webhtml markerlayersdksamples
https://samples.azuremaps.com/weather/historical-weather
Historical Weather - Azure Maps Web SDK Samples
This sample shows how to retrieve historical weather data using the Azure Maps Weather REST API.
azure maps webhistorical weathersdksamples
https://samples.azuremaps.com/controls/create-html-legend
Create HTML legend - Azure Maps Web SDK Samples
This sample shows how to create legends using custom HTML with the legend control.
azure maps webcreate htmllegendsdksamples
https://samples.azuremaps.com/traffic/traffic-overlay-options
Traffic Overlay Options - Azure Maps Web SDK Samples
This sample shows how the different Traffic Options change how the traffic overlay is rendered on the map.
options azure mapsweb sdktrafficoverlaysamples
https://samples.azuremaps.com/map/datasource-and-shape-events
DataSource and Shape events - Azure Maps Web SDK Samples
This sample shows how to the DataSource and Shape events work.
azure maps webdatasourceshapeeventssdk
https://samples.azuremaps.com/rest-services/fill-address-form-with-autocomplete
Fill Address Form with Autocomplete - Azure Maps Web SDK Samples
This sample shows how to use the Azure Maps Search Geocoding Autocomplete service with JQuery UI's autocomplete widget which provides address suggestions as...
azure maps webfilladdressformautocomplete
https://samples.azuremaps.com/polygons/polygon-labels---calculated
Polygon labels - calculated - Azure Maps Web SDK Samples
This sample shows how to create labels for polygons by calculating a coordinates and creating a point feature for the label.
azure maps webpolygonlabelscalculatedsdk
https://samples.azuremaps.com/demos/create-a-choropleth-map
Create a Choropleth Map - Azure Maps Web SDK Samples
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...
azure maps webcreatechoroplethsdksamples
https://samples.azuremaps.com/map/map-user-interaction-options
Map user interaction options - Azure Maps Web SDK Samples
This sample shows how the different user interaction options of the map to modify how the map reacts when the user interacts with it.
options azure mapsuser interactionweb sdksamples
https://samples.azuremaps.com/rest-services/mio
Multi-Itinerary Optimization - Azure Maps Web SDK Samples
This sample shows how to do a Multi-Itinerary Optimization with Azure Maps and the NVIDIA cuOpt optimizer service.
azure maps webmultiitineraryoptimizationsdk
https://samples.azuremaps.com/html-markers/pie-chart-html-markers
Pie Chart HTML Markers - Azure Maps Web SDK Samples
This sample shows how to create a pie chart using an HTML marker.
azure maps webpie charthtmlmarkerssdk
https://samples.azuremaps.com/map/lazy-load-the-map
Lazy Load the Map - Azure Maps Web SDK Samples
This sample shows how to delay the loading of the map SDK until it is needed.
azure maps weblazy loadsdksamples
https://samples.azuremaps.com/popups/accessible-popups
Accessible popups - Azure Maps Web SDK Samples
This sample shows how to use popups in a way that users can easily access them using keyboard shortcuts or on mouse click.
azure maps webaccessiblepopupssdksamples
https://samples.azuremaps.com/animations/animate-a-gps-trace
Animate a GPS trace - Azure Maps Web SDK Samples
This sample shows how to smoothly animate a symbol along a route path taking into consideration timestamps for each point in the route path.
azure maps webanimategpstracesdk
https://samples.azuremaps.com/tutorials/search
Search for points of interest - Azure Maps Web SDK Samples
This tutorial shows how to search for points of interest and display them on the map.
azure maps websearchpointsinterestsdk
https://samples.azuremaps.com/animations/animate-a-line
Animate a Line - Azure Maps Web SDK Samples
This sample shows how to animate the position of a line on the map by updating its coordinates and layer.
azure maps webanimatelinesdksamples
https://samples.azuremaps.com/services-module/calculate-spaced-positions-along-route
Calculate spaced positions along route - Azure Maps Web SDK Samples
This sample shows how to calculate a evenly spaced out positions along a route, in this case every 10 kilometers.
azure maps webalong routecalculatespacedpositions
https://samples.azuremaps.com/animations/animation-easings
Animation easings - Azure Maps Web SDK Samples
This sample demonstrates the different built in easing functions in the azure-maps-animation library.
azure maps webanimationsdksamples
https://samples.azuremaps.com/spatial-io-module/spatial-data-write-options
Spatial data write options - Azure Maps Web SDK Samples
This sample shows the different write options for the atlas.io.write function.
options azure mapsspatial dataweb sdkwritesamples
https://samples.azuremaps.com/spatial-io-module/load-kml-onto-map
Load KML onto map - Azure Maps Web SDK Samples
This sample shows how to load KML or KMZ files onto the map.
azure maps webloadkmlontosdk
https://samples.azuremaps.com/spatial-math/filter-data-along-route
Filter Data Along Route - Azure Maps Web SDK Samples
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.
azure maps webalong routefilterdatasdk
https://samples.azuremaps.com/image-layer/simple-image-layer
Simple Image Layer - Azure Maps Web SDK Samples
This sample shows how to overlay an image on the map as an Image layer.
azure maps websimple imagelayersdksamples
https://samples.azuremaps.com/controls/fullscreen-control
Fullscreen control - Azure Maps Web SDK Samples
This sample shows how to add a fullscreen button to the map to display it in fullscreen mode.
azure maps webfullscreencontrolsdksamples
https://samples.azuremaps.com/polygons/polygon-labels---symbol-layer
Polygon labels - symbol layer - Azure Maps Web SDK Samples
This sample shows how the symbol layer can be used to automatically render labels for polygons on the map.
azure maps webpolygonlabelssymbollayer
https://samples.azuremaps.com/drawing-tools-module/select-data-in-drawn-polygon-area
Select data in drawn polygon area - Azure Maps Web SDK Samples
This sample shows how to use the drawing tools to draw polygon areas on the map and select points that are within them.
azure maps webselectdatadrawnpolygon
https://samples.azuremaps.com/weather/show-weather-overlays-on-a-map
Show weather overlays on a map - Azure Maps Web SDK Samples
This sample shows how to add weather radar and infrared overlays to the map as a tile layer.
azure maps webshowweatheroverlayssdk
https://samples.azuremaps.com/spatial-math/create-isobands-from-isolines
Create isobands from isolines - Azure Maps Web SDK Samples
This sample shows how to create isobands from isoline data and display them on a map with a data driven styling to assign colors. Isobands represent the areas...
azure maps webcreatesdksamples
https://samples.azuremaps.com/spatial-math/display-cluster-area-with-convex-hull
Display cluster area with Convex Hull - Azure Maps Web SDK Samples
This sample shows how to display the area of the points contained within a cluster by calculating a convex hull.
azure maps webdisplayclusterareaconvex
https://samples.azuremaps.com/popups/accessible-shape-selection
Accessible shape selection - Azure Maps Web SDK Samples
This sample shows how to add keyboard selection support to shapes by leveraging hidden popups.
azure maps webaccessibleshapeselectionsdk
https://samples.azuremaps.com/services-module/show-traffic-along-route
Show traffic along route - Azure Maps Web SDK Samples
azure maps webalong routeshowtrafficsdk
https://samples.azuremaps.com/services-module/load-poi-as-the-map-moves
Load POIs as the map moves - Azure Maps Web SDK Samples
This sample shows how to load points of interest data on the map as the user moves the map.
azure maps webloadpoismovessdk
https://samples.azuremaps.com/html-markers/html-marker-layer-and-vector-tiles
HTML Marker layer and vector tiles - Azure Maps Web SDK Samples
This sample shows how to how to use a vector tile service to render point data on the map using HTML markers.
azure maps webhtml markerlayervectortiles
https://samples.azuremaps.com/animations/pulse-animation-with-bubble-layer
Pulse animation with bubble layer - Azure Maps Web SDK Samples
This sample shows how to create a pulse animation using a bubble layer as a pulse.
azure maps webpulseanimationbubblelayer
https://samples.azuremaps.com/image-layer/kml-ground-overlay-as-image-layer
KML Ground Overlay as Image Layer - Azure Maps Web SDK Samples
This sample shows how to overlay KML Ground Overlay information as an image layer on the map.
azure maps webkmlgroundoverlayimage
https://samples.azuremaps.com/demos/data-driven-styling
Data-Driven Styling - Azure Maps Web SDK Samples
This sample shows some basics around data-driven styling of layers in Azure Maps.
azure maps webdata drivenstylingsdksamples
https://samples.azuremaps.com/polygons/fill-polygon-with-built-in-icon-template
Fill polygon with built-in icon template - Azure Maps Web SDK Samples
This sample shows how to use an image template as a fill pattern in a polygon layer.
azure maps webfillpolygonbuilticon
https://samples.azuremaps.com/drawing-tools-module/draw-gridded-polygon
Draw gridded polygon - Azure Maps Web SDK Samples
This sample shows how to calculate a gridded pattern within a drawn polygon based on a physical distances.
azure maps webdrawgriddedpolygonsdk
https://samples.azuremaps.com/spatial-io-module/wfs-service-explorer
WFS service explorer - Azure Maps Web SDK Samples
This is a simple tool for exploring WFS services on Azure Maps.
azure maps webwfsserviceexplorersdk
https://samples.azuremaps.com/weather/forecasted-air-quality
Forecasted Air Quality - Azure Maps Web SDK Samples
This sample shows how to retrieve forecasted Air Quality data using the Azure Maps Weather REST API.
azure maps webair qualitysdksamples
https://samples.azuremaps.com/services-module/search-for-pois-along-route
Search for POIs along route - Azure Maps Web SDK Samples
This sample shows how to retrieve points of interest along a route.
azure maps webalong routesearchpoissdk
https://samples.azuremaps.com/html-markers/pie-chart-html-marker-options
Pie chart HTML marker options - Azure Maps Web SDK Samples
This sample shows how different options of the pie chart marker class change its rendering.
options azure mapspie charthtml markerweb sdksamples
https://samples.azuremaps.com/drawing-tools-module/use-a-snapping-grid
Use a snapping grid - Azure Maps Web SDK Samples
This sample shows how to use the snap grid manager when dragging HTML markers and/or while drawing shapes.
azure maps webusesnappinggridsdk
https://samples.azuremaps.com/tutorials/truck-route
Multiple routes by mode of travel - Azure Maps Web SDK Samples
This tutorial shows how to perform multiple routes for different modes of travel and display them on the map.
azure maps webmultipleroutesmodetravel
https://samples.azuremaps.com/weather/current-air-quality
Current Air Quality - Azure Maps Web SDK Samples
This sample shows how to retrieve current Air Quality data using the Azure Maps Weather REST API.
azure maps webair qualitycurrentsdksamples
https://samples.azuremaps.com/controls/category-legend-options
Category legend options - Azure Maps Web SDK Samples
This sample shows how the different options of the category legend type.
options azure mapsweb sdkcategorylegendsamples
https://samples.azuremaps.com/spatial-math/create-3d-isobands-from-isolines
Create 3D isobands from isolines - Azure Maps Web SDK Samples
This sample shows how to create 3D isobands from isoline data and display them on a map with a data driven styling to assign colors.
azure maps webcreatesdksamples
https://samples.azuremaps.com/controls/legend-control-options
Legend control options - Azure Maps Web SDK Samples
This sample shows how the different options of the legend control change the user experience.
options azure mapsweb sdklegendcontrolsamples
https://samples.azuremaps.com/geospatial-files/drag-and-drop-shapefiles-onto-the-map
Drag and Drop Shapefiles onto the Map - Azure Maps Web SDK Samples
This sample shows how to load zipped shapefile (.shp, .dbf, .prj) files onto the map by dragging and dropping from a local file.
azure maps webdragdropontosdk