azure-maps-control 2.2.2 → 3.0.0-preview.2

package/ReadMe.md

@@ -1,40 +1,81 @@
-# Azure Maps Web Control
-
-The [Azure Maps](https://azure.com/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 Web Control source code into your app by installing the NPM package:
-
-> npm install azure-maps-control
-
-This package includes a minified version of the source code as well as the TypeScript definitions for the Azure Maps Web Control.
-
-Alternatively, you can also reference the hosted version of the Azure Maps Web Control by adding the following script tags to your application.
-
-```html
-<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
-<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
-```
-
-## Developer Resources
-
-* [Quickstart Guide](https://docs.microsoft.com/azure/azure-maps/quick-demo-map-app)
-* [Setup your Azure Maps account](https://docs.microsoft.com/azure/azure-maps/how-to-manage-account-keys)
-* [Tutorials](https://docs.microsoft.com/azure/azure-maps/tutorial-search-location)
-* [How-to Documentation](https://docs.microsoft.com/azure/azure-maps/how-to-use-map-control)
-* [API Reference Documentation](https://docs.microsoft.com/javascript/api/azure-maps-control/)
-* [Code Samples](https://aka.ms/azuremapssamples)
-* [Videos](https://aka.ms/AzureMapsVideos)
-
-## Related Packages
-
-* [Azure Maps Service Module](https://www.npmjs.com/package/azure-maps-rest) - 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](https://www.npmjs.com/package/azure-maps-drawing-tools) - A JavaScript library that adds drawing capabilities to the Azure Maps Web control.
-* [Azure Maps Spatial IO Module](https://www.npmjs.com/package/azure-maps-spatial-io) - A JavaScript library that makes it easy to integrate spatial data with the Azure Maps web SDK using JavaScript or TypeScript.
-* [Azure Maps Indoor Module](https://www.npmjs.com/package/azure-maps-indoor) - A JavaScript library that provides a set of tools for adding indoor maps built using Creator in the Azure Maps Web Control.
-* [AirMap plugin for Azure Maps](https://www.npmjs.com/package/js-azure-maps-plugin) - A plugin for the Azure Maps Web Control to view and interact with AirMap's Contextual Airspace Rules.
-
-## Release Notes
-
-Please refer to [Release Notes](https://learn.microsoft.com/azure/azure-maps/release-notes-map-control) for more details.
+# Azure Maps Web Control (3.0.0-preview.2)
+
+The [Azure Maps](https://azure.com/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 (under @next tag, since it is a preview release):
+
+### NPM 
+
+```
+npm install azure-maps-control@next
+```
+
+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](https://webpack.js.org/), it is commonly done via a combination of `style-loader` and `css-loader` with documentation available at [style-loader](https://webpack.js.org/loaders/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**:
+
+```ts
+require('../node_modules/azure-maps-control/dist/atlas.min.css');
+```
+
+then add loaders to the module rules portion of the webpack config:
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
+    ],
+  },
+};
+```
+
+### 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.
+
+```html
+<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3.0.0-preview.2/atlas.min.css" type="text/css" />
+<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3.0.0-preview.2/atlas.min.js"></script>
+```
+
+## Developer Resources
+
+* [Quickstart Guide](https://docs.microsoft.com/azure/azure-maps/quick-demo-map-app)
+* [Setup your Azure Maps account](https://docs.microsoft.com/azure/azure-maps/how-to-manage-account-keys)
+* [Tutorials](https://docs.microsoft.com/azure/azure-maps/tutorial-search-location)
+* [How-to Documentation](https://docs.microsoft.com/azure/azure-maps/how-to-use-map-control)
+* [API Reference Documentation](https://docs.microsoft.com/javascript/api/azure-maps-control/)
+* [Code Samples](https://aka.ms/azuremapssamples)
+* [Videos](https://aka.ms/AzureMapsVideos)
+
+## Related Packages
+
+* [Azure Maps Service Module](https://www.npmjs.com/package/azure-maps-rest) - 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](https://www.npmjs.com/package/azure-maps-drawing-tools) - A JavaScript library that adds drawing capabilities to the Azure Maps Web control.
+* [Azure Maps Spatial IO Module](https://www.npmjs.com/package/azure-maps-spatial-io) - A JavaScript library that makes it easy to integrate spatial data.
+* [Azure Maps Indoor Module](https://www.npmjs.com/package/azure-maps-indoor) - A JavaScript library that provides a set of tools for adding indoor maps.
+* [AirMap plugin for Azure Maps](https://www.npmjs.com/package/js-azure-maps-plugin) - A plugin for the Azure Maps Web Control to view and interact with AirMap's Contextual Airspace Rules.
+
+## Changelog
+
+Please refer to [CHANGELOG.md](https://github.com/MicrosoftDocs/azure-iot-docs-sdk-typescript/blob/main/CHANGELOG.md)