Set a timeout in a javascript funtion for Streetview PopUp

672
2
Jump to solution
01-22-2018 06:54 AM
MartinOwens1
Occasional Contributor II

We are currently using the Street View PopUp widget that uses dual maps to create the street view content in the widget. We are in State Plane coordinates so I'm using our geometry service to convert the coordinates from the map click to lat and long to be passed into the URL for google. The problem I'm seeing is script doesn't provide enough time for the conversion to complete before returning the results. If I set an alert, it works perfectly and allows enough time to send the correct values. I have tried setTimeout(), and a for loop, but nothing seems to work. Any help would be appreciated.

onOpen: function () {
var _popWidth = this.config.popWidth;
var _popHeight = this.config.popHeight;
var _symbolStyle = this.config.symbolStyle;
var _symbolColor = this.config.symbolColor;
var _symbolSize = this.config.symbolSize;
var _popScroll = this.config.popScroll;
var _panel = this.config.panel;
var _gm = this.config.gm;
var _bm = this.config.bm;
var _md = this.config.md;
var _mi = this.config.mi;

this.map.setInfoWindowOnClick(false); // added this to fix popup issue
this.map.setMapCursor("pointer");
//wire up map on click event

mapClick = this.map.on("click", lang.hitch(this, function (evt) {
this.map.graphics.clear();

var x, y, point, pPoint;
var outSR = new SpatialReference(3857);
point = evt.mapPoint;
//alert(point.x);
var newPoint;
newPoint = evt.mapPoint;

var params = new esri.tasks.ProjectParameters(evt.mapPoint);
params.geometries = [point];
params.outSR = outSR;
params.transformForward = true;
params.transformation = 1515;

gsvc.project(params, function(outputpoint){
newPoint.x = outputpoint[0].x;
newPoint.y = outputpoint[0].y;
});


var symbol = new SimpleMarkerSymbol().setStyle(_symbolStyle);
symbol.setColor(_symbolColor);
symbol.setSize(_symbolSize);

var gclick = new Graphic(point, symbol);
//this.mapIdNode.graphics.Add(gclick);
this.map.graphics.add(gclick);


alert("The Streetview popup provides additional reference data originating from Google");


var geoPoint = new esri.geometry.webMercatorToGeographic(evt.mapPoint);

//console.info(evt.mapPoint.x);

var dMap = document.getElementById('dualMap');

var path = "http://data.mapchannels.com/mm/dual/map.htm?lat=" + geoPoint.y + "&lng=" + geoPoint.x + "&panel=" + _panel + "&gm=" + _gm + "&mi=" + _mi;
//var path = "widgets/StreetViewPopup/dualmaps/streetmap.html?lat=" + geoPoint.y + "&lng=" + geoPoint.x + "&panel=" + _panel + "&gm=" + _gm + "&mi=" + _mi;
dMap.innerHTML = '<iframe id="dMaps" style="width:' + _popWidth + 'px;height:' + _popHeight + 'px; padding:0px" src="' + path + '" marginwidth="0" marginheight="0" frameborder="0"></iframe>';

dMap.style.visibility = 'visible';
// HH auto adjust the street view window size
this.onMaximize();
return point;

}));

},

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Martin,

   The solution to this is simple don't try to open the window until the projection is done:

onOpen: function () {
  var _popWidth = this.config.popWidth;
  var _popHeight = this.config.popHeight;
  var _symbolStyle = this.config.symbolStyle;
  var _symbolColor = this.config.symbolColor;
  var _symbolSize = this.config.symbolSize;
  var _popScroll = this.config.popScroll;
  var _panel = this.config.panel;
  var _gm = this.config.gm;
  var _bm = this.config.bm;
  var _md = this.config.md;
  var _mi = this.config.mi;

  this.map.setInfoWindowOnClick(false); // added this to fix popup issue
  this.map.setMapCursor("pointer");
  //wire up map on click event

  mapClick = this.map.on("click", lang.hitch(this, function (evt) {
    this.map.graphics.clear();

    var x, y, point;
    var outSR = new SpatialReference(3857);
    point = evt.mapPoint;
    var newPoint;
    //newPoint = evt.mapPoint;
    var params = new esri.tasks.ProjectParameters();
    params.geometries = [point];
    params.outSR = outSR;
    params.transformForward = true;
    params.transformation = 1515;

    gsvc.project(params, lang.hitch(this, function(outputpoint){
      //newPoint.x = outputpoint[0].x;
      //newPoint.y = outputpoint[0].y;
      var geoPoint = new esri.geometry.webMercatorToGeographic(outputpoint[0]);
      var dMap = document.getElementById('dualMap');
      var path = "http://data.mapchannels.com/mm/dual/map.htm?lat=" + geoPoint.y + "&lng=" + geoPoint.x + "&panel=" + _panel + "&gm=" + _gm + "&mi=" + _mi;
      dMap.innerHTML = '<iframe id="dMaps" style="width:' + _popWidth + 'px;height:' + _popHeight + 'px; padding:0px" src="' + path + '" marginwidth="0" marginheight="0" frameborder="0"></iframe>';
      dMap.style.visibility = 'visible';
      this.onMaximize();
    }));
    var symbol = new SimpleMarkerSymbol().setStyle(_symbolStyle);
    symbol.setColor(_symbolColor);
    symbol.setSize(_symbolSize);

    var gclick = new Graphic(point, symbol);
    //this.mapIdNode.graphics.Add(gclick);
    this.map.graphics.add(gclick);
  }));

},

View solution in original post

0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Emeritus

Martin,

   The solution to this is simple don't try to open the window until the projection is done:

onOpen: function () {
  var _popWidth = this.config.popWidth;
  var _popHeight = this.config.popHeight;
  var _symbolStyle = this.config.symbolStyle;
  var _symbolColor = this.config.symbolColor;
  var _symbolSize = this.config.symbolSize;
  var _popScroll = this.config.popScroll;
  var _panel = this.config.panel;
  var _gm = this.config.gm;
  var _bm = this.config.bm;
  var _md = this.config.md;
  var _mi = this.config.mi;

  this.map.setInfoWindowOnClick(false); // added this to fix popup issue
  this.map.setMapCursor("pointer");
  //wire up map on click event

  mapClick = this.map.on("click", lang.hitch(this, function (evt) {
    this.map.graphics.clear();

    var x, y, point;
    var outSR = new SpatialReference(3857);
    point = evt.mapPoint;
    var newPoint;
    //newPoint = evt.mapPoint;
    var params = new esri.tasks.ProjectParameters();
    params.geometries = [point];
    params.outSR = outSR;
    params.transformForward = true;
    params.transformation = 1515;

    gsvc.project(params, lang.hitch(this, function(outputpoint){
      //newPoint.x = outputpoint[0].x;
      //newPoint.y = outputpoint[0].y;
      var geoPoint = new esri.geometry.webMercatorToGeographic(outputpoint[0]);
      var dMap = document.getElementById('dualMap');
      var path = "http://data.mapchannels.com/mm/dual/map.htm?lat=" + geoPoint.y + "&lng=" + geoPoint.x + "&panel=" + _panel + "&gm=" + _gm + "&mi=" + _mi;
      dMap.innerHTML = '<iframe id="dMaps" style="width:' + _popWidth + 'px;height:' + _popHeight + 'px; padding:0px" src="' + path + '" marginwidth="0" marginheight="0" frameborder="0"></iframe>';
      dMap.style.visibility = 'visible';
      this.onMaximize();
    }));
    var symbol = new SimpleMarkerSymbol().setStyle(_symbolStyle);
    symbol.setColor(_symbolColor);
    symbol.setSize(_symbolSize);

    var gclick = new Graphic(point, symbol);
    //this.mapIdNode.graphics.Add(gclick);
    this.map.graphics.add(gclick);
  }));

},
0 Kudos
MartinOwens1
Occasional Contributor II

Wow I can't believe it was that easy. Thanks Robert!

0 Kudos