Merge pull request #129 from yulinscottkang/css

chore: remove internal css imports

Author: yulinscottkang

MIGRATION.md

@@ -0,0 +1,7 @@
+## Migrating from v0.x to v1.0
+
+### 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)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-azure-maps",
-  "version": "0.4.4",
+  "version": "1.0.0-beta.0",
   "description": "React Wrapper for Azure Maps",
   "keywords": [
     "react",
@@ -115,13 +115,11 @@
   "peerDependencies": {
     "azure-maps-control": "2.0.32",
     "guid-typescript": "^1.0.9",
-    "mapbox-gl": "^1.10.0",
     "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"
   }
 }

src/components/AzureMap/AzureMap.tsx

@@ -3,8 +3,6 @@ import atlas 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/src/css/mapbox-gl.css'
 import { useCheckRef } from '../../hooks/useCheckRef'
 import { createImageSprites } from './useCreateSprites'
 import { createMapControls, createMapCustomControls } from './useCreateMapControls'
@@ -27,9 +25,13 @@ const AzureMap = memo(
     styleOptions,
     serviceOptions
   }: IAzureMap) => {
-    const { setMapRef, removeMapRef, mapRef, setMapReady, isMapReady } = useContext<
-      IAzureMapsContextProps
-    >(AzureMapsContext)
+    const {
+      setMapRef,
+      removeMapRef,
+      mapRef,
+      setMapReady,
+      isMapReady
+    } = useContext<IAzureMapsContextProps>(AzureMapsContext)
     const [mapId] = useState(providedMapId || Guid.create().toString())
     useEffect(() => {
       if (mapRef) {
@@ -61,7 +63,7 @@ const AzureMap = memo(
       }
     }, [serviceOptions])
 
-    useCheckRef<MapType, MapType>(mapRef, mapRef, mref => {
+    useCheckRef<MapType, MapType>(mapRef, mapRef, (mref) => {
       mref.events.add('ready', () => {
         if (imageSprites) {
           createImageSprites(mref, imageSprites)