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}" , " " ); 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 ) + " " + 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 >

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

CSVLayer event onclick

EricHolweg

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.

<SPAN class="pun"><</SPAN><SPAN class="pln">script src</SPAN><SPAN class="pun">=</SPAN><SPAN class="str"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fjs.arcgis.com%2F3.15%2F" target="_blank">http://js.arcgis.com/3.15/</A><SPAN>"</SPAN></SPAN><SPAN class="pun">></</SPAN><SPAN class="pln">script</SPAN><SPAN class="pun">></SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="pun"><</SPAN><SPAN class="pln">script</SPAN><SPAN class="pun">></SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> map</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> kml</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> csv</SPAN><SPAN class="pun">;</SPAN><SPAN class="pln">
&nbsp; require</SPAN><SPAN class="pun">([</SPAN><SPAN class="str">"esri/map"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"esri/layers/KMLLayer"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"esri/layers/CSVLayer"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"esri/renderers/SimpleRenderer"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"esri/InfoTemplate"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"esri/urlUtils"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"esri/symbols/PictureMarkerSymbol"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"esri/geometry/Point"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"esri/SpatialReference"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"esri/geometry/webMercatorUtils"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"esri/geometry/screenUtils"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"esri/geometry/ScreenPoint"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"dojo/dom"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"dojo/_base/array"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"dojo/domReady!"</SPAN><SPAN class="pun">],</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">function</SPAN><SPAN class="pun">(</SPAN><SPAN class="typ">Map</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="typ">KMLLayer</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="typ">CSVLayer</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="typ">SimpleRenderer</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="typ">InfoTemplate</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> urlUtils</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="typ">PictureMarkerSymbol</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="typ">Point</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="typ">SpatialReference</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> webMercatorUtils</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> screenUtils</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="typ">ScreenPoint</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> dom</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> array</SPAN><SPAN class="pun">)</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">{</SPAN><SPAN class="pln">
&nbsp; map </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> </SPAN><SPAN class="typ">Map</SPAN><SPAN class="pun">(</SPAN><SPAN class="str">"map"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">{</SPAN><SPAN class="pln">
&nbsp; basemap </SPAN><SPAN class="pun">:</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"hybrid"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln">
&nbsp; center </SPAN><SPAN class="pun">:</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">[-</SPAN><SPAN class="lit">83.71</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">36.05</SPAN><SPAN class="pun">],</SPAN><SPAN class="pln">
&nbsp; zoom </SPAN><SPAN class="pun">:</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">8</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="pun">});</SPAN><SPAN class="pln">

&nbsp; map</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">on</SPAN><SPAN class="pun">(</SPAN><SPAN class="str">"load"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">function</SPAN><SPAN class="pun">()</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">{</SPAN><SPAN class="pln">
&nbsp; map</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">infoWindow</SPAN><SPAN class="pun">.</SPAN><SPAN class="kwd">set</SPAN><SPAN class="pun">(</SPAN><SPAN class="str">'anchor'</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">'bottom-right'</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">
&nbsp; map</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">infoWindow</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">resize</SPAN><SPAN class="pun">(</SPAN><SPAN class="lit">625</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">425</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">
&nbsp; map</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">on</SPAN><SPAN class="pun">(</SPAN><SPAN class="str">"mouse-move"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> showCoordinates</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">
&nbsp; map</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">on</SPAN><SPAN class="pun">(</SPAN><SPAN class="str">"mouse-drag"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> showCoordinates</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="pun">});</SPAN><SPAN class="pln">

&nbsp;&nbsp; </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> kmlUrl </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> </SPAN><SPAN class="str"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwww.srh.noaa.gov%2Fimages%2Frtimages%2Fmrx%2Fkml%2FRiversLakes.kml" target="_blank">http://www.srh.noaa.gov/images/rtimages/mrx/kml/RiversLakes.kml</A><SPAN>"</SPAN></SPAN><SPAN class="pun">;</SPAN><SPAN class="pln">
&nbsp; kml </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> </SPAN><SPAN class="typ">KMLLayer</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">kmlUrl</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">
&nbsp; map</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">addLayer</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">kml</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">

&nbsp; dojo</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">connect</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">kml</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">'onLoad'</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">function</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">lyr</SPAN><SPAN class="pun">)</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">{</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> layers </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> lyr</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">getLayers</SPAN><SPAN class="pun">();</SPAN><SPAN class="pln">
&nbsp; dojo</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">forEach</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">layers</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">function</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">lyr</SPAN><SPAN class="pun">)</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">{</SPAN><SPAN class="pln">
&nbsp; lyr</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">setInfoTemplate</SPAN><SPAN class="pun">(</SPAN><SPAN class="kwd">null</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="pun">});</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="pun">});</SPAN><SPAN class="pln">


&nbsp; urlUtils</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">addProxyRule</SPAN><SPAN class="pun">({</SPAN><SPAN class="pln">
&nbsp; proxyUrl </SPAN><SPAN class="pun">:</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"/proxy/proxy.php"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln">
&nbsp; urlPrefix </SPAN><SPAN class="pun">:</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"www.srh.noaa.gov"</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="pun">});</SPAN><SPAN class="pln">

&nbsp;&nbsp; </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> template </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> </SPAN><SPAN class="typ">InfoTemplate</SPAN><SPAN class="pun">(</SPAN><SPAN class="str">"${name}"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"<iframe src=${fcstlink} class="fcst"></iframe>"</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">

&nbsp;&nbsp; </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> csvUrl </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> </SPAN><SPAN class="str"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwww.srh.noaa.gov%2Fimages%2Frtimages%2Fmrx%2Fjs_local%2Friverpoints.csv" target="_blank">http://www.srh.noaa.gov/images/rtimages/mrx/js_local/riverpoints.csv</A><SPAN>"</SPAN></SPAN><SPAN class="pun">;</SPAN><SPAN class="pln">
&nbsp; csv </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> </SPAN><SPAN class="typ">CSVLayer</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">csvUrl</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">{</SPAN><SPAN class="pln">
&nbsp; copyright </SPAN><SPAN class="pun">:</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"weather.gov"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln">
&nbsp; infoTemplate </SPAN><SPAN class="pun">:</SPAN><SPAN class="pln"> template
&nbsp;&nbsp; </SPAN><SPAN class="pun">});</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> logo </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> </SPAN><SPAN class="typ">PictureMarkerSymbol</SPAN><SPAN class="pun">(</SPAN><SPAN class="str"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwww.srh.noaa.gov%2Fimages%2Fmrx%2Fsurf.png" target="_blank">http://www.srh.noaa.gov/images/mrx/surf.png</A><SPAN>"</SPAN></SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">20</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">20</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> renderer </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> </SPAN><SPAN class="typ">SimpleRenderer</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">logo</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">
&nbsp; csv</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">setRenderer</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">renderer</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">
&nbsp; csv</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">attr</SPAN><SPAN class="pun">(</SPAN><SPAN class="str">'sites'</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">'sites'</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">
&nbsp; map</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">addLayer</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">csv</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">

&nbsp; dojo</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">connect</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">map</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">infoWindow</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"onHide"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> centerMap</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">
&nbsp; map</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">on</SPAN><SPAN class="pun">(</SPAN><SPAN class="str">"click"</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> mapClickAction</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">

&nbsp;&nbsp; </SPAN><SPAN class="kwd">function</SPAN><SPAN class="pln"> showCoordinates</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">evt</SPAN><SPAN class="pun">)</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">{</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> mp </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> webMercatorUtils</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">webMercatorToGeographic</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">evt</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">mapPoint</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> sp </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> screenUtils</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">toScreenGeometry</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">map</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">extent</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">800</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">550</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> evt</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">mapPoint</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">
&nbsp; dom</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">byId</SPAN><SPAN class="pun">(</SPAN><SPAN class="str">"info"</SPAN><SPAN class="pun">).</SPAN><SPAN class="pln">innerHTML </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> mp</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">x</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">toFixed</SPAN><SPAN class="pun">(</SPAN><SPAN class="lit">3</SPAN><SPAN class="pun">)</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">+</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">", "</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">+</SPAN><SPAN class="pln"> mp</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">y</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">toFixed</SPAN><SPAN class="pun">(</SPAN><SPAN class="lit">3</SPAN><SPAN class="pun">)</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">+</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">"<br>"</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">+</SPAN><SPAN class="pln"> sp</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">x </SPAN><SPAN class="pun">+</SPAN><SPAN class="pln"> </SPAN><SPAN class="str">" "</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">+</SPAN><SPAN class="pln"> sp</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">y</SPAN><SPAN class="pun">;</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="pun">}</SPAN><SPAN class="pln">

&nbsp;&nbsp; </SPAN><SPAN class="kwd">function</SPAN><SPAN class="pln"> centerMap</SPAN><SPAN class="pun">(){</SPAN><SPAN class="pln">
&nbsp; map</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">graphics</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">clear</SPAN><SPAN class="pun">();</SPAN><SPAN class="pln">
&nbsp; map</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">centerAt</SPAN><SPAN class="pun">([-</SPAN><SPAN class="lit">83.71</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">36.05</SPAN><SPAN class="pun">]);</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="kwd">return</SPAN><SPAN class="pun">;</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="pun">}</SPAN><SPAN class="pln">

&nbsp;&nbsp; </SPAN><SPAN class="kwd">function</SPAN><SPAN class="pln"> mapClickAction</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">evt</SPAN><SPAN class="pun">)</SPAN><SPAN class="pln"> </SPAN><SPAN class="pun">{</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> screenX </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> evt</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">screenPoint</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">x</SPAN><SPAN class="pun">;</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> screenY </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> evt</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">screenPoint</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">y</SPAN><SPAN class="pun">;</SPAN><SPAN class="pln">

&nbsp;&nbsp; </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> newScreenX </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> screenX </SPAN><SPAN class="pun">+</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">225</SPAN><SPAN class="pun">;</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> newScreenY </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> screenY </SPAN><SPAN class="pun">+</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">250</SPAN><SPAN class="pun">;</SPAN><SPAN class="pln">

&nbsp;&nbsp; </SPAN><SPAN class="kwd">var</SPAN><SPAN class="pln"> newScreenCenter </SPAN><SPAN class="pun">=</SPAN><SPAN class="pln"> screenUtils</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">toMapPoint</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">map</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">extent</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">800</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="lit">550</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> </SPAN><SPAN class="kwd">new</SPAN><SPAN class="pln"> </SPAN><SPAN class="typ">ScreenPoint</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">newScreenX</SPAN><SPAN class="pun">,</SPAN><SPAN class="pln"> newScreenY</SPAN><SPAN class="pun">));</SPAN><SPAN class="pln">

&nbsp; map</SPAN><SPAN class="pun">.</SPAN><SPAN class="pln">centerAt</SPAN><SPAN class="pun">(</SPAN><SPAN class="pln">newScreenCenter</SPAN><SPAN class="pun">);</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="pun">}</SPAN><SPAN class="pln">
&nbsp;&nbsp; </SPAN><SPAN class="pun">});</SPAN><SPAN class="pln">

&nbsp;&nbsp; </SPAN><SPAN class="pun"></</SPAN><SPAN class="pln">script</SPAN><SPAN class="pun">></SPAN>

<SPAN class="pln"></SPAN>

タグ付けされた投稿をもっと見る

Accepted answers

kenbuja

Instead of using the map's click event, use the CSVLayer's click event

All comments

EricHolweg

Ken,

Thank you so much for the help. That was the solution. I appreciate your time.

I made the changes from

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

kml.on("load", function(lyr) {
                    var layers = lyr.getLayers();
                    dojo.forEach(layers, function(lyr) {
                        lyr.setInfoTemplate(null);
                    });
                });

and when I try to set the InfoTemplate to null so that it does not show up when a user clicks on the map...

It is now causing the entire kml shape to no longer display.

With the kml.on("load", function... the map looks like

With the dojo connect function the kml layer appears without the ability to click on that layer and have an info window display.

In the interest of coding this up properly with .on instead of dojo.connect... can anyone tell me what is going wrong?

I appreciate the help thus far.

kenbuja

The syntax would be

csv.on("click", mapClickAction);

A couple other observations about your code. You're using dojo.connect in a few places. You should replace those with on

dojo.connect(kml, 'onLoad', function(lyr) {  

kml.on("load", function(lyr) {

and

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

EricHolweg

Ken...

Thanks for the reply. I was trying to access the CSVlayer click event but could not get it to work.

Stupid question but I get access to the map click event via

map.on("click", mapClickAction);

How do I get access to the CSVLayer object click event?

kenbuja

Instead of using the map's click event, use the CSVLayer's click event

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.