As shown in the figure, check the relevant options to display these two small pictures on the map, and click on them to show a detailed map.

What to do?

First of all, these two small pictures are not part of the map, nor are they requested from the map server. They are drawn by the client itself, so they are located in Feature Layer.

Secondly, the two pictures are different, they are in different Feature Layers. That is to say, a layer can only display one icon.

How to write the specific code?

Figure 1
The code structure of Figure 1 is very simple. If the option "Capture Photos" is clicked, check whether the corresponding Feature Layer has been generated or not.

How to create it?
First, there are many options and fields in FleatureLayer, which need to be defined first. Because the Feature Layer is generated in client-side rendering. Many of the feature Layers we usually use are provided by map services, but map services also provide definitions and data, not as slice layers and dynamic layers, to the client is the picture.

Next is binding events. For example, the subsequent processing of successful layer addition. My idea is that the style of the icon (that is, the two small pictures) is not pre-set, but dynamically generated based on the data obtained in the background. Therefore, the layer can be created and added, and after successful addition, the data can be requested from the background and the icon can be drawn.

Up the code. This is the front-end code:

//Collect photos
(function (map, iconUrlHead, requestUrl) {
    var fls = [];
    $("#chePhoto").click(function () {
        var bv = document.getElementById("chePhoto").checked;

        if (bv == true && fls.length == 0) {
            /* Dynamic Constructive Element Layer (Definition Part)begin */
            var featureCollection = {
                "layerDefinition": null,
                "featureSet": {
                    "features": [],
                    "geometryType": "esriGeometryPoint"
                }
            };
            featureCollection.layerDefinition = {
                "geometryType": "esriGeometryPoint",
                "objectIdField": "ObjectID",
                "drawingInfo": {
                    "renderer": {
                        "type": "simple",
                        "symbol": {
                            "type": "esriPMS",
                            "url": null,
                            "contentType": "image/png",
                            "width": 52.5,//Point, here 1P = 0.75 * 1PX. Argis icons are drawn not by pixels, but by points.
                            "height": 37.5
                        }
                    }
                },
                "fields": [{
                    "name": "ObjectID",
                    "alias": "ObjectID",
                    "type": "esriFieldTypeOID"
                }, {
                    "name": "description",
                    "alias": "Description",
                    "type": "esriFieldTypeString"
                }, {
                    "name": "title",
                    "alias": "Title",
                    "type": "esriFieldTypeString"
                }]
            };
            /* Dynamic Constructive Element Layer (Definition Part) */

            //Popup
            var popupTemplate = new PopupTemplate({
                title: "{title}",
                description: "{description}"
            });

            function getFL(typeId) {
                var iconUrl = iconUrlHead + "map_icon" + typeId + ".png";//Construct icons based on parameters
                featureCollection.layerDefinition.drawingInfo.renderer.symbol.url = iconUrl;
                //Create Feature Layer
                var featureLayer = new FeatureLayer(featureCollection, {
                    id: "photolayer" + typeId,
                    infoTemplate: popupTemplate,
                    visible: false
                });
                featureLayer.on("click", function (evt) {
                    map.infoWindow.setFeatures([evt.graphic]);
                    map.infoWindow.resize(400, 300);
                });
                return featureLayer;
            }
            fls.push(getFL("01"));//Create a layer with id=photolayer01
            fls.push(getFL("02"));//Create a layer with id=photolayer02

            //Binding Layer Added Success Event
            map.on("layers-add-result", function (results) {
                function requestSucceeded(response, io) {//Successful acquisition of background data. The acquisition process is asynchronous, as follows: request Handle. then (request Succeeded, request Failed);
                    var features = {};
                    array.forEach(response.items, function (item) {
                        var attr = {};
                        attr["description"] = item.description;
                        attr["title"] = item.title ? item.title : "Collect photos";
                        var geometry = new Point(item);//new Point(json);json object content is customized, but it must have coordinate values, either x, y or longitude, latitude.
                        var graphic = new Graphic(geometry);
                        graphic.setAttributes(attr);
                        if (typeof features[item.type] == 'undefined') features[item.type] = [];
                        features[item.type].push(graphic);
                    });

                    results.layers.forEach(function (resultitem) {
                        var id = resultitem.layer.id.substring("photolayer".length);//Layer id=photolayer***
                        resultitem.layer.applyEdits(features[id], null, null);
                    });
                }
                function requestFailed(error) {
                }

                var requestHandle = esriRequest({
                    url: requestUrl,
                    callbackParamName: "jsoncallback"
                });
                //Requesting data from the background (not the map service) is an asynchronous process
                requestHandle.then(requestSucceeded, requestFailed);
            });

            map.addLayers(fls);
        }

        fls.forEach(function (fl) {
            fl.setVisibility(bv);
        });
    });
})(map,
    "@Url.StaticFile("~/Content/images/map/")",
    "@Url.StaticFile("~/Map/Home/GetPhotos")");

featureCollection.layerDefinition.drawingInfo.renderer.symbol.url = icon address;
featureCollection.layerDefinition is a layer definition. Layer definitions can be used in the constructor of Feature Layer, or as in the above sentence, the layer is generated and then modified.

Background code:

        public ContentResult GetPhotos()
        {
            return new ContentResult
            {
                ContentEncoding = Encoding.GetEncoding("utf-8"),
                ContentType = "text/plain;charset=UTF-8",
                //An item represents an icon; icon data is customized but must have coordinate values, either x, y or longitude or latitude.
                Content = $@"{{
""title"": ""Recent photographs"",
""items"": [
    {{
        ""title"": ""Island I"",
        ""description"": ""<p><img src=\""{System.Web.HttpContext.Current.Request.ApplicationPath.Replace("/",@"\/")}\/Content\/Images\/Map\/hd1.jpg\"" alt=\""Island 2\"" \/><\/p>"",
        ""latitude"" : ""28.163280"",
        ""longitude"" : ""121.598709"",
        ""type"":""01""
    }},
    {{
        ""title"": ""Island II"",
        ""description"": ""<p><img src=\""{System.Web.HttpContext.Current.Request.ApplicationPath.Replace("/", @"\/")}\/Content\/Images\/Map\/hd1.jpg\"" alt=\""Island 2\"" \/><\/p>"",
        ""latitude"" : ""29.163280"",
        ""longitude"" : ""121.598709"",
        ""type"":""01""
    }},
    {{
        ""title"": ""Coral reef"",
        ""description"": ""<p><img src=\""{System.Web.HttpContext.Current.Request.ApplicationPath.Replace("/", @"\/")}\/Content\/Images\/Map\/hd2.jpg\"" alt=\""Island 2\"" \/><\/p>"",
        ""latitude"" : ""29.609811"",
        ""longitude"" : ""122.341567"",
        ""type"":""02""
    }}]
}}"
            };
        }