AnsweredAssumed Answered

CSVLayer event onclick

Question asked by ejh001 on Feb 19, 2016
Latest reply on Feb 23, 2016 by kenbuja

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=""></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 = "";
  kml = new KMLLayer(kmlUrl);

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

  proxyUrl : "/proxy/proxy.php",
  urlPrefix : ""

   var template = new InfoTemplate("${name}", "<iframe src=${fcstlink} class="fcst"></iframe>");

   var csvUrl = "";
  csv = new CSVLayer(csvUrl, {
  copyright : "",
  infoTemplate : template
   var logo = new PictureMarkerSymbol("", 20, 20);
   var renderer = new SimpleRenderer(logo);
  csv.attr('sites', 'sites');

  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.centerAt([-83.71, 36.05]);

   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));