Storing your last map location in the Bing Maps AJAX control using cookies

This is an example of an easy and clean way of storing the last map location and zoom level for a user. The location is saved in a cookie, so next time the user will open you app the map will zoom to the last used location. And since I much prefer using ASP.NET than plain HTML, this example is implemented in the default ASP.NET Web template using Master Pages.

So here is goes:

The first thing you need to do is create a new ASP.NET Web Site in VS2010 using the Default template. Next open your Default.aspx page.

Add a reference to the Bing Maps control javascript API under the header content:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

Next, add a reference to the jQuery script (it should be under your Styles folder:

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

Remove (if you wish), all the default template text under the DefaultContent and create a <div> which will hold your map, i.e.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
   <div id="map"></div>
</asp:Content>

Now create a few of the helper functions within a <script> tag. The first one to use would be a couple of functions to create and read cookie values as per Peter-Paul Koch’s post

function createCookie(name, value, days) {
     if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
     }
     else var expires = "";
         document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
         }
          return null;
     }

Create the setInitialView() function. This function sets a cookie with a name of ‘LastLocation’ and returns its value. If no location cookie is set, a default location will be used

function setinitialView() {
     if (readCookie('LastLocation') == null) {
         // Default map center
         createCookie('LastLocation', '40.6318' + ':' + '22.94758' + ':' + '18', 30);
     }
     var lastloc = readCookie('LastLocation');
      return lastloc;
}

Create the getMap() function which will display the Bing Maps control.

function GetMap() {
    // Get cookie
    var s = setinitialView();
    var loc = s.split(":");
    var mapSettings = {
         // MapOptions
         credentials: 'YOURBINGMAPSKEYHERE',
          // ViewOptions
          // default to roughly the center of Thessaloniki.
          center: new Microsoft.Maps.Location(loc[0], loc[1]),
          mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
          padding: 1,
          zoom: parseInt(loc[2])
    };
    map = new Microsoft.Maps.Map(document.getElementById("map"), mapSettings);
    // Store a cookie with the current position
    Microsoft.Maps.Events.addHandler(map, 'viewchangeend', mapViewChangeEnd);
}

Note that we have wired up the viewchangeend event to the mapViewChangeEnd function. This event will fire every time we pan and zoom on the map and will set the LastLocation cookie to the current map center and zoom level:

function mapViewChangeEnd(e) {
    var curLocation = map.getCenter();
    var curLat = curLocation.latitude;
    var curLon = curLocation.longitude;
    createCookie('LastLocation', curLat + ':' + curLon + ':' + map.getZoom(), 30);
}

Finally, use a bit of jQuery to load the map when the DOM is fully loaded:

var map = null;
$(document).ready(function () {
    GetMap();
 });

All set! Your aspx page should now look this:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
     <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        function createCookie(name, value, days) {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                var expires = "; expires=" + date.toGMTString();
            }
            else var expires = "";
            document.cookie = name + "=" + value + expires + "; path=/";
        }
 
        function readCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }
        function setinitialView() {
            if (readCookie('LastLocation') == null) {
                // Default map center
                createCookie('LastLocation', '40.6318' + ':' + '22.94758' + ':' + '18', 30);
            }
            var lastloc = readCookie('LastLocation');
            return lastloc;
        }
 
        function mapViewChangeEnd(e) {
            var curLocation = map.getCenter();
            var curLat = curLocation.latitude;
            var curLon = curLocation.longitude;
            createCookie('LastLocation', curLat + ':' + curLon + ':' + map.getZoom(), 30);
        }
        function GetMap() {
            // Get cookie
            var s = setinitialView();
            var loc = s.split(":");
            var mapSettings = {
                // MapOptions
                credentials: 'YOURBINGMAPSKEYHERE',
                // ViewOptions
                // default to roughly the center of Thessaloniki.
                center: new Microsoft.Maps.Location(loc[0], loc[1]),
                mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
                padding: 1,
                zoom: parseInt(loc[2])
            };
            map = new Microsoft.Maps.Map(document.getElementById("map"), mapSettings);
            // Store a cookie with the current position
            Microsoft.Maps.Events.addHandler(map, 'viewchangeend', mapViewChangeEnd);
        }
        var map = null;
        $(document).ready(function () {
            GetMap();
        });
 
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
   <div id="map"></div>
</asp:Content>