TypeError on popup.show Cannot read property 'toScreen' of undefined(…)

MikeSteven · ‎02-26-2016

I'm having a problem using popup.show, when I pass a point into it an error message appears in Chrome developer tools saying "TypeError: Cannot read property 'toScreen' of undefined(…)". I've gone over it but I can't see what I'm doing wrong.

The map I'm developing should allow people to find the relevant polling station for their address. The polling station name, address and coordinates are attributes of a polling district boundary dataset. I want the map to:

- perform an address search using a custom locator

- when the select-result event is fired use the location returned by the address search as the input geometry to a featureLayer.queryFeatures task

- the query features task will query the polling district polygons feature layer

- when the query finishes get the attributes, create a new point for the location of the polling station

- center and zoom the map on the point

- then show the name and address of the polling station in a popup.

I know that the point exists because the centerAndZoom works and I can also create a graphic from the point and add that to the map. It's just when I try popup.show(pollingStation) that the error appears

Any help would be greatly appreciated.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>Polling places</title>
        <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">
        <style>
            html, body, #map {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            body {
                background-color: #FFF;
                overflow: hidden;
                font-family: "Trebuchet MS";
            }
            #search {
                display: block;
                position: absolute;
                z-index: 2;
                top: 20px;
                left: 75px;
            }
            #mapCopyright {
                height: 20px;
                width: 250px;
                position: absolute;
                bottom: 1px;
                left: 5px;
                z-index: 0;
            }
        </style>
        <script src="http://js.arcgis.com/3.15/"></script>
        <script>
            var map, popup;
            var locatorUrl = "http://edinburghcouncilmaps.info/locatorhub/arcgis/rest/services/CAG/ADDRESS/GeocodeServer/";
            require(["esri/map",
            "esri/dijit/Popup",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/FeatureLayer",
            "esri/geometry/Extent",
            "esri/geometry/Point",
            "esri/tasks/query",
            "esri/tasks/locator",
            "esri/dijit/Search",
            "dojo/_base/array",
            "dojo/DeferredList",
            "esri/arcgis/utils",
            "esri/graphic",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "dojo/_base/Color",
            "esri/SpatialReference",
            "esri/symbols/PictureMarkerSymbol",
            "esri/InfoTemplate",
            "esri/config",
            "dojo/dom-construct",
            "dojo/domReady!"],
            function(Map,
                Popup,
                ArcGISTiledMapServiceLayer,
                FeatureLayer,
                Extent,
                Point,
                Query,
                Locator,
                Search,
                arrayUtils,
                DeferredList,
                arcgisUtils,
                Graphic,
                SimpleMarkerSymbol,
                SimpleLineSymbol,
                Color,
                SpatialReference,
                PictureMarkerSymbol,
                InfoTemplate,
                esriConfig,
                domConstruct) {
                popup = new Popup(null, domConstruct.create("div"));
                popup.resize(180, 200);
                map = new Map("map", {
                    extent : new Extent({
                        "xmin" : 324660,
                        "ymin" : 673800,
                        "xmax" : 325650,
                        "ymax" : 674150,
                        "spatialReference" : {
                            "wkid" : 27700
                        }
                    }),
                });
                var basemapUrl = "http://edinburghcouncilmaps.info/arcgis/rest/services/Basemaps/basemap/MapServer";
                var basemap = new ArcGISTiledMapServiceLayer(basemapUrl);
                map.addLayer(basemap);
                var infoT = new InfoTemplate();
                infoT.setTitle("Your polling station is");
                infoT.setContent("${POLLING_PL}<br/>" + "${FULL_AD}<br/>");
                var pollingDistricts = new FeatureLayer("http://edinburghcouncilmaps.info/arcgis/rest/services/Misc/INSPIRE/MapServer/28", {
                    mode : FeatureLayer.MODE_SELECTION,
                    infoTemplate : infoT,
                    outFields : ["*"]
                });
                map.addLayer(pollingDistricts);
                pollingDistricts.hide();
                //create search widget for address searching
                search = new Search({
                    sources : [{
                        //Pass in the custom locator to the sources
                        locator : new Locator(locatorUrl),
                        enableSuggestions : false,
                        singleLineFieldName : "LH_ADDRESS",
                        outFields : ["*"],
                        placeholder : "Search addresses",
                        showInfoWindowOnSelect : false,
                    }],
                    map : map,
                    enableSearchingAll : false,
                }, "search");
                search.startup();
                //when a result is found, search polling districts and get the map to zoom to the location of the polling station
                search.on("select-result", showPollingStation);
                function showPollingStation(evt) {
                    popup.hide();
                    popup.clearFeatures();
                    pollingDistricts.clearSelection();
                    var point = evt.result.feature.geometry;
                    var query = Query();
                    query.geometry = point;
                    pollingDistricts.selectFeatures(query, pollingDistricts.SELECTION_NEW, function(results) {
                    });
                    //once polling district found, center the map on the polling station and show name and address in popup
                    pollingDistricts.on("selection-complete", showAddress);
                }
                function showAddress(event) {
                    var results = pollingDistricts.getSelectedFeatures();
                    x = results[0].attributes["X"];
                    y = results[0].attributes["Y"];
                    var station = results[0].attributes["POLLING_PL"];
                    var address = results[0].attributes["FULL_AD"];
                    console.log("polling station coordinates: " + x + ", " + y + " " + station + ", " + address);
                    //create new point for polling station
                    var pollingStation = new Point([x, y], new SpatialReference({
                        wkid : 27700
                    }));
                    popup.setContent(station + "</br> " + address);
                    //center the map on the polling station
                    map.centerAndZoom(pollingStation);
                    symbol = SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 12, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 0]), 2), new Color([255, 0, 0]));
                    newGraphic = new Graphic(pollingStation, symbol);
                    map.graphics.add(newGraphic);
                    //show popup
                    popup.show(pollingStation);
                }
            });
        </script>
    </head>
    <body>
        <div id="search"></div>
        <div id="map"></div>
        <span id = "mapCopyright" style="font-family:arial;color:black;font-size:9px;"> © Crown Copyright and database right. All rights reserved. </br>
            Ordnance Survey License number 100023420. </span>
    </body>
</html>

RobertScheitlin__GISP · ‎02-26-2016

Mike,

Your issue was the fact that you had not assigned the popup to the map yet (Lines 108, 149, 150, 183).

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Polling places</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">

  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Trebuchet MS";
    }

    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 75px;
    }

    #mapCopyright {
      height: 20px;
      width: 250px;
      position: absolute;
      bottom: 1px;
      left: 5px;
      z-index: 0;
    }
  </style>

  <script src="http://js.arcgis.com/3.15/"></script>
  <script>
    var map, popup;
    var locatorUrl = "http://edinburghcouncilmaps.info/locatorhub/arcgis/rest/services/CAG/ADDRESS/GeocodeServer/";

    require([
      "esri/map",
      "esri/dijit/Popup",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/layers/FeatureLayer",
      "esri/geometry/Extent",
      "esri/geometry/Point",
      "esri/tasks/query",
      "esri/tasks/locator",
      "esri/dijit/Search",
      "dojo/_base/array",
      "dojo/DeferredList",
      "esri/arcgis/utils",
      "esri/graphic",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "dojo/_base/Color",
      "esri/SpatialReference",
      "esri/symbols/PictureMarkerSymbol",
      "esri/InfoTemplate",
      "esri/config",
      "dojo/dom-construct",
      "dojo/_base/lang",
      "dojo/domReady!"
      ],
      function (Map,
        Popup,
        ArcGISTiledMapServiceLayer,
        FeatureLayer,
        Extent,
        Point,
        Query,
        Locator,
        Search,
        arrayUtils,
        DeferredList,
        arcgisUtils,
        Graphic,
        SimpleMarkerSymbol,
        SimpleLineSymbol,
        Color,
        SpatialReference,
        PictureMarkerSymbol,
        InfoTemplate,
        esriConfig,
        domConstruct,
        lang) {

        popup = new Popup(null, domConstruct.create("div"));
        popup.resize(180, 200);
        map = new Map("map", {
          extent: new Extent({
            "xmin": 324660,
            "ymin": 673800,
            "xmax": 325650,
            "ymax": 674150,
            "spatialReference": {
              "wkid": 27700
            }
          }),
          infoWindow: popup
        });

        var basemapUrl = "http://edinburghcouncilmaps.info/arcgis/rest/services/Basemaps/basemap/MapServer";
        var basemap = new ArcGISTiledMapServiceLayer(basemapUrl);
        map.addLayer(basemap);

        var infoT = new InfoTemplate();
        infoT.setTitle("Your polling station is");
        infoT.setContent("${POLLING_PL}<br/>" + "${FULL_AD}<br/>");

        var pollingDistricts = new FeatureLayer("http://edinburghcouncilmaps.info/arcgis/rest/services/Misc/INSPIRE/MapServer/28", {
          mode: FeatureLayer.MODE_SELECTION,
          infoTemplate: infoT,
          outFields: ["*"]
        });

        map.addLayer(pollingDistricts);
        pollingDistricts.hide();

        //create search widget for address searching
        search = new Search({
          sources: [{
            //Pass in the custom locator to the sources
            locator: new Locator(locatorUrl),
            enableSuggestions: false,
            singleLineFieldName: "LH_ADDRESS",
            outFields: ["*"],
            placeholder: "Search addresses",
            showInfoWindowOnSelect: false,
                        }],
          map: map,
          enableSearchingAll: false,
        }, "search");

        search.startup();

        //when a result is found, search polling districts and get the map to zoom to the location of the polling station
        search.on("select-result", showPollingStation);

        function showPollingStation(evt) {
          map.infoWindow.hide();
          map.infoWindow.clearFeatures();
          pollingDistricts.clearSelection();
          var point = evt.result.feature.geometry;
          var query = Query();
          query.geometry = point;
          pollingDistricts.selectFeatures(query, pollingDistricts.SELECTION_NEW, function(results) {});

          //once polling district found, center the map on the polling station and show name and address in popup
          pollingDistricts.on("selection-complete", showAddress);
        }

        function showAddress(event) {
            var results = pollingDistricts.getSelectedFeatures();
            x = results[0].attributes["X"];
            y = results[0].attributes["Y"];
            var station = results[0].attributes["POLLING_PL"];
            var address = results[0].attributes["FULL_AD"];
            console.log("polling station coordinates: " + x + ", " + y + " " + station + ", " + address);

            //create new point for polling station
            var pollingStation = new Point([x, y], new SpatialReference({
                wkid : 27700
            }));

            map.infoWindow.setContent(station + "</br> " + address);

            //center the map on the polling station
            map.centerAndZoom(pollingStation);

            symbol = SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 12, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 0]), 2), new Color([255, 0, 0]));
            newGraphic = new Graphic(pollingStation, symbol);
            map.graphics.add(newGraphic);
            //show popup
            map.infoWindow.show(pollingStation);
        }
      });
  </script>
</head>

<body>
  <div id="search"></div>
  <div id="map"></div>
  <span id="mapCopyright" style="font-family:arial;color:black;font-size:9px;"> © Crown Copyright and database right. All rights reserved. <br />
                Ordnance Survey License number 100023420. </span>
</body>

</html>

View solution in original post

KenBuja · ‎02-26-2016

You have the syntax wrong on your point creation. Remove the brackets around the x,y values

var pollingStation = new Point(x, y, new SpatialReference({
    wkid : 27700
}));

MikeSteven · ‎02-26-2016

Thanks Ken. Actually it should work with the square brackets and I've already tried it without the square brackets but it still doesn't work.

RobertScheitlin__GISP · ‎02-26-2016

Mike,

Your issue was the fact that you had not assigned the popup to the map yet (Lines 108, 149, 150, 183).

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Polling places</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">

  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Trebuchet MS";
    }

    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 75px;
    }

    #mapCopyright {
      height: 20px;
      width: 250px;
      position: absolute;
      bottom: 1px;
      left: 5px;
      z-index: 0;
    }
  </style>

  <script src="http://js.arcgis.com/3.15/"></script>
  <script>
    var map, popup;
    var locatorUrl = "http://edinburghcouncilmaps.info/locatorhub/arcgis/rest/services/CAG/ADDRESS/GeocodeServer/";

    require([
      "esri/map",
      "esri/dijit/Popup",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/layers/FeatureLayer",
      "esri/geometry/Extent",
      "esri/geometry/Point",
      "esri/tasks/query",
      "esri/tasks/locator",
      "esri/dijit/Search",
      "dojo/_base/array",
      "dojo/DeferredList",
      "esri/arcgis/utils",
      "esri/graphic",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "dojo/_base/Color",
      "esri/SpatialReference",
      "esri/symbols/PictureMarkerSymbol",
      "esri/InfoTemplate",
      "esri/config",
      "dojo/dom-construct",
      "dojo/_base/lang",
      "dojo/domReady!"
      ],
      function (Map,
        Popup,
        ArcGISTiledMapServiceLayer,
        FeatureLayer,
        Extent,
        Point,
        Query,
        Locator,
        Search,
        arrayUtils,
        DeferredList,
        arcgisUtils,
        Graphic,
        SimpleMarkerSymbol,
        SimpleLineSymbol,
        Color,
        SpatialReference,
        PictureMarkerSymbol,
        InfoTemplate,
        esriConfig,
        domConstruct,
        lang) {

        popup = new Popup(null, domConstruct.create("div"));
        popup.resize(180, 200);
        map = new Map("map", {
          extent: new Extent({
            "xmin": 324660,
            "ymin": 673800,
            "xmax": 325650,
            "ymax": 674150,
            "spatialReference": {
              "wkid": 27700
            }
          }),
          infoWindow: popup
        });

        var basemapUrl = "http://edinburghcouncilmaps.info/arcgis/rest/services/Basemaps/basemap/MapServer";
        var basemap = new ArcGISTiledMapServiceLayer(basemapUrl);
        map.addLayer(basemap);

        var infoT = new InfoTemplate();
        infoT.setTitle("Your polling station is");
        infoT.setContent("${POLLING_PL}<br/>" + "${FULL_AD}<br/>");

        var pollingDistricts = new FeatureLayer("http://edinburghcouncilmaps.info/arcgis/rest/services/Misc/INSPIRE/MapServer/28", {
          mode: FeatureLayer.MODE_SELECTION,
          infoTemplate: infoT,
          outFields: ["*"]
        });

        map.addLayer(pollingDistricts);
        pollingDistricts.hide();

        //create search widget for address searching
        search = new Search({
          sources: [{
            //Pass in the custom locator to the sources
            locator: new Locator(locatorUrl),
            enableSuggestions: false,
            singleLineFieldName: "LH_ADDRESS",
            outFields: ["*"],
            placeholder: "Search addresses",
            showInfoWindowOnSelect: false,
                        }],
          map: map,
          enableSearchingAll: false,
        }, "search");

        search.startup();

        //when a result is found, search polling districts and get the map to zoom to the location of the polling station
        search.on("select-result", showPollingStation);

        function showPollingStation(evt) {
          map.infoWindow.hide();
          map.infoWindow.clearFeatures();
          pollingDistricts.clearSelection();
          var point = evt.result.feature.geometry;
          var query = Query();
          query.geometry = point;
          pollingDistricts.selectFeatures(query, pollingDistricts.SELECTION_NEW, function(results) {});

          //once polling district found, center the map on the polling station and show name and address in popup
          pollingDistricts.on("selection-complete", showAddress);
        }

        function showAddress(event) {
            var results = pollingDistricts.getSelectedFeatures();
            x = results[0].attributes["X"];
            y = results[0].attributes["Y"];
            var station = results[0].attributes["POLLING_PL"];
            var address = results[0].attributes["FULL_AD"];
            console.log("polling station coordinates: " + x + ", " + y + " " + station + ", " + address);

            //create new point for polling station
            var pollingStation = new Point([x, y], new SpatialReference({
                wkid : 27700
            }));

            map.infoWindow.setContent(station + "</br> " + address);

            //center the map on the polling station
            map.centerAndZoom(pollingStation);

            symbol = SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 12, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 0]), 2), new Color([255, 0, 0]));
            newGraphic = new Graphic(pollingStation, symbol);
            map.graphics.add(newGraphic);
            //show popup
            map.infoWindow.show(pollingStation);
        }
      });
  </script>
</head>

<body>
  <div id="search"></div>
  <div id="map"></div>
  <span id="mapCopyright" style="font-family:arial;color:black;font-size:9px;"> © Crown Copyright and database right. All rights reserved. <br />
                Ordnance Survey License number 100023420. </span>
</body>

</html>

MikeSteven · ‎02-29-2016

D'oh! Thanks very much Robert, that has fixed it.

Cheers,

Mike