0

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>
2
  • Probably not the "answer" you are looking for but I think I'd investigate having the click results go into a grid (e.g. developers.arcgis.com/javascript/jssamples/…) – jbchurchill Feb 19 '16 at 19:32
  • If people are clicking around a lot in your application, I would change map.on("click", mapClickAction) to map.on("dbl-click", mapClickAction) to avoid accidental re-centering. – Mintx Feb 19 '16 at 19:49
1

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

csv.on("click", mapClickAction);
1
  • Thank you for the example. I appreciate it. Worked great. – EJH Feb 22 '16 at 16:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.