Automatically move cursor into next field using javascript

This is a little script which will move the focus to the next control when the current textbox hits its maximum length. It also handles the strange(or expected?) behaviour whereby pressing <Tab> would ‘jump’ two controls.

Code Snippet
  1. function moveOnMax(event, field, nextFieldID) {
  2.         event = event || window.event;
  3.         if (event.keyCode != 9) {
  4.             if (field.value.length >= field.maxLength) {
  5.                 nextFieldID.focus();
  6.             }
  7.         }
  8.     }

You can wire this into an ASP textbox as:

Code Snippet
  1. <asp:TextBox ID=”TextBox1″ ClientIDMode=”Static” MaxLength=”1″ onkeyup=”moveOnMax(event, this, document.getElementById(‘TextBox2’))” Width=”20″ Height=”20″ runat=”server”></asp:TextBox>
Advertisements

Batch Geocoding with Google Maps

Yes, another one of those. Last week I had to geocode a bunch of addresses which were held in a csv file and came across this really handy geocoding utility/page, (which you can download it on your PC) written by Esa. As expected, it takes a list of addresses and geocodes them. Geocoded addresses and coordinates are listed on an output textbox whereas addresses that cannot be geocoded are listed on a different textbox.  Any geocoded addresses are also placed on a map.

The only problem was that I had a whole load more data to go with the address strings and I really wanted an input/output process, where I would take my input csv file, process it and get the original csv plus the lon/lat coordinates.  So I slightly changed the code on the page. The idea is that you have a csv file with your data in BUT the bit that includes the address has a different separator than the rest of the data, e.g. a semi-colon. For example:

<id1>,<name1>,<surname1>,<telno1>;<address1>
<id2>,<name2>,<surname2>,<telno2>;<address2>
<id3>,<name3>,<surname3>,<telno3>;<address3>

Note the ‘;’ between the tel no and the address. The new page will take this list, and geocode it so the end result would be:

<id1>,<name1>,<surname1>,<telno1>;<address1>,<lon1>,<lat3>
<id2>,<name2>,<surname2>,<telno2>;<address2>,<lon2>,<lat3>
<id3>,<name3>,<surname3>,<telno3>;<address3>,<lon3>,<lat3>

You can download the new page here.

 

 

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>