ESRI Javascript CSVLayer onClick Event

Question

I have a CSVLayer that I loaded into a web application.

The data that I want to display within the infowindow of that CSVLayer is too large to display nicely in the existing map window.

Therefore when I click on a point within that CSVLayer, I need to execute some code that re-centers the map such that the entire infowindow is displayed within the map.

The problem that I have is that I cannot figure out how to create a click event on just the CSVlayer.

Currently I have a click event triggered on the map as a whole.. which does the recentering for me, but this proved problematic if I end up clicking on any other part of the map. In those cases, there is no infowindow to open and the map will still be forced to re-center.

Below is my code for this application.

        <script src="http://js.arcgis.com/3.15/"></script>
    <script>
        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.on("mouse-move", showCoordinates);
                map.on("mouse-drag", showCoordinates);
            });

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

            dojo.connect(kml, 'onLoad', function(lyr) {
                var layers = lyr.getLayers();
                dojo.forEach(layers, function(lyr) {
                    lyr.setInfoTemplate(null);
                });
            });


            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);
            csv.attr('sites', 'sites');
            map.addLayer(csv);

            dojo.connect(map.infoWindow, "onHide", centerMap);
            map.on("click", mapClickAction);

            function showCoordinates(evt) {
                var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
                var sp = screenUtils.toScreenGeometry(map.extent, 800, 550, evt.mapPoint);
                dom.byId("info").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3) + "<br>" + sp.x + "  " + sp.y;
            }

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

            function mapClickAction(evt) {
                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);
            }
        });

    </script>

Answer 1

You should use the CSVLayer's click event instead of the map's click event to reposition the map.

csv.on("click", mapClickAction);