Merge pull request #111361 from stevemunk/Sample-Code-Links-11-15

Added links to sample code for Azure Maps Samples (11-16)

Author: Court72

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

@@ -48,7 +48,7 @@ map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
 }), 'labels');
 ```
 
-The [Simple Heat Map Layer] sample demonstrates how to create a simple heat map from a data set of point features.
+The [Simple Heat Map Layer] sample demonstrates how to create a simple heat map from a data set of point features. For the source code for this sample, see [Simple Heat Map Layer source code].
 
 :::image type="content" source="./media/map-add-heat-map-layer/add-a-heat-map-layer.png" alt-text="Screenshot showing a map displaying a heat map.":::
 
@@ -79,7 +79,7 @@ The previous example customized the heat map by setting the radius and opacity o
   However, if you use an expression, the weight of each data point can be based on the properties of each data point. For example, suppose each data point represents an earthquake. The magnitude value has been an important metric for each earthquake data point. Earthquakes happen all the time, but most have a low magnitude, and aren't noticed. Use the magnitude value in an expression to assign the weight to each data point. By using the magnitude value to assign the weight, you get a better representation of the significance of earthquakes within the heat map.
 - `source` and `source-layer`: Enable you to update the data source.
 
-The [Heat Map Layer Options] sample shows how the different options of the heat map layer that affects rendering.
+The [Heat Map Layer Options] sample shows how the different options of the heat map layer that affects rendering. For the source code for this sample, see [Heat Map Layer Options source code].
 
 :::image type="content" source="./media/map-add-heat-map-layer/heat-map-layer-options.png" alt-text="Screenshot showing a map displaying a heat map, and a panel with editable settings that show how the different options of the heat map layer affect rendering.":::
 
@@ -96,7 +96,7 @@ Use a `zoom` expression to scale the radius for each zoom level, such that each
 
 Scaling the radius so that it doubles with each zoom level creates a heat map that looks consistent on all zoom levels. To apply this scaling, use `zoom` with a base 2 `exponential interpolation` expression, with the pixel radius set for the minimum zoom level and a scaled radius for the maximum zoom level calculated as `2 * Math.pow(2, minZoom - maxZoom)` as shown in the following sample. Zoom the map to see how the heat map scales with the zoom level.
 
-The [Consistent zoomable Heat Map] sample shows how to create a heat map where the radius of each data point covers the same physical area on the ground, creating a more consistent user experience when zooming the map. The heat map in this sample scales consistently between zoom levels 10 and 22. Each zoom level of the map has twice as many pixels vertically and horizontally as the previous zoom level. Doubling the radius with each zoom level creates a heat map that looks consistent across all zoom levels.
+The [Consistent zoomable Heat Map] sample shows how to create a heat map where the radius of each data point covers the same physical area on the ground, creating a more consistent user experience when zooming the map. The heat map in this sample scales consistently between zoom levels 10 and 22. Each zoom level of the map has twice as many pixels vertically and horizontally as the previous zoom level. Doubling the radius with each zoom level creates a heat map that looks consistent across all zoom levels. For the source code for this sample, see [Consistent zoomable Heat Map source code].
 
 :::image type="content" source="./media/map-add-heat-map-layer/consistent-zoomable-heat-map.png" alt-text="Screenshot showing a map displaying a heat map that uses a zoom expression that scales the radius for each zoom level.":::
 
@@ -151,3 +151,7 @@ For more code examples to add to your maps, see the following articles:
 [Simple Heat Map Layer]: https://samples.azuremaps.com/heat-map-layer/simple-heat-map-layer
 [Heat Map Layer Options]: https://samples.azuremaps.com/heat-map-layer/heat-map-layer-options
 [Consistent zoomable Heat Map]: https://samples.azuremaps.com/heat-map-layer/consistent-zoomable-heat-map
+
+[Simple Heat Map Layer source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Heat%20Map%20Layer/Simple%20Heat%20Map%20Layer/Simple%20Heat%20Map%20Layer.html
+[Heat Map Layer Options source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Heat%20Map%20Layer/Heat%20Map%20Layer%20Options/Heat%20Map%20Layer%20Options.html
+[Consistent zoomable Heat Map source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Heat%20Map%20Layer/Consistent%20zoomable%20Heat%20Map/Consistent%20zoomable%20Heat%20Map.html

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

@@ -45,7 +45,7 @@ map.layers.add(new atlas.layer.ImageLayer({
 }));
 ```
 
-For a fully functional sample that shows how to overlay an image of a map of Newark New Jersey from 1922 as an Image layer, see [Simple Image Layer] in the [Azure Maps Samples].
+For a fully functional sample that shows how to overlay an image of a map of Newark New Jersey from 1922 as an Image layer, see [Simple Image Layer] in the [Azure Maps Samples]. For the source code for this sample, see [Simple Image Layer source code].
 
 :::image type="content" source="./media/map-add-image-layer/simple-image-layer.png" alt-text="A screenshot showing a map with an image of a map of Newark New Jersey from 1922 as an Image layer.":::
 
@@ -60,7 +60,7 @@ This sample demonstrates how to add KML ground overlay information as an image l
 
 The code uses the static `getCoordinatesFromEdges` function from the [ImageLayer](/javascript/api/azure-maps-control/atlas.layer.imagelayer) class. It calculates the four corners of the image using the north, south, east, west, and rotation information of the KML ground overlay.
 
-For a fully functional sample that shows how to use a KML Ground Overlay as Image Layer, see [KML Ground Overlay as Image Layer] in the [Azure Maps Samples].
+For a fully functional sample that shows how to use a KML Ground Overlay as Image Layer, see [KML Ground Overlay as Image Layer] in the [Azure Maps Samples]. For the source code for this sample, see [KML Ground Overlay as Image Layer source code].
 
 :::image type="content" source="./media/map-add-image-layer/kml-ground-overlay-as-image-layer.png" alt-text="A screenshot showing a map with a KML Ground Overlay appearing as Image Layer.":::
 
@@ -74,7 +74,7 @@ For a fully functional sample that shows how to use a KML Ground Overlay as Imag
 
 ## Customize an image layer
 
-The image layer has many styling options. For a fully functional sample that shows how the different options of the image layer affect rendering, see [Image Layer Options] in the [Azure Maps Samples].
+The image layer has many styling options. For a fully functional sample that shows how the different options of the image layer affect rendering, see [Image Layer Options] in the [Azure Maps Samples]. For the source code for this sample, see [Image Layer Options source code].
 
 :::image type="content" source="./media/map-add-image-layer/image-layer-options.png" alt-text="A screenshot showing a map with a panel that has the different options of the image layer that affect rendering. In this sample, you can change styling options and see the effect it has on the map.":::
 
@@ -102,3 +102,7 @@ See the following articles for more code samples to add to your maps:
 [Azure Maps Samples]: https://samples.azuremaps.com
 [KML Ground Overlay as Image Layer]: https://samples.azuremaps.com/image-layer/kml-ground-overlay-as-image-layer
 [Image Layer Options]: https://samples.azuremaps.com/image-layer/image-layer-options
+
+[Simple Image Layer source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Image%20Layer/Simple%20Image%20Layer/Simple%20Image%20Layer.html
+[KML Ground Overlay as Image Layer source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Image%20Layer/KML%20Ground%20Overlay%20as%20Image%20Layer/KML%20Ground%20Overlay%20as%20Image%20Layer.html
+[Image Layer Options source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Image%20Layer/Image%20Layer%20Options/Image%20Layer%20Options.html

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

@@ -141,7 +141,7 @@ This code will create a map that appears as follows:
 
 You may apply a single stroke color to a line. You can also fill a line with a gradient of colors to show transition from one line segment to the next line segment. For example, line gradients can be used to represent changes over time and distance, or different temperatures across a connected line of objects. In order to apply this feature to a line, the data source must have the `lineMetrics` option set to `true`, and then a color gradient expression can be passed to the `strokeColor` option of the line. The stroke gradient expression has to reference the `['line-progress']` data expression that exposes the calculated line metrics to the expression.
 
-For a fully functional sample that shows how to apply a stroke gradient to a line on the map, see [Line with Stroke Gradient] in the [Azure Maps Samples].
+For a fully functional sample that shows how to apply a stroke gradient to a line on the map, see [Line with Stroke Gradient] in the [Azure Maps Samples]. For the source code for this sample, see [Line with Stroke Gradient source code].
 
 :::image type="content" source="./media/map-add-line-layer/line-with-stroke-gradient.png"alt-text="A screenshot showing a line with a stroke gradient on the map.":::
 
@@ -154,7 +154,7 @@ For a fully functional sample that shows how to apply a stroke gradient to a lin
 
 ## Customize a line layer
 
-The Line layer has several styling options. For a fully functional sample that interactively demonstrates the line options, see [Line Layer Options] in the [Azure Maps Samples].
+The Line layer has several styling options. For a fully functional sample that interactively demonstrates the line options, see [Line Layer Options] in the [Azure Maps Samples]. For the source code for this sample, see [Line Layer Options source code].
 
 :::image type="content" source="./media/map-add-line-layer/line-layer-options.png"alt-text="A screenshot showing the Line Layer Options sample that shows how the different options of the line layer affect rendering.":::
 
@@ -193,3 +193,6 @@ See the following articles for more code samples to add to your maps:
 [Line with Stroke Gradient]: https://samples.azuremaps.com/line-layer/line-with-stroke-gradient
 [Azure Maps Samples]: https://samples.azuremaps.com
 [Line Layer Options]: https://samples.azuremaps.com/line-layer/line-layer-options
+
+[Line with Stroke Gradient source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Line%20Layer/Line%20with%20Stroke%20Gradient/Line%20with%20Stroke%20Gradient.html
+[Line Layer Options source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Line%20Layer/Line%20Layer%20Options/Line%20Layer%20Options.html

articles/azure-maps/map-add-pin.md

@@ -10,7 +10,7 @@ ms.service: azure-maps
 
 # Add a symbol layer to a map
 
-Connect a symbol to a data source, and use it to render an icon or a text at a given point. 
+Connect a symbol to a data source, and use it to render an icon or a text at a given point.
 
 Symbol layers are rendered using WebGL. Use a symbol layer to render large collections of points on the map. Compared to HTML marker, the symbol layer renders a large number of point data on the map, with better performance. However, the symbol layer doesn't support traditional CSS and HTML elements for styling.  
 
@@ -170,7 +170,7 @@ function InitMap()
 
 ## Customize a symbol layer
 
-The symbol layer has many styling options available. The [Symbol Layer Options] sample shows how the different options of the symbol layer that affects rendering.
+The symbol layer has many styling options available. The [Symbol Layer Options] sample shows how the different options of the symbol layer that affects rendering. For the source code for this sample, see [Symbol Layer Options source code].
 
 :::image type="content" source="./media/map-add-pin/symbol-layer-options.png" alt-text="A screenshot of map with a panel on the left side of the map with the various symbol options that can be interactively set.":::
 
@@ -225,3 +225,4 @@ See the following articles for more code samples to add to your maps:
 > [Add HTML Makers](map-add-bubble-layer.md)
 
 [Symbol Layer Options]: https://samples.azuremaps.com/?search=symbol%20layer&sample=symbol-layer-options
+[Symbol Layer Options source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol%20Layer/Symbol%20Layer%20Options/Symbol%20Layer%20Options.html

articles/azure-maps/map-add-popup.md

@@ -72,7 +72,7 @@ map.events.add('mouseleave', symbolLayer, function (){
 
 There are cases in which the best approach is to create one popup and reuse it. For example, you may have a large number of points and want to show only one popup at a time. By reusing the popup, the number of DOM elements created by the application is greatly reduced, which can provide better performance. The following sample creates 3-point features. If you click on any of them, a popup will be displayed with the content for that point feature.
 
-For a fully functional sample that shows how to create one popup and reuse it rather than creating a popup for each point feature, see [Reusing Popup with Multiple Pins] in the [Azure Maps Samples].
+For a fully functional sample that shows how to create one popup and reuse it rather than creating a popup for each point feature, see [Reusing Popup with Multiple Pins] in the [Azure Maps Samples]. For the source code for this sample, see [Reusing Popup with Multiple Pins source code].
 
 :::image type="content" source="./media/map-add-popup/reusing-popup-with-multiple-pins.png"alt-text="A screenshot of map with three blue pins.":::
 
@@ -85,7 +85,7 @@ For a fully functional sample that shows how to create one popup and reuse it ra
 
 By default, the popup has a white background, a pointer arrow on the bottom, and a close button in the top-right corner. The following sample changes the background color to black using the `fillColor` option of the popup. The close button is removed by setting the `CloseButton` option to false. The HTML content of the popup uses padded of 10 pixels from the edges of the popup. The text is made white, so it shows up nicely on the black background.  
 
-For a fully functional sample that shows how to customize the look of a popup, see [Customize a popup] in the [Azure Maps Samples].
+For a fully functional sample that shows how to customize the look of a popup, see [Customize a popup] in the [Azure Maps Samples]. For the source code for this sample, see [Customize a popup source code].
 
 :::image type="content" source="./media/map-add-popup/customize-popup.png"alt-text="A screenshot of map with a custom popup in the center of the map with the caption 'hello world'.":::
 
@@ -418,7 +418,7 @@ function InitMap()
 
 Similar to reusing popup, you can reuse popup templates. This approach is useful when you only want to show one popup template at a time, for multiple points. By reusing the popup template, the number of DOM elements created by the application is reduced, which then improves your application performance. The following sample uses the same popup template for three points. If you click on any of them, a popup will be displayed with the content for that point feature.
 
-For a fully functional sample that shows hot to reuse a single popup template with multiple features that share a common set of property fields, see [Reuse a popup template] in the [Azure Maps Samples].
+For a fully functional sample that shows hot to reuse a single popup template with multiple features that share a common set of property fields, see [Reuse a popup template] in the [Azure Maps Samples]. For the source code for this sample, see [Reuse a popup template source code].
 
 :::image type="content" source="./media/map-add-popup/reuse-popup-template.png"alt-text="A screenshot of a map showing Seattle with three blue pins to demonstrating how to reuse popup templates.":::
 
@@ -431,7 +431,7 @@ For a fully functional sample that shows hot to reuse a single popup template wi
 
 Popups can be opened, closed, and dragged. The popup class provides events to help developers react to these events. The following sample highlights which events fire when the user opens, closes, or drags the popup.
 
-For a fully functional sample that shows how to add events to popups, see [Popup events] in the [Azure Maps Samples].
+For a fully functional sample that shows how to add events to popups, see [Popup events] in the [Azure Maps Samples]. For the source code for this sample, see [Popup events source code].
 
 :::image type="content" source="./media/map-add-popup/popup-events.png"alt-text="A screenshot of a map of the world with a popup in the center and a list of events in the upper left that are highlighted when the user opens, closes, or drags the popup.":::
 
@@ -474,3 +474,8 @@ See the following great articles for full code samples:
 [Customize a popup]: https://samples.azuremaps.com/popups/customize-a-popup
 [Reuse a popup template]: https://samples.azuremaps.com/popups/reuse-a-popup-template
 [Popup events]: https://samples.azuremaps.com/popups/popup-events
+
+[Reusing Popup with Multiple Pins source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Reusing%20Popup%20with%20Multiple%20Pins/Reusing%20Popup%20with%20Multiple%20Pins.html
+[Customize a popup source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Customize%20a%20popup/Customize%20a%20popup.html
+[Reuse a popup template source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Reuse%20a%20popup%20template/Reuse%20a%20popup%20template.html
+[Popup events source code]: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Popups/Popup%20events/Popup%20events.html