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="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>

Outcomes