Sleepiness in Seattle

Link: Animated 3D Driving Direction

Reading map isn’t always an easy job for lots of people.  In Friends TV show, Joey put a paper map on the gound and step on it in order to get a sense which direction is right.  Though that’s a little bit of a extreme case, it illustrates the challenge.  Many people need more intuitive online maps too and especially the driving directions, so that they don’t have to put the computer monitor on the ground and step on it   Some GPS devices like TomTom came up with really nice 3D UI to show the driving directions in a much more intuitive way.

Live Virtual Earth Map provides a rich set of APIs with which interesting map applications could be developed, even in 3D and birds eye view.  As an example, I built an animated driving direction that kind of simulates TomTom.  Turn by turn the map will move as if you are driving and what you see is a view of 45 degree looking down from above your "car" and you can see clearly what road and intersection is ahead of you.

The basic idea is to call the routing API to get the itinerary with all segments of the driving direction.  For each segment, the map orientation will be adjusted so that the next point is right ahead and then pan to the next point while showing the textual turn by turn instruction. Some suggestion for the API is that the panning APIs are mostly asynchronized so that the calls return immediately while the actually panning is done a while later.  This causes a little bit trouble in showing the textual turn by turn driving direction in sync with the map animation.  Map events help to some degree, but still some work needs to be done to keep the map and text in sync, because events are generic and there doesn’t seem to be a way to assign per event instance parameters.  Also the detailed road of each segment is not available, so when the road between 2 points is not straight we can’t follow the curve of the road in order to simulate the exact driving experience.

This is an important step of Microsoft’s Virtual Earth improving its branding awareness and could also potentially lead to more value added features to live local search. Virtual Earth comes later than MapQuest, Yahoo maps, and Google Maps, but it does has some nice features like 3-D view, 3-D building model, birds eye view, and my favorite feature Scratch Pad where you can store your favorite locations of restaurants, stores, and so on under different categories. This way you don’t have to type in addresses you may check on the map from time to time and you can also conveniently share interesting locations with your friends through email or blog posts. It also showes real time traffic data and road incidents, which could be viewed on your cell phone or GPS to optimize your driving. The push pin is a cute tool too to enable you to mark any location where there is no valid address. There are lots of aspects that Virtual Earth maps needs to improve too though. For example, once I check the driving direction. The route Virtual Earth gave me looks optimal and shorter than the the one I got from Google maps, however in reality the shorter route is mostly through very narrow streets with lots of stop signs. Obviously, the "convenience" of the the streets that are picked for the routing is not weighted enough in Virtual Earth. By the way, if you are interested you can try out the Virtual Earth plugin for MovableType. It’s fun to play with the 3D map on your blog.

read more | digg story

There are some great map plug-ins from Nick Punter and Stefan Dembowski.  I implemented this new one based on Virtual Earth.  Some new features in this plug-in are:

• 3-D maps and buildings enable you to hover above the city like driving a helicopter (http://imagine-windowslive.com/minisites/livemaps/default.aspx).
• Bird’s eye view of street blocks and buildings from 4 different directions.
• Displaying multiple maps on one page on both Firefox and IE.

Give it a try at the map test page.
Screen Shot:

Download:

VirtualEarthMaps-0.6.zip

Installations and Instructions:

# Virtual Earth Maps
# (Movable Type Plub-In of Virtual Earth http://maps.live.com/)
#
# Author: Stanley Yao (http://stanblog.jojoyao.com)
# Created: March 10, 2007

Files in this plugin package
============================
-+
 +–plugins
 |   +–VirtualEarthMaps
 |       +–VirtualEarthMaps.pl
 +–mt-static
     +–plugins
         +–VirtualEarthMaps
             +–js
                 +–virtual_earth.js

Installation
============
* Copy the VirtualEarthMaps.pl file into <MTROOT>/plugins/VirtualEarthMaps/
  Create sub-directories as necessary.
  <MTROOT> is where your Movable Type software is installed.
* Copy the virtual_earth.js file into <MT_STATIC_ROOT>/plugins/VirtualEarthMaps/
  Create sub-directories as necessary.
  Here the <MT_STATIC_ROOT> (usually named "mt-static") is not necessarily
  inside your <MTROOT> directory.

Tags to be used to insert maps in your blog
===========================================
<$MTVirtualEarthMaps address="<ADDRESS>"
                     latitude="<LAT>"
                     longitude="<LONG>"
                     info="<INFORMATION>"
                     zoom="<ZOOM>"
                     style="<STYLE>"                     mode="<MODE>"
                     width="<WIDTH>"
                     height="<HEIGHT>"$>

"address" OR ("latitude", "longitude") specifies the location you want to map.
"info" is the extra description (e.g., restaurant name)
"zoom" is how detail the map is.  It can be from 1 through 19, the bigger the more detail.  Default is 15.
"style" can be "r" – "road view", "a" – aerial view, "h" – hybrid view, and "o" bird’s eye view.  Default is "r".
"mode" can be "2D" or "3D".  "3D" requires IE.  Default is "2D".
"width" and "height" specifies how big the map is.  Default is 300px by 300px.

Examples:
<$MTVirtualEarthMaps address="525 Bellevue Sq, Bellevue, WA"$>
<$MTVirtualEarthMaps address="525 Bellevue Sq, Bellevue, WA" info="P F Chang" zoom="16" style="r" width="500" height="400"$>
<$MTVirtualEarthMaps latitude="47.604439" longitude="-122.330081" style="r" zoom="15" width="400" height="400"$>
<$MTVirtualEarthMaps latitude="47.620858" longitude="-122.348891" info="Space Needle" style="h" mode="3D" zoom="15" width="500" height="400"$>

Showing maps in your blog entries
=================================
You need "Process Tags" plugin http://kalsey.com/2002/08/process_tags_plugin/.
See more details in Stefan Dembowski’s explaination http://www.sixapart.com/pronet/plugins/plugin/mtyahoomaps.html.

Thank:

The following resources have been very helpful:

• MSDN Virtual Earth Forum
• Via Virtual Earth
• Movable Type Developer Resource

Bug Report:

You can report bugs by either comment on this entry or send me email at .

This is a road-view 2D map:
<$MTVirtualEarthMaps address="525 Bellevue Sq, Bellevue, WA" info="P F Chang" zoom="16" style="r" width="500" height="400"$>

This is a hybrid 3D map of Space Needle viewing at 35 degree angle:
<$MTVirtualEarthMaps latitude="47.620858" longitude="-122.348891" info="Space Needle" style="h" mode="3D" zoom="15" width="500" height="400"$>

Playing with mapping service API is a lot of fun, especially the Virtual Earth 3D maps, on which you can adjust altitude, heading, pitch and so on and pan through the city downtown over the skyscrapers.  Google map and Microsoft Virtual Earth has similar JavaScript/AJAX interfaces.  Tried the MTGoogleMaps plug-in and it’s quite good and easy to use.  There is one problem though when displaying, on IE, multiple maps by using multiple template tags on the same page.  The problem the tag will generate the same script-lets each time it appears on a page.  So there are multiple pairs of <div id="map"> and <script> in the resulting page, and the element ID of them are all the same – "map".  Although the element IDs are supposed to be unique across the page, but the browser will still try to render the page when there are ID collision.  However the result is not consistent on IE and Firefox.  Look at this example:

The above script-let will show "d1" and then "d2" on firefox, which suggests the space locality.  The closer element is picked when there are multiple elements with the same ID.  But on IE, "d1" will show up twice.

To fix this issue, firstly we need to move the <div> tag (hosting the map) generation into the client script so that we can generate tags with different IDs.  Secondly, use an array to keep track of all the map objects in case we need them later to further manipulate the maps.