The azure-maps-control npm package is a client-side library that allows you to embed the Azure Maps map control into your node.js applications using JavaScript or TypeScript. This library makes it easy to use the Azure Maps REST services and lets you customize interactive maps with your content and imagery.
Prerequisites
To use the npm package in an application, you must have the following prerequisites:
This package includes a minified version of the source code, CSS Style Sheet, and the TypeScript definitions for the Azure Maps map control.
You would also need to embed the CSS Style Sheet for various controls to display correctly. If you're using a JavaScript bundler to bundle the dependencies and package your code, refer to your bundler's documentation on how it's done. For webpack, it's 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:
PowerShell
npm install --save-devstyle-loadercss-loader
Inside your source file, import atlas.min.css:
JavaScript
import"azure-maps-control/dist/atlas.min.css";
Then add loaders to the module rules portion of the webpack config:
Refer to the following section for a complete example.
Create a map in a node.js application
Embed a map in a web page using the map control npm package.
Create a new project
PowerShell
npm init
npm init is a command that helps you create a package.json file for your node project. It asks you some questions and generates the file based on your answers. You can also use -y or –yes to skip the questions and use the default values. The package.json file contains information about your project, such as its name, version, dependencies, scripts, etc.
The following sample shows how to import a module and use it in your application. This sample uses azure-maps-spatial-io to read a POINT(-122.34009 47.60995) string as GeoJSON and renders it on the map using a bubble layer.
Install the npm package.
PowerShell
npm install azure-maps-spatial-io
Then, use an import declaration to add the module to a source file:
JavaScript
import * as spatial from"azure-maps-spatial-io";
Use spatial.io.ogc.WKT.read() to parse the text.
JavaScript
import * as atlas from"azure-maps-control";
import * as spatial from"azure-maps-spatial-io";
import"azure-maps-control/dist/atlas.min.css";
const onload = () => {
// Initialize a map instance.const map = new atlas.Map("map", {
center: [-122.34009, 47.60995],
zoom: 12,
view: "Auto",
// Add authentication details for connecting to Azure Maps.
authOptions: {
authType: "subscriptionKey",
subscriptionKey: "<Your Azure Maps Key>"
}
});
// Wait until the map resources are ready.
map.events.add("ready", () => {
// Create a data source and add it to the map.const datasource = new atlas.source.DataSource();
map.sources.add(datasource);
// Create a layer to render the data
map.layers.add(new atlas.layer.BubbleLayer(datasource));
// Parse the point string.var point = spatial.io.ogc.WKT.read("POINT(-122.34009 47.60995)");
// Add the parsed data to the data source.
datasource.add(point);
});
};
document.body.onload = onload;
Webpack 5 may throw errors about not being able to resolve some node.js core modules. Add these settings to your webpack config file to fix the problem.
Build end-to-end solutions in Microsoft Azure to create Azure Functions, implement and manage web apps, develop solutions utilizing Azure storage, and more.