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>
Solved! Go to Solution.
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>
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 }));
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.
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>
D'oh! Thanks very much Robert, that has fixed it.
Cheers,
Mike