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.

I have been learning Cascading Style Sheets (CSS) as I go while working on this site. They have saved me much time and grief; I can’t believe that I ever did any design without them! While learning, I have run into a number of helpful resources scattered across the net. Here they are, in no order whatsoever:

• CSS Cheat Sheet – available as a downloadable .png or .pdf, this cheatsheet lists all selectors, pseudo-selectors, properties, etc. and presents just about everything you’ll need to know on a single page.
• CSS Layout Techniques – A great compilation of tips and tricks for creating cross-browser supported CSS style sheets.
• CSS Templates – Free-to-use CSS templates that can be tweaked and extended to meet your needs.
• CSS Zen Garden – Beautiful examples of CSS in action with viewable style sheets and HTML.
• Holy CSS Zeldman! – An authoritative collection of links to CSS resources.
• Squeaky Clean CSS – a blog entry written by Lokesh Dhaka that offers some great pointers on making sure that your CSS stays organized and useable.
• The Layout Reservoir – More simple and extendable CSS templates.

Overall, I have learned that it is best to modify CSS templates a step at a time. After each modification, I view the results of the change and further tweak my modifications, if necessary. This allows me to learn step-by-step and see the direct consequences of the changes that I make to the CSS.

Learning from someone else’s style sheets also helps, as you almost always pick up at least one new design tip in the process.

I finally got some pictures up on the site! Follow the link on the left to see pictures that were taken of me and my race partner at the Richmond Muddy Buddy race. The pictures use a set of javascripts called Lightbox JS, which were written by Lokesh Dhakar. The scripts are licensed under the Creative Commons Attribution 2.5 license, and can, therefore, be used in everything from personal projects to commercial projects.

I really love the simplicity and elegance of Lightbox JS 2, but am looking to extend the functionality. There are several different “updates” to the scripts that I am currently looking into that add new features to the tool. Here are a couple of the alternatives that I found interesting:

• Lightbox Plus – adds the resize image functionality to Lightbox JS 2, which automatically resizes the image to a smaller size if it doesn’t fit on the viewer’s screen.
• Thickbox – a lighter alternative to Lightbox JS 2, Thickbox also adds the ability to display more content types in the display box.

Listening to Wilco – Kicking Television…

So, I have pieced together the initial (and I say initial because I know that there will be changes coming) CSS layout for my site. I used this dasBlog theme, essence, which was designed by Jelle Druyts, to put together the non-blog sections of the site. It isn’t perfect, but it gets the job done for now.

Although there is still a major lack in content, the site is now functional. My next big project is putting together the photo album. Once this is done, I am going to connect my del.icio.us links to the site and then work on a membership/roles system, and – if I’m feeling crazy enough – maybe even try to connect it into the login system that comes integrated with this dasBlog application.

Maybe after all of this is done I’ll be able to sit back and write some blogs. Until then!