Add a section for basemap customization

Author: zhz0704

articles/azure-maps/choose-map-style.md

@@ -27,7 +27,7 @@ var map = new atlas.Map('map', {
     style: 'road'
 
     //Additional map options.
-};
+});
 
 //Update the style options at anytime using `setStyle` function.
 map.setStyle({
@@ -37,8 +37,6 @@ map.setStyle({
 });
 ```
 
-For a fully functional sample that shows how the different styles affect how the map is rendered, see [Map style options] in the [Azure Maps Samples]. For the source code for this sample, see [Map style options source code].
-
 <!-----------------------------------------------------------------------------------------------
 <br/>
 > [!VIDEO https://codepen.io/azuremaps/embed/eYNMjPb?height=700&theme-id=0&default-tab=result]
@@ -57,7 +55,7 @@ var map = new atlas.Map('map', {
     style: 'grayscale_dark',
 
     //Additional map options
-);
+});
 ```
 
 :::image type="content" source="./media/choose-map-style/set-base-map-style-on-initialization.png" alt-text="Screenshot showing the grayscale dark style being set during the map load process.":::
@@ -85,6 +83,74 @@ map.setStyle({ style: 'satellite' });
 > [!VIDEO //codepen.io/azuremaps/embed/yqXYzY/?height=265&theme-id=0&default-tab=js,result&embed-version=2&editable=true]
 ----------------------------------------------------------------------------------------------->
 
+## Customize the base map
+The base map can be customized with the `styleOverrides` option. To see all available options, see [styleOverrides].
+
+The following code shows how to disable country/region borders and building footprints on the map.
+
+```javascript
+var map = new atlas.Map('map', {
+    styleOverrides: {
+        countryRegion: { borderVisible: false },
+        buildingFootprint: { visible: false },
+    },
+
+    //Additional map options
+});
+```
+
+Here are the effects of all five available `styleOverrides` options:
+
+1. Country/region borders
+   
+```javascript
+styleOverrides: {
+    countryRegion: { borderVisible: false }
+}
+```
+:::image type="content" source="./media/choose-map-style/country-region.gif" alt-text="Country/region borders":::
+
+2. Admin district borders
+
+```javascript
+styleOverrides: {
+    adminDistrict: { borderVisible: false }
+}
+```
+:::image type="content" source="./media/choose-map-style/admin-district.gif" alt-text="Admin district borders":::
+
+3. Second admin district borders
+
+```javascript
+styleOverrides: {
+    adminDistrict2: { borderVisible: false }
+}
+```
+:::image type="content" source="./media/choose-map-style/admin-district2.gif" alt-text="Second admin district borders":::
+
+4. Building footprints
+
+```javascript
+styleOverrides: {
+    buildingFootprint: { visible: false }
+}
+```
+:::image type="content" source="./media/choose-map-style/building-footprint.gif" alt-text="Building footprints":::
+
+5. Road details
+
+```javascript
+styleOverrides: {
+    roadDetails: { visible: false }
+}
+```
+:::image type="content" source="./media/choose-map-style/road-details.gif" alt-text="Road details":::
+
+> [!NOTE]
+> For the supported map styles on each `styleOverrides` option, please read [styleOverrides] API documentation for more details.
+
+For a fully functional sample that shows how the different styles affect how the map is rendered, see [Map style options] in the [Azure Maps Samples]. For the source code for this sample, see [Map style options source code].
+
 ## Add the style picker control
 
 The style picker control provides an easy to use button with flyout panel that can be used by the end user to switch between base styles.
@@ -154,6 +220,7 @@ See the following articles for more code samples to add to your maps:
 > [Add a bubble layer]
 
 [style options]: /javascript/api/azure-maps-control/atlas.styleoptions
+[styleOverrides]: /javascript/api/azure-maps-control/atlas.styleoverrides
 [base map styles]: supported-map-styles.md
 
 [Add a bubble layer]: map-add-bubble-layer.md