Azure Maps Web Control

The Azure Maps Web Control lets you customize interactive maps with your own content and imagery for display in your web or mobile applications. This control makes use of WebGL, allowing you to render large data sets with high performance. Develop with the control using JavaScript or TypeScript.

How to Install

You can embed the Azure Maps V3 Web Control source code into your app by installing the NPM package:

NPM

npm install azure-maps-control

This package includes a minified version of the source code, CSS stylesheet, as well as the TypeScript definitions for the Azure Maps Web Control.

You would also need to embed the CSS stylesheet for various controls and popups to show correctly. You may find it under /node_modules/azure-maps-control/dist/atlas.min.css. If you are using a javascript bundler to bundle the dependencies and package your code, refer to your bundler's documentation on how this is done.

Webpack

For webpack, it is commonly done via a combination of style-loader and css-loader with documentation available at style-loader.

To begin, install style-loader and css-loader:

npm install --save-dev style-loader css-loader

Inside your source file, import atlas.min.css:

src/index.ts:

require('../node_modules/azure-maps-control/dist/atlas.min.css');

then add loaders to the module rules portion of the webpack config:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

Additional notes

If you are using MapControl inside create-react-app based project, make sure your browserlist settings do not include IE11, since it is no longer supported (not ie 11).

CDN

Alternatively, you can also reference the hosted version of the Azure Maps V3 Web Control by adding the following script tags directly to your application.

<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

Developer Resources

• Quickstart Guide
• Setup your Azure Maps account
• Tutorials
• How-to Documentation
• API Reference Documentation
• Code Samples
• Videos

Related Packages

• Azure Maps Service Module - A JavaScript library that makes it easy to work with the Azure Maps REST services in any web or NodeJS app.
• Azure Maps Drawing Tools Module - A JavaScript library that adds drawing capabilities to the Azure Maps Web control.
• Azure Maps Spatial IO Module - A JavaScript library that makes it easy to integrate spatial data.
• Azure Maps Indoor Module - A JavaScript library that provides a set of tools for adding indoor maps.
• AirMap plugin for Azure Maps - A plugin for the Azure Maps Web Control to view and interact with AirMap's Contextual Airspace Rules.

release note

Please refer to release note for more information.