Merge pull request #111084 from stevemunk/spatial-io-add-ogc-map-layer

Removed CodePen from article: Add a map layer from the Open Geospatial Consortium (OGC)

Author: Court72

articles/azure-maps/media/spatial-io-add-ogc-map-layer/ogc-map-layer-options.png

@@ -93,7 +93,7 @@ The previous examples demonstrated how to customize drawing options while instan
 
 The [Drawing manager options] can be used to test out customization of all options for the drawing manager using the `setOptions` function.
 
-:::image type="content" source="./media/set-drawing-options/drawing-manager-options.png"alt-text="A screenshot of a map showing Seattle with an area to the left of the map showing the drawing manager options that can be set, updating immediately in the map.":::
+:::image type="content" source="./media/set-drawing-options/drawing-manager-options.png"alt-text="A screenshot of a map of Seattle with a panel on the left showing the drawing manager options that can be selected to see the effects they make to the map.":::
 
 <!------------------------------
 <iframe height="685" title="Customize drawing manager" src="//codepen.io/azuremaps/embed/LYPyrxR/?height=600&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">See the Pen <a href='https://codepen.io/azuremaps/pen/LYPyrxR/'>Get shape data</a> by Azure Maps

articles/azure-maps/media/spatial-io-add-ogc-map-layer/ogc-map-layer.png

@@ -1,10 +1,11 @@
 ---
-title:  Add an Open Geospatial Consortium (OGC) map layer | Microsoft Azure Maps
+title:  Add an Open Geospatial Consortium (OGC) map layer
+titleSuffix: Microsoft Azure Maps
 description: Learn how to overlay an OGC map layer on the map, and how to use the different options in the OgcMapLayer class.
-author: eriklindeman
-ms.author: eriklind
-ms.date: 03/02/2020
-ms.topic: conceptual
+author: dubiety
+ms.author: yuchungchen
+ms.date: 06/16/2023
+ms.topic: how-to
 ms.service: azure-maps
 ---
 
@@ -18,7 +19,7 @@ The following sections outline the web map service features that are supported b
 
 - Supported versions: `1.0.0`, `1.1.0`, `1.1.1`, and `1.3.0`
 - The service must support the `EPSG:3857` projection system, or handle reprojections.
-- GetFeatureInfo requires the service to support `EPSG:4326` or handle reprojections. 
+- GetFeatureInfo requires the service to support `EPSG:4326` or handle reprojections.
 - Supported operations:
 
     | Operation | Description |
@@ -44,30 +45,32 @@ The following sections outline the web map service features that are supported b
 
 The `url` can be the base URL for the service or a full URL with the query for getting the capabilities of the service. Depending on the details provided, the WFS client may try several standard URL formats to determine how to initially access the service.
 
-The following code shows how to overlay an OGC map layer on the map.
+The [OGC map layer] sample shows how to overlay an OGC map layer on the map.
 
-<br/>
-
-<iframe height='700' scrolling='no' title='OGC Map layer example' src='//codepen.io/azuremaps/embed/xxGLZWB/?height=700&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true'>See the Pen <a href='https://codepen.io/azuremaps/pen/xxGLZWB/'>OGC Map layer example</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
-</iframe>
+:::image type="content" source="./media/spatial-io-add-ogc-map-layer/ogc-map-layer.png"alt-text="A screenshot that shows the snap grid on map.":::
 
+<!----------------------------------------------
+<iframe height='700' scrolling='no' title='OGC Map layer example' src='//codepen.io/azuremaps/embed/xxGLZWB/?height=700&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true'>See the Pen <a href='https://codepen.io/azuremaps/pen/xxGLZWB/'>OGC Map layer example</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.</iframe>
+---------------------------------------------->
 ## OGC map layer options
 
-The below sample demonstrates the different OGC map layer options. You may click on the code pen button at the top-right corner to edit the code pen.
+The [OGC map layer options] sample demonstrates the different OGC map layer options.
 
-<br/>
+:::image type="content" source="./media/spatial-io-add-ogc-map-layer/ogc-map-layer-options.png"alt-text="A screenshot that shows a map along with the OGC map layer options.":::
 
-<iframe height='700' scrolling='no' title='OGC map layer options' src='//codepen.io/azuremaps/embed/abOyEVQ/?height=700&theme-id=0&default-tab=result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true'>See the Pen <a href='https://codepen.io/azuremaps/pen/abOyEVQ/'>OGC map layer options</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
-</iframe>
+<!----------------------------------------------
+<iframe height='700' scrolling='no' title='OGC map layer options' src='//codepen.io/azuremaps/embed/abOyEVQ/?height=700&theme-id=0&default-tab=result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true'>See the Pen <a href='https://codepen.io/azuremaps/pen/abOyEVQ/'>OGC map layer options</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.</iframe>
+---------------------------------------------->
 
 ## OGC Web Map Service explorer
 
-The following tool overlays imagery from the Web Map Services (WMS) and Web Map Tile Services (WMTS) as layers. You may select which layers in the service are rendered on the map. You may also view the associated legends for these layers.
+The [OGC Web Map Service explorer] sample overlays imagery from the Web Map Services (WMS) and Web Map Tile Services (WMTS) as layers. You may select which layers in the service are rendered on the map. You may also view the associated legends for these layers.
 
-<br/>
+:::image type="content" source="./media/spatial-io-add-ogc-map-layer/ogc-web-map-service-explorer.png"alt-text="A screenshot that shows a map with a WMTS layer that comes from the world geology survey. On the left of the map is a drop-down list showing the OGC services which can be selected.":::
 
-<iframe height='750' scrolling='no' title='OGC Web Map Service explorer' src='//codepen.io/azuremaps/embed/YzXxYdX/?height=750&theme-id=0&default-tab=result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true'>See the Pen <a href='https://codepen.io/azuremaps/pen/YzXxYdX/'>OGC Web Map Service explorer</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
-</iframe>
+<!----------------------------------------------
+<iframe height='750' scrolling='no' title='OGC Web Map Service explorer' src='//codepen.io/azuremaps/embed/YzXxYdX/?height=750&theme-id=0&default-tab=result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true'>See the Pen <a href='https://codepen.io/azuremaps/pen/YzXxYdX/'>OGC Web Map Service explorer</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.</iframe>
+---------------------------------------------->
 
 You may also specify the map settings to use a proxy service. The proxy service lets you load resources that are hosted on domains that don't have CORS enabled.
 
@@ -90,4 +93,8 @@ See the following articles, which contain code samples you could add to your map
 > [Leverage core operations](spatial-io-core-operations.md)
 
 > [!div class="nextstepaction"]
-> [Supported data format details](spatial-io-supported-data-format-details.md)
+> [Supported data format details](spatial-io-supported-data-format-details.md)
+
+[OGC map layer]: https://samples.azuremaps.com/spatial-io-module/ogc-map-layer-example
+[OGC map layer options]: https://samples.azuremaps.com/spatial-io-module/ogc-map-layer-options
+[OGC Web Map Service explorer]: https://samples.azuremaps.com/spatial-io-module/ogc-web-map-service-explorer