Merge pull request #111364 from stevemunk/Sample-Code-Links-17-21

Added links to sample code for Azure Maps Samples (17-21)

Author: Court72

articles/azure-maps/map-add-snap-grid.md

@@ -18,7 +18,7 @@ The resolution of the snapping grid is in pixels. The grid is square and relativ
 
 Create a snap grid using the `atlas.drawing.SnapGridManager` class and pass in a reference to the map you want to connect the manager to. Set the `showGrid` option to `true` if you want to make the grid visible. To snap a shape to the grid, pass it into the snap grid managers `snapShape` function. If you want to snap an array of positions, pass it into the `snapPositions` function.
 
-The [Use a snapping grid] sample snaps an HTML marker to a grid when it's dragged. Drawing tools are used to snap drawn shapes to the grid when the `drawingcomplete` event fires.
+The [Use a snapping grid] sample snaps an HTML marker to a grid when it's dragged. Drawing tools are used to snap drawn shapes to the grid when the `drawingcomplete` event fires. For the source code for this sample, see [Use a snapping grid source code].
 
 :::image type="content" source="./media/map-add-snap-grid/use-snapping-grid.png"alt-text="A screenshot that shows the snap grid on map.":::
 
@@ -32,7 +32,7 @@ The [Use a snapping grid] sample snaps an HTML marker to a grid when it's dragge
 
 ## Snap grid options
 
-The [Snap grid options] sample shows the different customization options available for the snap grid manager. The grid line styles can be customized by retrieving the underlying line layer using the snap grid managers `getGridLayer` function.
+The [Snap grid options] sample shows the different customization options available for the snap grid manager. The grid line styles can be customized by retrieving the underlying line layer using the snap grid managers `getGridLayer` function. For the source code for this sample, see [Snap grid options source code].
 
 :::image type="content" source="./media/map-add-snap-grid/snap-grid-options.png"alt-text="A screenshot of map with snap grid enabled and an options panel on the left where you can set various options and see the results in the map.":::
 
@@ -59,3 +59,5 @@ Learn how to use other features of the drawing tools module:
 
 [Use a snapping grid]: https://samples.azuremaps.com/drawing-tools-module/use-a-snapping-grid
 [Snap grid options]: https://samples.azuremaps.com/drawing-tools-module/snap-grid-options
+[Use a snapping grid source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Use%20a%20snapping%20grid/Use%20a%20snapping%20grid.html
+[Snap grid options source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Drawing%20Tools%20Module/Snap%20grid%20options/Snap%20grid%20options.html

articles/azure-maps/map-add-tile-layer.md

@@ -47,7 +47,7 @@ map.layers.add(new atlas.layer.TileLayer({
 }), 'labels');
 ```
 
-For a fully functional sample that shows how to create a tile layer that points to a set of tiles using the x, y, zoom tiling system, see the [Tile Layer using X, Y, and Z] sample in the [Azure Maps Samples]. The source of the tile layer in this sample is a nautical chart from the [OpenSeaMap project], an OpenStreetMaps project licensed under ODbL.
+For a fully functional sample that shows how to create a tile layer that points to a set of tiles using the x, y, zoom tiling system, see the [Tile Layer using X, Y, and Z] sample in the [Azure Maps Samples]. The source of the tile layer in this sample is a nautical chart from the [OpenSeaMap project], an OpenStreetMaps project licensed under ODbL. For the source code for this sample, see [Tile Layer using X, Y, and Z source code].
 
 :::image type="content" source="./media/map-add-tile-layer/tile-layer.png"alt-text="A screenshot of map with a tile layer that points to a set of tiles using the x, y, zoom tiling system. The source of this tile layer is the OpenSeaMap project.":::
 
@@ -60,7 +60,7 @@ For a fully functional sample that shows how to create a tile layer that points
 
 A web-mapping service (WMTS) is an Open Geospatial Consortium (OGC) standard for serving images of map data. There are many open data sets available in this format that you can use with Azure Maps. This type of service can be used with a tile layer if the service supports the `EPSG:3857` coordinate reference system (CRS). When using a WMS service, set the width and height parameters to the value supported by the service, be sure to set this value in the `tileSize` option. In the formatted URL, set the `BBOX` parameter of the service with the `{bbox-epsg-3857}` placeholder.
 
-For a fully functional sample that shows how to create a tile layer that points to a Web Mapping Service (WMS), see the [WMS Tile Layer] sample in the [Azure Maps Samples].
+For a fully functional sample that shows how to create a tile layer that points to a Web Mapping Service (WMS), see the [WMS Tile Layer] sample in the [Azure Maps Samples]. For the source code for this sample, see [WMS Tile Layer source code].
 
 The following screenshot shows the [WMS Tile Layer] sample that overlays a web-mapping service of geological data from the [U.S. Geological Survey (USGS)] on top of the map and below the labels.
 
@@ -81,7 +81,7 @@ A web-mapping tile service (WMTS) is an Open Geospatial Consortium (OGC) standar
 * `{TileRow}` => `{y}`
 * `{TileCol}` => `{x}`
 
-For a fully functional sample that shows how to create a tile layer that points to a Web Mapping Tile Service (WMTS), see the [WMTS Tile Layer] sample in the [Azure Maps Samples].
+For a fully functional sample that shows how to create a tile layer that points to a Web Mapping Tile Service (WMTS), see the [WMTS Tile Layer] sample in the [Azure Maps Samples]. For the source code for this sample, see [WMTS Tile Layer source code].
 
 The following screenshot shows the [WMTS Tile Layer] sample overlaying a web-mapping tile service of imagery from the [U.S. Geological Survey (USGS) National Map] on top of a map, below roads and labels.
 
@@ -96,7 +96,7 @@ The following screenshot shows the [WMTS Tile Layer] sample overlaying a web-map
 
 ## Customize a tile layer
 
-The tile layer class has many styling options. The [Tile Layer Options] sample is a tool to try them out.
+The tile layer class has many styling options. The [Tile Layer Options] sample is a tool to try them out. For the source code for this sample, see [Tile Layer Options source code].
 
 :::image type="content" source="./media/map-add-tile-layer/tile-layer-options.png"alt-text="A screenshot of Tile Layer Options sample.":::
 
@@ -121,10 +121,16 @@ See the following articles for more code samples to add to your maps:
 > [Add an image layer](./map-add-image-layer.md)
 
 [Azure Maps Samples]: https://samples.azuremaps.com
+[Tile Layer Options]: https://samples.azuremaps.com/tile-layers/tile-layer-options
+[WMS Tile Layer]: https://samples.azuremaps.com/tile-layers/wms-tile-layer
+[WMTS Tile Layer]: https://samples.azuremaps.com/tile-layers/wmts-tile-layer
 [Tile Layer using X, Y, and Z]: https://samples.azuremaps.com/tile-layers/tile-layer-using-x,-y-and-z
+
+[Tile Layer Options source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tile%20Layers/Tile%20Layer%20Options/Tile%20Layer%20Options.html
+[WMS Tile Layer source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tile%20Layers/WMS%20Tile%20Layer/WMS%20Tile%20Layer.html
+[WMTS Tile Layer source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tile%20Layers/WMTS%20Tile%20Layer/WMTS%20Tile%20Layer.html
+[Tile Layer using X, Y, and Z source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Tile%20Layers/Tile%20Layer%20using%20X,%20Y%20and%20Z/Tile%20Layer%20using%20X,%20Y%20and%20Z.html
+
 [OpenSeaMap project]: https://openseamap.org/index.php
-[WMS Tile Layer]: https://samples.azuremaps.com/tile-layers/wms-tile-layer
 [U.S. Geological Survey (USGS)]: https://mrdata.usgs.gov/
-[WMTS Tile Layer]: https://samples.azuremaps.com/tile-layers/wmts-tile-layer
-[U.S. Geological Survey (USGS) National Map]:https://viewer.nationalmap.gov/services
-[Tile Layer Options]: https://samples.azuremaps.com/tile-layers/tile-layer-options
+[U.S. Geological Survey (USGS) National Map]:https://viewer.nationalmap.gov/services

articles/azure-maps/map-create.md

@@ -16,7 +16,7 @@ This article shows you ways to create a map and animate a map.
 
 To load a map, create a new instance of the [Map class](/javascript/api/azure-maps-control/atlas.map). When initializing the map, pass a DIV element ID to render the map and pass a set of options to use when loading the map. If default authentication information isn't specified on the `atlas` namespace, this information needs to be specified in the map options when loading the map. The map loads several resources asynchronously for performance. As such, after creating the map instance, attach a `ready` or `load` event to the map and then add any additional code that interacts with the map to the event handler. The `ready` event fires as soon as the map has enough resources loaded to be interacted with programmatically. The `load` event fires after the initial map view has finished loading completely.
 
-You can also load multiple maps on the same page, for sample code that demonstrates loading multiple maps on the same page, see [Multiple Maps] in the [Azure Maps Samples].
+You can also load multiple maps on the same page, for sample code that demonstrates loading multiple maps on the same page, see [Multiple Maps] in the [Azure Maps Samples]. For the source code for this sample, see [Multiple Maps source code].
 
 :::image type="content" source="./media/map-create/multiple-maps.png"alt-text="A screenshot that shows the snap grid on map.":::
 
@@ -283,5 +283,6 @@ See code examples to add functionality to your app:
 > [!div class="nextstepaction"]
 > [Code samples](/samples/browse/?products=azure-maps)
 
-[Multiple Maps]: https://samples.azuremaps.com/map/multiple-maps
 [Azure Maps Samples]: https://samples.azuremaps.com
+[Multiple Maps]: https://samples.azuremaps.com/map/multiple-maps
+[Multiple Maps source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Multiple%20Maps/Multiple%20Maps.html

articles/azure-maps/map-events.md

@@ -14,7 +14,7 @@ This article shows you how to use [map events class](/javascript/api/azure-maps-
 
 ## Interact with the map
 
-The [Map Events] sample highlights the name of the events that are firing as you interact with the map.
+The [Map Events] sample highlights the name of the events that are firing as you interact with the map. For the source code for this sample, see [Map Events source code].
 
 :::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.":::
 
@@ -25,7 +25,7 @@ The [Map Events] sample highlights the name of the events that are firing as you
 
 ## Interact with map layers
 
-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.
+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. For the source code for this sample, see [Layer Events source code].
 
 :::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.":::
 
@@ -36,7 +36,7 @@ The [Layer Events] sample highlights the name of the events that are firing as y
 
 ## Interact with 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.
+The [HTML marker layer events] sample highlights the name of the events that are firing as you interact with the HTML marker layer. For the source code for this sample, see [HTML marker layer Events source code].
 
 :::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.":::
 
@@ -119,3 +119,7 @@ See the following articles for full code examples:
 [Map Events]: https://samples.azuremaps.com/map/map-events
 [Layer Events]: https://samples.azuremaps.com/symbol-layer/symbol-layer-events
 [HTML marker layer events]: https://samples.azuremaps.com/html-markers/html-marker-layer-events
+
+[Map Events source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Map/Map%20Events/Map%20Events.html
+[Layer Events source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Symbol%20layer%20events/Symbol%20layer%20events.html
+[HTML marker layer events source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/HTML%20Markers/HTML%20marker%20layer%20events/HTML%20marker%20layer%20events.html

articles/azure-maps/map-extruded-polygon.md

@@ -112,7 +112,7 @@ function InitMap()
 
 A choropleth map can be rendered using the polygon extrusion layer. Set the `height` and `fillColor` properties of the extrusion layer to the measurement of the statistical variable in the `Polygon` and `MultiPolygon` feature geometries.
 
-The [Create a Choropleth Map] sample shows an extruded choropleth map of the United States based on the measurement of the population density by state.
+The [Create a Choropleth Map] sample shows an extruded choropleth map of the United States based on the measurement of the population density by state. For the source code for this sample, see [Create a Choropleth Map source code].
 
 :::image type="content" source="./media/map-extruded-polygon/choropleth-map.png"alt-text="A screenshot of a map showing a choropleth map rendered using the polygon extrusion layer.":::
 
@@ -193,7 +193,7 @@ function InitMap()
 
 ## Customize a polygon extrusion layer
 
-The Polygon Extrusion layer has several styling options. The [Polygon Extrusion Layer Options] sample is a tool to try them out.
+The Polygon Extrusion layer has several styling options. The [Polygon Extrusion Layer Options] sample is a tool to try them out. For the source code for this sample, see [Polygon Extrusion Layer Options source code].
 
 :::image type="content" source="./media/map-extruded-polygon/polygon-extrusion-layer-options.png"alt-text="A screenshot of the Azure Maps code sample that shows how the different options of the polygon extrusion layer affect rendering.":::
 <!------------------------------------------------------------
@@ -217,3 +217,6 @@ Additional resources:
 
 [Create a Choropleth Map]: https://samples.azuremaps.com/?sample=create-a-choropleth-map
 [Polygon Extrusion Layer Options]: https://samples.azuremaps.com/?sample=polygon-extrusion-layer-options
+
+[Create a Choropleth Map source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Demos/Create%20a%20Choropleth%20Map/Create%20a%20Choropleth%20Map.html
+[Polygon Extrusion Layer Options source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Polygons/Polygon%20Extrusion%20Layer%20Options/Polygon%20Extrusion%20Layer%20Options.html