ArcGIS JavaScript Extension for Microsoft Virtual Earth Bug: Cannot Dynamically Draw Polyline or Polygon in Internet Explorer 7

by Nate on January 22, 2009

UPDATE: This was a bug. I reported it to ESRI, and they have fixed it in the latest release (1.3) of Virtual Earth JavaScript extension. Funny, I’m not sure if anyone is even using the extension, as there was a major lack of response about this issue in the ESRI forums. Are you using it? If so, let me know in the comments. I’m curious.

UPDATE2: Here’s a link to the release post on the ArcGIS Server Development blog: http://blogs.esri.com/Dev/blogs/arcgisserver/archive/2009/03/02/ArcGIS-JavaScript-API-version-1.3-released.aspx. And the ONLY change for the 1.3 release of the Virtual Earth connector: “Version 1.3 of the ArcGIS JavaScript Extension for Microsoft Virtual Earth fixes a display issue when drawing VE shapes on top of ArcGIS Server map layers in Internet Explorer.”

I’ve been wrestling with this one for a little while now, but only today found the time to put together a simple demonstration of what I think is a bug in the ArcGIS JavaScript Extension for Microsoft Virtual Earth. Take the following code:

        var latLngs = [];
        var map = new VEMap('map');

        function onClick(e) {
            map.DeleteAllShapes();
            latLngs.push(map.PixelToLatLong(new VEPixel(e.mapX, e.mapY)));

            if (latLngs.length > 1) {
                // I'm not hiding the marker, so you'll be able to see that the line does indeed get drawn.
                // It just doesn't display.
                map.AddShape(new VEShape(VEShapeType.Polyline, latLngs));
            }
        }
        function ready() {
            map.AttachEvent('onclick', onClick);
            map.LoadMap(new VELatLong(35, -85), 5, VEMapStyle.Aerial);

            // Adding in an ArcGIS Server REST service, as this triggers the bug.
            // If you comment this out, the polyline will draw correctly in IE 7.
            var agisve_services = new ESRI.ArcGIS.VE.ArcGISLayerFactory();
            agisve_services.CreateLayer('http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Portland/ESRI_LandBase_WebMercator/MapServer', 'Portland', function(tileSourceSpec, resourceInfo) {
                tileSourceSpec.Opacity = 0.50;
                map.AddTileLayer(tileSourceSpec, true);
            });

            // This just shows you that a polyline will draw correctly in IE7.
            map.AddShape(new VEShape(VEShapeType.Polyline, [
                new VELatLong(36, -80),
                new VELatLong(36, -95)
            ]));
        }

Pretty simple stuff. If you look at this in any browser other than IE7, things will work correctly. You’ll see that a polyline is drawn on page load. Then, when you click around on the map, a new polyline is drawn using the locations that you clicked on. If you look at this in IE7, however, you will notice that the initial polyline is drawn on page load, but the “dynamically drawn” polyline is not displayed when you click around on the map.

Now, onto the most important part: If you comment out the code that adds an ArcGIS Server REST service to the map, the line draws correctly in IE7. Try it. Comment out:

var agisve_services = new ESRI.ArcGIS.VE.ArcGISLayerFactory();
            agisve_services.CreateLayer('http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Portland/ESRI_LandBase_WebMercator/MapServer', 'NPSUnits', function(tileSourceSpec, resourceInfo) {
                tileSourceSpec.Opacity = 0.50;
                map.AddTileLayer(tileSourceSpec, true);
            });

I’m not sure what’s going on here, but I’m determined to find out.

{ 8 comments… read them below or add one }

1 Brian Behling May 27, 2009 at 8:04 pm

Yeah I’m having a problem with this. I actualy came up with the exact same code logic as you have.

But anyways, I changed the the src path from 1.2 to 1.3

http://serverapi.arcgisonline.com/jsapi/ve/?v=1.3

and my map will not load, but the path is valid. Have you gotten this to work yet?

Reply

2 Brian Behling May 27, 2009 at 8:48 pm

To reply to my own post, it seems with 1.3 you have to add the service layer after loading the MS map.

Cant wait till ESRI gets around to updating theier documentation. .

Reply

3 Nate May 28, 2009 at 7:28 am

Glad I could help…

Reply

4 Brian Behling May 28, 2009 at 7:44 am

Nate, I just found another bug with this. In IE after drawing the shape then panning, the shape will disapear, the loading icon will keep spinning and you cannot draw another shape on the map. I tried deleting the shape and clearing out the points array, but that still doesnt work.

How did you report this as a bug?

Reply

5 Nate May 28, 2009 at 9:22 am

I believe you have to have a support account. If you do, go to http://support.esri.com, login, and you can submit your bug.

If you don’t have a support account, I might be able to help you out. Can you post a code sample that I can use to reproduce the issue (post the code between the code tags to make it more readable)? I’m not seeing the same issue that you are seeing.

Reply

6 Brian Behling May 31, 2009 at 6:57 am

I checked this again with a test web app and I found that there isn’t a problem with panning. I have a button that the users click to enable measuring and there was some problems with that code. Thanks for the help.

Reply

7 Brian Behling June 2, 2009 at 6:45 am

Hello sir. I have found another issue with dynamic drawing and now with identifying a feature. After I click on a feature to identify something, the shape will not draw. The IE explorer icon keeps spinning and nothing gets drawn. Similar to version 1.2. If I pan the map by dragging it, the line will then draw. This code works fine in firefox though. Can you still take a look at this? If this is a bug, I will submit it to ESRI. Javascript code below:

var pointsArray = [];
var sCorporateUrl = “http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Portland/ESRI_LandBase_WebMercator/MapServer”;
var map = null;
var agisve_services = null;
var parcleIdentifyTolerance = 1; // in pixels
var sCoprIdentifyTolerance = 16;
var ident = false;

function OnPageLoad() {
var centerat = new VELatLong(40.01, -110.567);
map = new VEMap(‘mapDiv’);
map.SetDashboardSize(VEDashboardSize.Small);
var mapOptions = new VEMapOptions();

map.LoadMap(centerat, 4, VEMapStyle.Hybrid, false, VEMapMode.Mode2D, false, 0, mapOptions);

map.AttachEvent(“onclick”, getPoint);

agisve_services = new ESRI.ArcGIS.VE.ArcGISLayerFactory();
agisve_services.CreateLayer(sCorporateUrl, “sCorporate”, sCorpGetMap);

//set up parameters and functions for identify task on sCorporate layer
var sCorporateParams = { “LayerOption”: “top”, “LayerIds”: [0, 1, 2, 3, 4], “Tolerance”: sCoprIdentifyTolerance };
sCorporateIdentParams = new ESRI.ArcGIS.VE.IdentifyParameters(sCorporateParams);
sCorporateIdentTask = new ESRI.ArcGIS.VE.IdentifyTask();
sCorporateIdentTask.Url = sCorporateUrl;

map.AttachEvent(“onclick”, getPoint);
}

function getPoint(e) {
var clickPnt = null;

var clickPixel = new VEPixel(e.mapX, e.mapY);
clickPnt = map.PixelToLatLong(clickPixel);

if (ident == true) {
document.getElementById(“mapDiv”).childNodes[0].style.cursor = “wait”;
var pushpoint = new VEShape(VEShapeType.Pushpin, clickPnt);
map.DeleteAllShapes();
var mapDiv2 = $get(“mapDiv”);

//identify sCorporate layer
sCorporateIdentParams.Geometry = pushpoint;
sCorporateIdentParams.Width = mapDiv2.clientWidth;
sCorporateIdentParams.height = mapDiv2.clientHeight;
sCorporateIdentParams.MapExtent = map.GetMapView();
sCorporateIdentTask.Execute(sCorporateIdentParams, corporateIdentAddShapes);
}
else {
drawLine(clickPnt);
}
}

function corporateIdentAddShapes(IdentifyResult) {
var results = IdentifyResult.Results;
var shape = IdentifyResult.InputGeometry;
if (IdentifyResult.Results != “”) {
var layer = IdentifyResult.ToVEShapeLayer();
map.AddShapeLayer(layer);
}
document.getElementById(“mapDiv”).childNodes[0].style.cursor = “pointer”;
}

function Identify() {

if (ident == false) {
document.getElementById(“mapDiv”).childNodes[0].style.cursor = “pointer”;
ident = true;
document.getElementById(“btnIdentify”).style.background = “#D1EEEE”;
document.getElementById(“btnIdentify”).blur();
document.getElementById(“btnIdentify”).value = “Pan”;
}
else {
ident = false;
document.getElementById(“mapDiv”).childNodes[0].style.cursor = “default”;
document.getElementById(“btnIdentify”).style.background = “white”;
document.getElementById(“btnIdentify”).blur();
document.getElementById(“btnIdentify”).value = “Identify”;
}
}

function drawLine(clickPnt) {
pointsArray.push(clickPnt);
if (pointsArray.length > 1) {
var line = new VEShape(VEShapeType.Polyline, pointsArray);
map.AddShape(line);
}
}

function sCorpGetMap(tileSourceSpec, resourceInfo) {
tileSourceSpec.Opacity = 1;
map.AddTileLayer(tileSourceSpec, true);
}

Reply

8 Nate August 7, 2009 at 8:17 am

Hi Brian, sorry I haven’t been able to take a look at this. If you are still following this post, I just wanted to let you know that I have reported another related bug to ESRI. Performing an identify task using the ESRI Virtual Earth JavaScript API messes with the VEShape class and causes this bug to rear its ugly head again. I’ll followup with more information once the bug is fixed.

They have been able to reproduce, so I am hoping to hear something back from them in the near future.

Reply

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post: