Uncaught TypeError: Cannot read property 'spatialReference' of undefined

7085
2
Jump to solution
12-24-2014 11:29 AM
MichaelSchnack
New Contributor II

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));

});

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor

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));
});

View solution in original post

2 Replies
KenBuja
MVP Esteemed Contributor

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));
});
MichaelSchnack
New Contributor II

That was it.  Thank you!

0 Kudos