Engineering a New World

Unfortunately, the wonderful Flickr map only lets you display as many points on the map (at a time) as you can fit in thumbnail photos across your screen.  So, for someone like me who meticulously geo-tags every photo taken (in the hopes I’ll one day be able to locate the ideal geo-data visualization app for my photos) the closest thing I can get to a good map is the Flickr Organizr.  Here’s a photo of how it looks:

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.

I was just doing some reading up & testing on the Google Maps API, and zoomed in to streetview only to find myself in the middle of a lillypad or a dirty fishbowl or something:

Supposedly, this is Missoula, Montana – though I think the locals would disagree with me.

Here’s the embedded version, which right now looks the same:

View Larger Map

Right now, if I use the UI to navigate out of it, I can re-enter the real world, but then I can’t go back to the “green fungus reality” unless I refresh the page.

Any ideas?

When I was working on my last Bing Maps project for Webworld Technologies, my Microsoft rep told me, “…and as soon as you’re ready, let me know and I’ll give you a hack to disable that f’n birds-eye popup”.   I didn’t know that was the official inside term for it, but like so many internal naming conventions that stick with you, I felt it was appropriately named.  I think the Bing bird’s eye view is a fantastic way to visualize maps too, but the little “VIEW THIS IN THE COOL BIRDS EYE VIEW” popup that comes up every time you refresh the map is a bit far into the “annoying UI element” department.

To disable it, just do the following:  right after invoke your map.LoadMap, hide the popup element as follows:

   map.LoadMap(new VELatLong(38.865326, -77.074930), 12 ,’h’ ,false);
                // Suppress popup saying Bird’s Eye available
   document.getElementById("MSVE_obliqueNotification").style.visibility = "hidden";

That will get rid of that popup any time the map loads.

I thought this was pretty choice:

You try installing the update that fixes the “Install Cancelled Issue”, and you repeatedly get a dialog that pops up each day trying to install the update, and then fails with an error of “Installation Canceled”. 

Methinks they haven’t fixed the bug!

(BTW this is relevent to the HP dv7 laptop, and HP Photosmart C4580 printer on Windows Vista x64.)

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!

Now that my cross-country trip is drawing to a close (I should be pulling in to my destination in the DC area tomorrow) I’ve been trying to figure out a cool Web 2.0-style way of displaying where we went on this trip, with the route we took, geo-tagged photos, videos, and all of that sort of thing. 

Unfortunately, I could not find any service that would let me mash up the geo-data I already have stored in Flickr (and I’ve painstakingly geo-tagged all my photos) and then add in some sort of way to draw the lines where we went on the trip.

Furthermore, Flickr maps – as cool as they are – will only display a page of your photos at a time.  So, although I have representative photos that basically draw a line all of the way across the USA, you can’t see that if you look at the map.  So, I’ve been trying to find something better.

Now, Google Maps lets me do something like the following, where I can at least easily load up a map with all manner of meta-data (points, lines that follow roads, HTML, etc) and slap it up on a publicly-available map:

View Cross-Country Road Trip in a larger map

This is a step in the right direction, though I still can’t integrate my Flickr geo-data with the map. So, that leaves me to painstakingly re-add all of my geo-data, or figure out another make-sense way of displaying the data. Still pretty nifty, but someone has GOT to have already worked out a solution to this. It’s not like I’m the first blogger/web 2.0 geek to go on a road trip!