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.

Map API could help build very cool mashup websites.  Often times a back end database is the source of the objects to be drawn on the map and querying for those objects from the database based on the parameters the users choose on the website (e.g., state, city, search criteria) gets complex.  Also to improve the user experience, asynchronous map loading is desired so that while the next batch of objects is being retrieved from the server, the current ones on the map could continue functioning.  To address all these challenges and build a smooth database driven asynchronous loading map application, web service can serve as the bridge between the server side complex data model and the client side map drawing logic.  The following describes the steps of implementing such architecture and a sample code project created in Visual Studio (free version could be downloaded here).  This time, I played with Google Maps API.

Firstly, set up a basic ASP.NET AJAX-enabled web site through the Visual Studio wizard.  You may need to download the AJAX extension from http://ajax.asp.net/.  Inside Default.aspx, add a div in the body like the following to host the map

Reference the google api javascript source and your own javascript file (e.g., gmap.js where the client side mapping code is located) in the head section.

Next is to prepare the data on the server side.  It is actually much easier to set up a relational database in Visual Studio by a just few clicks and there are tons of such examples on the web.  So here let’s try a slightly trickier scenario where we only have a static plain text CSV data file (e.g., exported from an legacy system or Excel spreadsheet) that contains various cities and the fun places in them to be drawn on the map.  Add that data file (e.g., mapdata.csv) under the App_Data/ folder in the solution explore.  Assume the data file has 3 columns State, City, and FunPlace.  Now create a web service (e.g., MapDataWebService) to extract the data from the CSV file and serve to the client side mapping code.  To add this web service, right click the project in the solution explore, select "Add New Item…", select "Web Service", and then rename the file name into "MapDataWebService.asmx".  The web service skeleton is automatically added under App_Code/.  Open it and add 2 web methods getAllStates() and getFunPlacesByState(string state).  The former is used to populate the dropdown on the web page to select a state and the latter is to get the fun places of the selected state.  Both methods connect to the data file through OLE DB and query the data using convenient SQL syntax.  To quickly unit test the web method, you could open MapDataWebService.asmx and press F5 to run the web service alone.

The return value of getFunPlacesByState(string state) would be an array of objects (type of class Place), each of which contains the latitude and longitude of the city and the name of the fun place in that city.  The class Place is the object oriented representation of this information.  The web service will return the objects to the JavaScript caller.  In order for the caller to get the consistent objects and dereference them the same way as in C#, the following directive should be added to the top of the web service code and a reference to the assembly System.Web.Extensions.dll needs to be added to the solution too.  If you don’t have this assembly already installed on your machine, you could download and install "ASP.NET Ajax" from http://ajax.asp.net/.

After the data service is created, the getAllStates() web method could be used to build a data source to populate the dropdown list.  Drag and drop a dropdown list onto the Default.aspx, select to create a new data source from its context menu, choose object as the type, MapDataWebService as the business object, and getAllStates() as the SELECT method.  The data binding is automatically done.  Add an onchange event handler to this control to trigger the mapping function (e.g., drawMarkers) and we are almost done.

The last step is to implement the mapping method drawMarkers() in gmap.js.  It retrieves the state that the user chose in the dropdown and use it as the parameter to call the web service method getFunPlacesByState(state) asynchronously.  The callback function will receive the resulting list of Place objects and then use the Google maps API to draw them on the map.  To successfully make the web service call from JavaScript, it has to be registered in the Default.aspx like the following.

To make it more fun and improve the user experience, during the async web service call, a spinning progress icon could be display indicating that the data is being loaded.  Overall, no whole page loading is done and web page looks better.  If you are interested the sample solution and code can be downloaded GMapExample.zip.  Before you can compile and run this web site, go to http://www.google.com/apis/maps/ to register your API key and replace the place holder "YOUR_API_KEY" in file Default.aspx and App_Code/MapDataWebService.cs.

By the way, a comment about Google Maps API.  The markers manager is a convenient way of aggregating all the markers, but removing objects from the manager seems buggy.  Whenever the map zoom level is changed, all the removed markers come back on the map.  The markers in the manager are not controlled by the map.removeOverlay() either.  Other than that, the API works pretty well.

Sample code download: GMapExample.zip

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.