AzureMapsCodeSamples/Symbol Layer/All built-in icon templates as symbols.html

﻿<!DOCTYPE html>
<html>
<head>
    <title>All built-in icon templates as symbols - Azure Maps Web SDK Samples</title>

    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="This sample shows all the built-in icon templates rendered on a symbol layer." />
    <meta name="keywords" content="map, gis, API, SDK, image template, icon templates" />
    <meta name="author" content="Microsoft Azure Maps" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>

    <script type='text/javascript'>
        var map;

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                zoom: 4,
                center: [20, -10],
                style: 'blank',
                view: 'Auto',
				
				//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {

                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Get all icon templates available in the map control. 
                var keys = atlas.getAllImageTemplateNames();

                //Create a grid of the HTML markers, each using a different icon template.
                var cols = 6;
                var rows = Math.ceil(keys.length / cols);

                for (var row = 0; row < rows; row++) {
                    for (var col = 0; col < cols; col++) {
                        var idx = cols * row + col;
                        if (idx < keys.length) {
                            createIcon(keys[idx], row, col);
                        }
                    }
                }

                //Create a symbol layer and render each icon template as a symbol and it's id below it.
                map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
                    iconOptions: {
                        image: ['get', 'iconId'],
                        allowOverlap: true,
                        ignorePlacement: true
                    },
                    textOptions: {
                        textField: ['get', 'iconId'],
                        offset: [0, 1.2],
                        allowOverlap: true,
                        ignorePlacement: true
                    }
                }));
            });
        }

        function createIcon(id, row, col) {
            map.imageSprite.createFromTemplate(id, id, 'teal', '#fff', 1).then(function () {
                datasource.add(new atlas.data.Feature(new atlas.data.Point([8 * col, -3.5 * row]), {
                    iconId: id
                }));
            });
        }
    </script>
</head>
<body onload="GetMap()">
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;background-color:gray"></div>

    <fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
        <legend>All built-in icon templates as symbols</legend>
        This sample shows all the built-in icon templates rendered on a symbol layer.
    </fieldset>
</body>
</html>