Welcome to the Azure Maps JavaScript SDK

The Azure Maps SDK for JavaScript provides a rich set of tools and APIs to integrate interactive maps and geospatial services into your web applications. Leverage our comprehensive platform to display maps, visualize data, perform spatial analysis, and much more.

Whether you're building a logistics dashboard, a real estate listing app, or a location-based game, the Azure Maps SDK offers the flexibility and power you need.

Getting Started

Begin your journey with Azure Maps by setting up your development environment and obtaining an Azure Maps subscription key.

  1. Create an Azure Account: If you don't have one, sign up for a free Azure account.
  2. Create an Azure Maps Account: Navigate to the Azure portal and create a new Azure Maps account.
  3. Obtain a Subscription Key: From your Azure Maps account, retrieve your primary or secondary subscription key.
  4. Install the SDK: Include the SDK in your HTML file or install it via npm.

Include via CDN

<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas-2.1.0.min.js"></script>
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas-2.1.0.min.css" rel="stylesheet" />

Install via npm

npm install azure-maps-control

Key Features

Interactive Maps

Interactive Maps

Display rich, interactive maps with support for zooming, panning, and custom styling.

Data Visualization

Data Visualization

Visualize geospatial data using heatmaps, symbol layers, line layers, polygon layers, and more.

Search Services

Search Services

Geocode addresses, find points of interest (POIs), and perform reverse geocoding with our robust search APIs.

Routing Services

Routing Services

Calculate routes for various modes of transportation, considering traffic, travel modes, and route preferences.

API Reference

Explore the comprehensive API documentation for the Azure Maps SDK for JavaScript.

Map Control

atlas.Map class for initializing and managing map instances.

View Map Control API

Data Visualization

atlas.layer module for various data rendering layers like HeatMapLayer, SymbolLayer, etc.

View Data Visualization API

Search Services

atlas.service.SearchManager for accessing Points of Interest, Fuzzy Search, and Reverse Geocoding.

View Search Services API

Routing Services

atlas.service.RouteManager for calculating various types of routes.

View Routing Services API

Geospatial Operations

Utility functions for working with geographic data, transformations, and calculations.

View Geospatial Operations API

Tutorials & Guides

Learn how to implement common scenarios with our step-by-step tutorials.

Displaying a Basic Map

A beginner-friendly guide to rendering your first interactive map.

Read Tutorial

Adding Markers and Popups

Learn how to place custom markers and show information in popups.

Read Tutorial

Visualizing Traffic Data

Integrate real-time traffic overlays onto your map.

Read Tutorial

Code Examples

Explore practical code snippets demonstrating various features of the SDK.

// Example: Initialize a map
const map = new atlas.Map('map-container', {
    center: [-122.135, 47.608],
    zoom: 12,
    language: 'en-US',
    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: 'YOUR_AZURE_MAPS_SUBSCRIPTION_KEY'
    }
});

View More Examples

Community & Support

Connect with other developers, find answers, and get help.