Mark's profileIn-Cider KnowledgePhotosBlogListsMore Tools Help
    August 23

    Mashing Up Maps

    One of the main services that often gets used in Web Services is mapping services.  There are several reasons for this:  this is a standout technology, there is no obvious way for 99.999% of organisations to take this quality of service in house, and also these services have great, powerful APIs.

     

    There are two obvious services to choose from, Google Maps and Microsoft's Virtual Earth.

     

    I decided, as a demo of the sort of things these services could do, I'd try and emulate the University of Edinburgh's own central area campus map (http://www.ed.ac.uk/maps/central-area/) to see if I could, quickly, make something that emulates the features there, and maybe extend to it.  Looking at it, I'd obvious want to keep the way of identify buildings when you click on them, but noticed a couple areas where it could be improved:  the silhoutted view doesn't give an idea of the lay of the land, and the map is contrained in size.  I especially noticed the latter with the notice on one street "To Pollock Halls".  Pollock is one of the main residentual campuses, especially for 1st years.  Yet they are the very people who need a step-by-step direction from their campus to the central area, especially in those first couple of weeks.  I wonder if a web service could improve that.  So I gave Virtual Earth a try (I chose VE over Google Maps simply because VE has better aerial photography of Edinburgh!)

     

    This is what I came up with in less than 45 minutes (actually 1 hour 15 minutes, but half an hour was spent furiously trying to figure out longitude and latitude values...).

     

    I was hoping to add screenshots here, but Windows Live Writer completely refuses to upload my pictures.  So, I'll try and upload them with a different method in next post.  What I managed to do was emulate the central area campus map, put buttons on that allow the user to identify buildings, and also, to add a feature, showed how easy (a 1-liner!) it is to generate a directions map from Pollock Halls to the central area.  All in a Web 2.0 application that can be scrolled around and looked at in different zooms and allows a different perspective to be put on the map.

     

    As I say, this was only the briefly less-than-an-hour playing with Virtual Earth.

     

    The code is, in my own verbose spacing way, a merely 64 lines:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>
    <script>
    var map = null;
    function GetMap()
    {
    map = new VEMap('myMap');
    map.LoadMap(new VELatLong(55.9435, -3.188), 17 ,'h' , false);
    }

    function LibraryButton_onclick()
    {
    GetMap();
    map.Clear();
    var points = new Array(
    new VELatLong(55.943,-3.1885),
    new VELatLong(55.9422,-3.1885),
    new VELatLong(55.9422,-3.19),
    new VELatLong(55.943,-3.19),
    new VELatLong(55.943,-3.1885));
    poly = new VEPolyline('1',points);
    poly.SetWidth(3);
    poly.SetColor(new VEColor(0,150,100,100));
    map.AddPolyline(poly);
    }

    function GrSqTh_onclick()
    {
    GetMap();
    map.Clear();
    var points2 = new Array(
    new VELatLong(55.943,-3.188),
    new VELatLong(55.9427,-3.188),
    new VELatLong(55.9427,-3.1885),
    new VELatLong(55.943,-3.1885),
    new VELatLong(55.943,-3.188));
    poly2 = new VEPolyline('1',points2);
    poly2.SetWidth(3);
    poly2.SetColor(new VEColor(0,150,100,100));
    map.AddPolyline(poly2);
    }

    function PLKH_Directions_onclick()
    {
    map.GetRoute(new VELatLong(55.938,-3.172), new VELatLong(55.943,-3.188));
    }

    </script>
    </head>
    <body onload="GetMap()">
    <div id='myMap' style="position:relative; width:600px; height:600px; left: 0px; top: 0px;"></div>
    <br />
    <input id="LibraryButton" style="width: 160px" type="button" value="Main Library" onclick="return LibraryButton_onclick()" />&nbsp;
    <input id="GrSqTh" style="width: 160px" type="button" value="George Square Theatre" onclick="return GrSqTh_onclick()" />
    <input id="PLKH_Directions" style="width: 176px" type="button" value="Route From Pollock Halls" onclick="return PLKH_Directions_onclick()" /><br />
    <br />
    <input id="resetbtn" style="width: 80px" type="button" value="Reset Map" onclick="GetMap()" />
    </body>
    </html>

     

    It does throw a few XHTML validation errors, but for this demo, I am not going to bother with those!  All the code is based on code available in the SDK for Virtual Earth (http://www.microsoft.com/downloads/details.aspx?FamilyId=121CDAE7-EA23-4634-B815-4300EB98EE88&displaylang=en) and this is barely scratching the surface...

     

    If you have any questions about the above, feel free to email me at the usual mark(dot)sammons(at)ed(dot)ac(dot)uk address.

    Comments (4)

    Please wait...
    Sorry, the comment you entered is too long. Please shorten it.
    You didn't enter anything. Please try again.
    Sorry, we can't add your comment right now. Please try again later.
    To add a comment, you need permission from your parent. Ask for permission
    Your parent has turned off comments.
    Sorry, we can't delete your comment right now. Please try again later.
    You've exceeded the maximum number of comments that can be left in one day. Please try again in 24 hours.
    Your account has had the ability to leave comments disabled because our systems indicate that you may be spamming other users. If you believe that your account has been disabled in error please contact Windows Live support.
    Complete the security check below to finish leaving your comment.
    The characters you type in the security check must match the characters in the picture or audio.
    Mark Sammons has turned off comments on this page.
    Nov. 9
    Oct. 31
    Oct. 28
    No namewrote:
    Be wow gold cheapest wow power leveling under the best single-site!
    Sept. 12

    Trackbacks

    Weblogs that reference this entry
    • None