Engineering a New World

This is a shorty for an ill-defined subject that I recently ran into when making a recent Bing Maps KML implementation.

When dealing with KML styles, the KML color space is defined differently than most web developers are used to.  Instead of being defined in normal RGB hex, they are ARGB, or RGB with Alpha Channel. 

In normal HTML color, one is used to hex representations like:

AABBCC

In KML, the first two octets are used to define the transparency or alpha channel, and then the next 6 are RGB in reverse order. 

So, if you’ve got a KML color of

50AABBCC

This would then translate to CCAABB in HTML.

Just a note, in case any one else has been infuriated or confused by such.

In importing KML into a Bing Maps (nee MS Virtual Earth) map, you will run into a limit of how many items or shapes it will allow you to render. 

The reason for this is performance, as it’s generally understood that one will start getting degraded performance as you go up over 200 shapes being put on the map at any one time.  Well, I did indeed experience such in IE8, but not in Safari, Chrome or Firefox – so, many of us may want/need to put more than their default 200 shapes on the screen.

To do this, you use the MaxImportedShapes property of the VEShapeSourceSpecification class (defined here), done something like this:

<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
<script type="text/javascript">
    var map = null;

    function EventMapLoad() {
        var shapeLayer = new VEShapeLayer();
        // var shapeLimit = new VEShapeSourceSpecification.MaxImportedShapes = 500;
        var shapeSpec = new VEShapeSourceSpecification(VEDataType.ImportXML, http://myhost.com/myKmlFile.kml, shapeLayer);
        shapeSpec.MaxImportedShapes = 500;
        map.ImportShapeLayerData(shapeSpec);
    }

    function CreateMap() {
        map = new VEMap(’myMap’);
        map.onLoadMap = EventMapLoad;
        map.LoadMap(null, 3, VEMapStyle.Hybrid);
    }
</script>

This will set the maximum number of shapes to 500.  I haven’t tested with much more than that, so performance will almost certainly be intolerable if you kick that up to 1000 shapes plus. 

I’m in the midst of doing a development project with Bing Maps, using their nifty feature whereby you can create a polygon ‘collection’ in their UI toolset, and then publish this out to a KML file, which you can then import back and overlay back onto the map and be able to display it in all sorts of interesting ways (i.e. in their birdseye mode, 3D Google-earth-style mode, etc.).

Unfortunately, it hasn’t been the smoothest road, and I’m looking to find a support community that can help me through this.

The first hurdle is that you can’t develop on KML using just your own box.  I.e., you can’t host the KML file on your local web server or an internally-located dev server.  In order make KML overlays work in Bing Maps, the KML file has to be on an internet-accessible machine.   This is due to the fact that the sequence works like this – if you want to display a file like “myoverlays.kml” on your map:

1.  You specify the KML overlay as a shape in your Bing Maps code, like so:

function EventMapLoad() {
    var shapeLayer = new VEShapeLayer();
    var shapeSpec = new VEShapeSourceSpecification(VEDataType.ImportXML, http://blog.reevestech.net/wp-content/uploads/arlington-combined.kml, shapeLayer);
    map.ImportShapeLayerData(shapeSpec);
}

This will then load that KML file when the page loads.

2. When the page loads, the Bing Maps JS then grabs your KML file off the server, and sends it back to Bing to be transformed into a “collection” markup that the Bing JS can use.  If you check your Firebug action when loading a KML file as above, you’ll see a request for something like this:

http://www.bing.com/maps/GeoCommunity.aspx?mapguid=1246652212958&action=importcol&saveimport=v&cid=msftve_1001&mapurl=http%3a%2f%2fblog.reevestech.net%3a8600%2faed%2fkml%2farlington-combined.kml&rim=VEMap._GetMapFromGUID(%271246652212958%27)._lm.RetrieveImportedCallback&rimargs=%27msftve_1001%27&mkt=en-us&maxitems=200

Note that it has my URL in the request.   The response you get back from the server is something of a “Collection Markup” or “CML” schema, which is basically the same XML data as the KML, but obviously piped through some XSLT at Bing’s end to make it acceptable for their JS.

3. With that data returned successfully to the client’s browser, the KML should then render on the map area of the user’s machine.

Now, where it gets tricky for me is this: I’m trying to dynamically generate a KML file to be returned when the user goes to the page. 

Now, for some reason – the Bing Maps KML parser seems to work when the data is served off of Apache, and works when served statically by Resin — but not when served dynamically from a Resin/Railo ColdFusion server.   

I can’t tell why this is, but something in the request is making the Bing Maps KML parser bail out.  Below are WGET samples – one where the request is going through Resin statically, the other is where it’s being parsed by the Railo CF servlet.  Same exact file, nothing different.  

Any clues, anyone?

Read more…

Okay – while not exactly where I wanted to be, I now see that I’m able to easily display a KML feed in Bing Maps (the artist formerly known as Microsoft Virtual Earth) by appending a “mapurl” parameter to maps.bing.com, and then feed it in the URL to your KML file.  Like

http://bing.com/maps?mapurl=[your_kml]

For example, if you click through on the link above, you’ll see the KML file that I generated from my Flickr cross-country set, then superimposed on Bing Maps, with a nicely-formatted sidebar containing all of the other various metadata stored in the KML file.

I’ve still not been able to get their other sample to work, probably due to some sort of mime-type issue, but the above is a pretty nice feature.

KML File from Flickr being used in Google Earth

In trying to solve an issue I’m having with Bing Maps and using the Bing Maps API to import KML for map overlays, I ended up solving a problem I had earlier, where I was trying to find a nice way to show all of the photos of my road trip across america on one map or one presentation.

Flickr’s already-excellent mapping feature lacks one major use case, where one wants to be able to take a set of a bunch of photos, and show ALL of them on a map.  I.e. how I just did, where I wanted to display all of the pics of my road trip on one map.

Well, a fellow by the name of Adam Franco wrote a great script using the Flickr API to output Flickr set data as KML for use in Google Maps or Google Earth.

So now, as you can see from the photo above, I was easily able to take the Flickr set that I made for my Cross-Country trip (which is composed entirely of geo-tagged photos) and immediately export that to KML for display on Google Earth.

I’ll then be using that as a test case to see if I can get Bing Maps to import & use the KML as well!