feat: 1.0.0 release

MIGRATION.md

@@ -0,0 +1,14 @@
+## Migrating from v0.x to v1.0
+
+### azure-maps-control dependency
+`azure-maps-control` is installed as a peerDependencies package, you will need to add it to your package.json.
+```
+npm install --save azure-maps-control@latest
+```
+This will install `azure-maps-control` v3 to your application. You may upgrade it independently in the future. See [AzureMaps WebSDK release notes](https://learn.microsoft.com/azure/azure-maps/release-notes-map-control) for a list of new features and bug fixes.
+
+### Styling
+v1.0 removes the internal css import from `azure-maps-control` to accommodate usage in Next.js. You will need to add the following stylesheet to your application manually. The stylesheet is required for the marker, popup and control components in `react-azure-maps` to work properly.
+```javascript
+import 'azure-maps-control/dist/atlas.min.css'
+```

README.md

@@ -20,6 +20,12 @@ or
 yarn add react-azure-maps
 ```
 
+## Styling
+Embed the following css to your application. The stylesheet is required for the marker, popup and control components in `react-azure-maps` to work properly.
+```javascript
+import 'azure-maps-control/dist/atlas.min.css'
+```
+
 ## Documentation
 
 Documentation is available [Documentation](https://react-azure-maps.now.sh)
@@ -29,6 +35,7 @@ Generated documentation from typedoc is available [Documentation](https://azure.
 ## Compatibility with azure-maps-controls
 
 ```
+1.0.0 - 3.0.0
 0.2.0 - 2.0.32
 0.1.4 - 2.0.31
 0.1.3 - 2.0.25
@@ -115,6 +122,18 @@ authOptions: {
 }
 ```
 
+```javascript
+// SAS Token
+authOptions: {
+    authType: AuthenticationType.sas,
+    getToken: (resolve, reject) => {
+        // URL to your authentication service that retrieves a SAS Token.
+        var tokenServiceUrl = "https://example.com/api/GetSASToken";
+        fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
+    }
+}
+```
+
 ## Local development with [Playground Package](https://github.com/Azure/react-azure-maps-playground)
 
 If you want to do some local development using [Playground Package](https://github.com/Azure/react-azure-maps-playground) with local link to the package, you need to make the following steps:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-azure-maps",
-  "version": "0.4.8",
+  "version": "1.0.0",
   "description": "React Wrapper for Azure Maps",
   "keywords": [
     "react",
@@ -94,6 +94,7 @@
     "@types/jest": "^26.0.15",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
+    "azure-maps-control": "^3.0.1",
     "babel-preset-env": "^1.7.0",
     "concurrently": "^5.3.0",
     "cross-env": "^7.0.2",
@@ -118,15 +119,11 @@
     "typescript": "^4.1.2"
   },
   "peerDependencies": {
-    "azure-maps-control": "2.0.32",
-    "guid-typescript": "^1.0.9",
-    "mapbox-gl": "^1.10.0",
+    "azure-maps-control": "^3.0.1",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0"
   },
   "dependencies": {
-    "azure-maps-control": "2.0.32",
-    "guid-typescript": "^1.0.9",
-    "mapbox-gl": "^1.10.0"
+    "guid-typescript": "^1.0.9"
   }
 }

preview/react-preview.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { AzureMap, AzureMapsProvider, AuthenticationType } from '../dist/react-azure-maps.es5'
+import 'azure-maps-control/dist/atlas.min.css'
 
 const option = {
   authOptions: {

rollup.config.js

@@ -1,60 +1,60 @@
-import babel from "@rollup/plugin-babel";
-import commonjs from "@rollup/plugin-commonjs";
-import json from "@rollup/plugin-json";
-import resolve from "@rollup/plugin-node-resolve";
-import replace from "@rollup/plugin-replace";
-import externals from "rollup-plugin-node-externals";
-import pkg from "./package.json";
-import postcss from "rollup-plugin-postcss";
-import { terser } from "rollup-plugin-terser";
+import babel from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import json from '@rollup/plugin-json'
+import resolve from '@rollup/plugin-node-resolve'
+import replace from '@rollup/plugin-replace'
+import externals from 'rollup-plugin-node-externals'
+import pkg from './package.json'
+import postcss from 'rollup-plugin-postcss'
+import { terser } from 'rollup-plugin-terser'
 
-const ENV_PRODUCTION = "production";
-const ENV_DEVELOPMENT = "development";
-const env = process.env.NODE_ENV || ENV_PRODUCTION;
+const ENV_PRODUCTION = 'production'
+const ENV_DEVELOPMENT = 'development'
+const env = process.env.NODE_ENV || ENV_PRODUCTION
 
 if (env !== ENV_DEVELOPMENT && env !== ENV_PRODUCTION) {
   console.error(`
 Unsupported NODE_ENV: ${env}
 Should be either "${ENV_DEVELOPMENT}" or "${ENV_PRODUCTION}"
-`);
-  process.exit(1);
+`)
+  process.exit(1)
 }
-const extensions = [".js", ".jsx", ".ts", ".tsx"];
+const extensions = ['.js', '.jsx', '.ts', '.tsx']
 
 export default {
   input: `src/${pkg.name}.ts`,
   output: [
     {
       file: pkg.module,
-      format: "es",
-      exports: "named",
-      preserveModulesRoot: "src",
-    },
+      format: 'es',
+      exports: 'named',
+      preserveModulesRoot: 'src'
+    }
   ].filter(Boolean),
   watch: {
-    include: "src/**",
+    include: 'src/**'
   },
   plugins: [
-    externals({ peerDeps: true, deps: true, exclude: "azure-maps-control" }),
+    externals({ peerDeps: true, deps: true }),
     replace({
-      "process.env.NODE_ENV": JSON.stringify(env),
-      preventAssignment: true,
+      'process.env.NODE_ENV': JSON.stringify(env),
+      preventAssignment: true
     }),
     json(),
     postcss({
-      extensions: [".css"],
+      extensions: ['.css']
     }),
     resolve({
       browser: true,
-      extensions,
+      extensions
     }),
     commonjs(),
     babel({
-      rootMode: "upward",
+      rootMode: 'upward',
       extensions,
-      babelHelpers: "runtime",
-      include: ["./src/**/*"],
+      babelHelpers: 'runtime',
+      include: ['./src/**/*']
     }),
-    terser(),
-  ],
-};
+    terser()
+  ]
+}

src/components/AzureMap/AzureMap.tsx

@@ -3,8 +3,6 @@ import atlas, { Map } from 'azure-maps-control'
 import { IAzureMap, IAzureMapsContextProps, MapType } from '../../types'
 import { AzureMapsContext } from '../../contexts/AzureMapContext'
 import { Guid } from 'guid-typescript'
-import 'azure-maps-control/dist/atlas.min.css'
-import 'mapbox-gl/dist/mapbox-gl.css'
 import { useCheckRef } from '../../hooks/useCheckRef'
 import { createImageSprites } from './useCreateSprites'
 import { createMapControls, createMapCustomControls } from './useCreateMapControls'
@@ -101,6 +99,10 @@ const AzureMap = memo(
 
     useEffect(() => {
       if (mapRefSource.current === null) {
+        if (!options.sessionId) {
+          // Assign default session ID with a prefix
+          atlas.setSessionId(`react-azure-maps:${Guid.create().toString()}`)
+        }
         mapRefSource.current = new atlas.Map(mapId, options)
       }
       setMapRef(mapRefSource.current)

src/components/AzureMap/useCreateMapControls.tsx

@@ -8,13 +8,11 @@ import atlas, {
   ZoomControlOptions
 } from 'azure-maps-control'
 
-
-
 export const createMapControls = (mapRef: MapType, controls: IAzureMapControls[]) => {
   controls.forEach((control: IAzureMapControls) => {
     const { controlName, options, controlOptions } = control
     mapRef.controls.add(
-      createControl(controlName, controlOptions) as atlas.ControlBase,
+      createControl(controlName, controlOptions) as atlas.control.ControlBase,
       options as ControlOptions
     )
   })
@@ -23,7 +21,7 @@ export const createMapControls = (mapRef: MapType, controls: IAzureMapControls[]
 export const createControl = (
   type: string,
   options?: ControlOptions
-): atlas.ControlBase | undefined => {
+): atlas.control.ControlBase | undefined => {
   switch (type) {
     case 'CompassControl':
       return new atlas.control.CompassControl(options as CompassControlOptions)
@@ -50,4 +48,3 @@ export const createMapCustomControls = (
     mapRef.controls.add(control, controlOptions)
   })
 }
-

src/types.ts

@@ -161,28 +161,28 @@ export type IAzureMapEvent = {
 export type IAzureDataSourceStatefulProviderProps = {
   id: string
   children?:
-  | Array<IAzureDataSourceChildren | IAzureDataSourceChildren[] | null>
-  | IAzureDataSourceChildren
-  | null
+    | Array<IAzureDataSourceChildren | IAzureDataSourceChildren[] | null>
+    | IAzureDataSourceChildren
+    | null
   options?: DataSourceOptions
   events?: IAzureMapDataSourceEvent | any
   dataFromUrl?: string
   collection?:
-  | atlas.data.FeatureCollection
-  | atlas.data.Feature<atlas.data.Geometry, any>
-  | atlas.data.Geometry
-  | atlas.data.GeometryCollection
-  | Shape
-  | Array<atlas.data.Feature<atlas.data.Geometry, any> | atlas.data.Geometry | Shape>
+    | atlas.data.FeatureCollection
+    | atlas.data.Feature<atlas.data.Geometry, any>
+    | atlas.data.Geometry
+    | atlas.data.GeometryCollection
+    | Shape
+    | Array<atlas.data.Feature<atlas.data.Geometry, any> | atlas.data.Geometry | Shape>
   index?: number
 }
 
 export type IAzureVectorTileSourceStatefulProviderProps = {
   id: string
   children?:
-  | Array<IAzureVectorTileSourceChildren | IAzureVectorTileSourceChildren[] | null>
-  | IAzureVectorTileSourceChildren
-  | null
+    | Array<IAzureVectorTileSourceChildren | IAzureVectorTileSourceChildren[] | null>
+    | IAzureVectorTileSourceChildren
+    | null
   options?: VectorTileSourceOptions
   events?: IAzureMapVectorTileSourceEvent
   // NOTE: not sure yet why this is needed, haven't seen this used in AzureMapsDataSource, though IAzureGeoJSONDataSourceStatefulProviderProps has it
@@ -202,16 +202,16 @@ export type IAzureMapLifecycleEvent = {
 export type IAzureLayerStatefulProviderProps = {
   id?: string
   options?:
-  | (SymbolLayerOptions &
-    HeatMapLayerOptions &
-    ImageLayerOptions &
-    LineLayerOptions &
-    PolygonExtrusionLayerOptions &
-    PolygonLayerOptions &
-    TileLayerOptions &
-    BubbleLayerOptions &
-    LayerOptions)
-  | Options
+    | (SymbolLayerOptions &
+        HeatMapLayerOptions &
+        ImageLayerOptions &
+        LineLayerOptions &
+        PolygonExtrusionLayerOptions &
+        PolygonLayerOptions &
+        TileLayerOptions &
+        BubbleLayerOptions &
+        LayerOptions)
+    | Options
   type: IAzureMapLayerType
   events?: IAzureMapLayerEvent | any
   onCreateCustomLayer?: (dataSourceRef: DataSourceType, mapRef: MapType | null) => atlas.layer.Layer
@@ -316,10 +316,10 @@ export type IAzureMapFeature = {
   properties?: Options
   // Shape functions:
   setCoords?:
-  | atlas.data.Position
-  | atlas.data.Position[]
-  | atlas.data.Position[][]
-  | atlas.data.Position[][][]
+    | atlas.data.Position
+    | atlas.data.Position[]
+    | atlas.data.Position[][]
+    | atlas.data.Position[][][]
   setProperties?: Options
 }