Interaction of CSVLayer and KMLLayer

EricHolweg — Sat, 11 Dec 2021 23:53:48 GMT

I have a map where I have a KMLLayer that defines a geographic boundary and a CSVLayer that defines points within that boundary. I do not want any infoWindow information popping up for the KMLLayer and want to take some actions on the click event on the CSVLayer.

In building this page, I have found that I can no longer apply a click event to the CSVLayer once I have added the KMLLayer to the map.

Seems like it would not be too difficult... but I have played with multiple instances of this and keep coming back to the same place.

Any help appreciated.

var map, kml, csv;
            require(["esri/map", "esri/layers/KMLLayer", "esri/layers/CSVLayer", "esri/renderers/SimpleRenderer", "esri/InfoTemplate", "esri/urlUtils", "esri/symbols/PictureMarkerSymbol", "esri/geometry/Point", "esri/SpatialReference", "esri/geometry/webMercatorUtils", "esri/geometry/screenUtils", "esri/geometry/ScreenPoint", "dojo/dom", "dojo/_base/array", "dojo/domReady!"], function(Map, KMLLayer, CSVLayer, SimpleRenderer, InfoTemplate, urlUtils, PictureMarkerSymbol, Point, SpatialReference, webMercatorUtils, screenUtils, ScreenPoint, dom, array) {
                map = new Map("map", {
                    basemap : "hybrid",
                    center : [-83.71, 36.05],
                    zoom : 8
                });

                map.on("load", function() {
                    map.infoWindow.set('anchor', 'bottom-right');
                    map.infoWindow.resize(625, 425);
                });
                map.infoWindow.on("hide", centerMap);

                urlUtils.addProxyRule({
                    proxyUrl : "/proxy/proxy.php",
                    urlPrefix : "www.srh.noaa.gov"
                });

                var template = new InfoTemplate("${name}", "<iframe src=${fcstlink} class="fcst"></iframe>");
                var csvUrl = "http://www.srh.noaa.gov/images/rtimages/mrx/js_local/riverpoints.csv";
                csv = new CSVLayer(csvUrl, {
                    copyright : "weather.gov",
                    infoTemplate : template
                });
                var logo = new PictureMarkerSymbol("http://www.srh.noaa.gov/images/mrx/surf.png", 20, 20);
                var renderer = new SimpleRenderer(logo);
                csv.setRenderer(renderer);
                map.addLayer(csv);
                csv.on("click", mapFcstAction);

                var kmlUrl = "http://www.srh.noaa.gov/images/rtimages/mrx/kml/RiversLakes.kml";
                kml = new KMLLayer(kmlUrl);
                map.addLayer(kml);

                kml.on('load', function(lyr) {
                    var layers = lyr.layer.getLayers();
                    array.forEach(layers, function(l) {
                        l.setInfoTemplate(null);
                    });
                });

                function centerMap() {
                    alert("CENTER");
                    map.graphics.clear();
                    map.centerAt([-83.71, 36.05]);
                }

                function mapFcstAction(evt) {
                    alert("FCST");
                    map.infoWindow.show(evt.screenPoint);
                    var screenX = evt.screenPoint.x;
                    var screenY = evt.screenPoint.y;
                    var newScreenX = screenX + 225;
                    var newScreenY = screenY + 250;
                    var newScreenCenter = screenUtils.toMapPoint(map.extent, 800, 550, new ScreenPoint(newScreenX, newScreenY));
                    map.centerAt(newScreenCenter);
                }
            });

topic Interaction of CSVLayer and KMLLayer in ArcGIS JavaScript Maps SDK Questions

Interaction of CSVLayer and KMLLayer