AnsweredAssumed Answered

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

Question asked by bagpipemike on Feb 26, 2016
Latest reply on Feb 29, 2016 by bagpipemike

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>

Outcomes