azure-maps-control 3.0.0-preview.1 → 3.0.0-preview.10

package/ReadMe.md

@@ -1,39 +1,86 @@
-# 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 Search 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.
-* [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)
+# Azure Maps Web Control (3.0.0-preview.10)
+
+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"],
+      },
+    ],
+  },
+};
+```
+
+#### Additional notes
+
+If you are using `MapControl` inside [create-react-app](https://create-react-app.dev/) 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.
+
+```html
+<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3.0.0-preview.10/atlas.min.css" type="text/css" />
+<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3.0.0-preview.10/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.
+
+## release note
+
+Please refer to [release note](https://learn.microsoft.com/azure/azure-maps/release-notes-map-control) for more information.