Merge pull request #110801 from stevemunk/map-events-CodePen

removed CodePen samples from map events article

Author: Court72

articles/azure-maps/map-events.md

@@ -1,12 +1,11 @@
 ---
 title: Handle map events | Microsoft Azure Maps
 description: Learn which events are fired when users interact with maps. View a list of all supported map events. See how to use the Azure Maps Web SDK to handle events.
-author: eriklindeman
-ms.author: eriklind
-ms.date: 09/10/2019
-ms.topic: conceptual
+author: dubiety
+ms.author: yuchungchen
+ms.date: 06/12/2023
+ms.topic: how-to
 ms.service: azure-maps
-ms.custom: codepen
 ---
 
 # Interact with the map
@@ -15,30 +14,36 @@ This article shows you how to use [map events class](/javascript/api/azure-maps-
 
 ## Interact with the map
 
-Play with the map below, and see the corresponding mouse events highlighted on the right. You can click on the **JS tab** to view and edit the JavaScript code. You can also click on **Edit on CodePen** to modify the code on CodePen.
+The [Map Events] sample highlights the name of the events that are firing as you interact with the map.
 
-<br/>
+:::image type="content" source="./media/map-events/map-events.png"alt-text="A screenshot showing a map with a list of map events that are highlighted anytime your actions on the map trigger that event.":::
 
+<!-----------------------------------------------------------------------
 <iframe height='600' scrolling='no' title='Interacting with the map – mouse events' src='//codepen.io/azuremaps/embed/bLZEWd/?height=600&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' loading="lazy" allowtransparency='true' allowfullscreen='true'>See the Pen <a href='https://codepen.io/azuremaps/pen/bLZEWd/'>Interact with the map – mouse events</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
 </iframe>
+----------------------------------------------------------------------->
 
 ## Interact with map layers
 
-The following code highlights the fired event as you interact with the Symbol Layer. The symbol, bubble, line, and polygon layer all support the same set of events. The heat map and tile layers don't support any of these events.
+The [Layer Events] sample highlights the name of the events that are firing as you interact with the Symbol Layer. The symbol, bubble, line, and polygon layer all support the same set of events. The heat map and tile layers don't support any of these events.
 
-<br/>
+:::image type="content" source="./media/map-events/layer-events.png"alt-text="A screenshot showing a map with a list of layer events that are highlighted anytime you interact with the Symbol Layer.":::
 
+<!-----------------------------------------------------------------------
 <iframe height='600' scrolling='no' title='Interacting with the map – Layer Events' src='//codepen.io/azuremaps/embed/bQRRPE/?height=600&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' loading="lazy" allowtransparency='true' allowfullscreen='true'>See the Pen <a href='https://codepen.io/azuremaps/pen/bQRRPE/'>Interacting with the map – Layer Events</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
 </iframe>
+----------------------------------------------------------------------->
 
 ## Interact with HTML Marker
 
-The following code adds JavaScript map events to an HTML marker. It also highlights the name of the events that get fired up as you interact with the HTML marker.
+The [HTML marker layer events] sample highlights the name of the events that are firing as you interact with the HTML marker layer.
 
-<br/>
+:::image type="content" source="./media/map-events/html-marker-layer-events.png"alt-text="A screenshot showing a map with a list of HTML marker layer events that are highlighted anytime your actions on the map trigger that event.":::
 
+<!-----------------------------------------------------------------------
 <iframe height='500' scrolling='no' title='Interacting with the map - HTML Marker events' src='//codepen.io/azuremaps/embed/VVzKJY/?height=500&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' loading="lazy" allowtransparency='true' allowfullscreen='true'>See the Pen <a href='https://codepen.io/azuremaps/pen/VVzKJY/'>Interacting with the map - HTML Marker events</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
 </iframe>
+----------------------------------------------------------------------->
 
 The following table lists all supported map class events.
 
@@ -101,7 +106,6 @@ The following table lists all supported map class events.
 | `zoomend`           | Fired just after the map completes a transition from one zoom level to another, as the result of either user interaction or methods.|
 | `zoomstart`         | Fired just before the map begins a transition from one zoom level to another, as the result of either user interaction or methods.|
 
-
 ## Next steps
 
 See the following articles for full code examples:
@@ -111,3 +115,7 @@ See the following articles for full code examples:
 
 > [!div class="nextstepaction"]
 > [Code samples](/samples/browse/?products=azure-maps)
+
+[Map Events]: https://samples.azuremaps.com/?search=interact%20with&sample=map-events
+[Layer Events]: https://samples.azuremaps.com/?search=interact%20with&sample=layer-events
+[HTML marker layer events]: https://samples.azuremaps.com/?search=interact%20with&sample=html-marker-layer-events