I'm creating a map that can be launched from a URL that contains a name, address and lat & lon. When the maps launches I would like for it to automatically display an infoWindow containing the name & address at the coordinates that have been parsed from the URL.
I'm taking the coordinates and creating a new Point, then converting that point to web mercator and using it as the center of the map. But when I try to convert the web mercator point to a screen point to use in map.infoWindow.show, I get the error: Uncaught TypeError: Cannot read property 'spatialReference' of undefined.
If I try to use the web mercator point in the show method the error is: Uncaught TypeError: Cannot read property 'toScreen' of undefined.
Any suggestions would be appreciated, thanks.
require([
"esri/map", "esri/geometry/Circle", "esri/symbols/SimpleFillSymbol", "esri/layers/GraphicsLayer", "esri/units", "esri/geometry/webMercatorUtils", "esri/geometry/Extent", "esri/layers/FeatureLayer", "esri/dijit/Geocoder", "esri/dijit/BasemapToggle", "esri/InfoTemplate", "esri/dijit/InfoWindow", "esri/geometry/ScreenPoint", "esri/dijit/Measurement", "esri/symbol", "esri/graphic", "esri/symbols/Font", "esri/symbols/TextSymbol", "esri/Color", "esri/tasks/query", "esri/geometry/Point", "esri/SpatialReference", "esri/request", "esri/config", "dojo/dom", "dojo/on", "dojo/parser", "dijit/layout/BorderContainer", "dojo/domReady!"
], function(
Map, Circle, SimpleFillSymbol, GraphicsLayer, Units, webMercatorUtils, Extent, FeatureLayer, Geocoder, BasemapToggle, InfoTemplate, InfoWindow, ScreenPoint, Measurement, Symbol, Graphic, Font, TextSymbol, Color, Query, Point, SpatialReference, esriRequest, esriConfig, dom, on, parser
) {
parser.parse();
var params = location.search.substr(location.search.indexOf("?")+1);
params = params.split("&");
var coname = params[0].substr(3).replace(/%20/g,' ');
var addr = params[1].substr(5).replace(/%20/g,' ');
var csz = params[2].substr(4).replace(/%20/g,' ');
var lon = parseFloat(params[3].substr(4));
var lat = parseFloat(params[4].substr(4));
var addrPoint = new Point(lon,lat);
var addrLocation = webMercatorUtils.geographicToWebMercator(addrPoint);
console.log(coname);
console.log(addr);
console.log(csz);
console.log(lon);
console.log(lat);
console.log(addrPoint);
console.log(addrLocation);
var map = new Map("map", {
center: addrLocation,
zoom: 17,
basemap: "hybrid"
});
var layerTaps = new FeatureLayer("http://172.30.5.86:6080/arcgis/rest/services/Serviceability/Serviceability_Taps/MapServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
var layerCoax = new FeatureLayer("http://172.30.5.86:6080/arcgis/rest/services/Serviceability/Serviceability_Coax/MapServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
var layerFiber = new FeatureLayer("http://172.30.5.86:6080/arcgis/rest/services/Serviceability/Serviceability_Fiber/MapServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
var layerInfoUSAbus = new FeatureLayer("http://172.30.5.86:6080/arcgis/rest/services/Addresses/InfoUSA_Bus/MapServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
map.addLayers([layerTaps, layerCoax, layerFiber, layerInfoUSAbus]);
if(document.getElementById('taps').checked) {
layerTaps.show();
} else {
layerTaps.hide();
}
if(document.getElementById('coax').checked) {
layerCoax.show();
} else {
layerCoax.hide();
}
if(document.getElementById('fiber').checked) {
layerFiber.show();
} else {
layerFiber.hide();
}
if(document.getElementById('InfoUSAbus').checked) {
layerInfoUSAbus.show();
} else {
layerInfoUSAbus.hide();
}
on(dom.byId('coax'), 'change', CoaxLayerVisibility);
function CoaxLayerVisibility() {
if (layerCoax.visible) {
layerCoax.hide();
} else {
layerCoax.show();
}
};
on(dom.byId('taps'), 'change', TapsLayerVisibility);
function TapsLayerVisibility() {
if (layerTaps.visible) {
layerTaps.hide();
} else {
layerTaps.show();
}
};
on(dom.byId('fiber'), 'change', FiberLayerVisibility);
function FiberLayerVisibility() {
if (layerFiber.visible) {
layerFiber.hide();
} else {
layerFiber.show();
}
};
on(dom.byId('InfoUSAbus'), 'change', InfoUSAbusLayerVisibility);
function InfoUSAbusLayerVisibility() {
if (layerInfoUSAbus.visible) {
layerInfoUSAbus.hide();
} else {
layerInfoUSAbus.show();
}
};
var toggle = new BasemapToggle({
map: map,
basemap: "streets"
}, "BasemapToggle");
toggle.startup();
var measurement = new Measurement({
map: map,
defaultLengthUnit: esri.Units.FEET,
defaultAreaUnit: esri.Units.SQUARE_FEET
}, "measurement");
measurement.startup();
function measurementReset() {
measurement.clearResult();
measurement.setTool("distance", false);
measurement.setTool("area", false);
measurement.setTool("location", false);
}
document.getElementById("resetButton").addEventListener("click", measurementReset);
var screenPnt = map.toScreen(addrLocation);
map.infoWindow.resize(300, 250);
map.infoWindow.setTitle("InfoUSA Business Address");
map.infoWindow.setContent("<b>Name</b>: " + coname + "<br><b>Address</b>: " + addr + "<br><b>City, State, Zip</b>: " + csz);
map.infoWindow.show(screenPnt, map.getInfoWindowAnchor(screenPnt));
});
Solved! Go to Solution.
Could this be a timing issue? Try putting that code into the map's load event, so you know that it's ready for use.
map.on("load", function (){ var screenPnt = map.toScreen(addrLocation); map.infoWindow.resize(300, 250); map.infoWindow.setTitle("InfoUSA Business Address"); map.infoWindow.setContent("<b>Name</b>: " + coname + "<br><b>Address</b>: " + addr + "<br><b>City, State, Zip</b>: " + csz); map.infoWindow.show(screenPnt, map.getInfoWindowAnchor(screenPnt)); });
Could this be a timing issue? Try putting that code into the map's load event, so you know that it's ready for use.
map.on("load", function (){ var screenPnt = map.toScreen(addrLocation); map.infoWindow.resize(300, 250); map.infoWindow.setTitle("InfoUSA Business Address"); map.infoWindow.setContent("<b>Name</b>: " + coname + "<br><b>Address</b>: " + addr + "<br><b>City, State, Zip</b>: " + csz); map.infoWindow.show(screenPnt, map.getInfoWindowAnchor(screenPnt)); });
That was it. Thank you!