Javascript Tutorials

JavaScript Zone

Thommp Nation > JavaScript Zone > Scripts > Postcode Maps

Introduction
Pre-requisites
Installation
Notes

Postcode Maps

Introduction

	Site Links
	Thompp's Javascripts Index Thompp nation Home Page

This Javascript lets you type in postcodes and view the maps for these codes, courtesy of multimap.com.

You click on the "Map" link after entering a valid UK postcode, and this will create a link on your web page to the map for that postcode.

Example of this script:

Postcode Maps (UK only)

	Links
	multimap.com

Pre-requisites

none

Installation

Cut and paste the following code to your html page as indicated:

1/3. In your folder create a javascript member called postcode.js: ================================================================== // Postcode maps script, copyright Pete Thompson 2005 // www.users.globalnet.co.uk/~thompp // ** post code functions function AddPcode(frm) { var NumPcodes = GetCookie('PT_NumPcodes'); var i; var ToDoItem; if (NumPcodes == null) { NumPcodes = 0; } Pcode= frm.pcode1.value; // Pcode = prompt("Please enter a UK post code"); if ((Pcode != null) && (Pcode != "" )) { NumPcodes++; SetCookie('PT_Pcode'+NumPcodes, Pcode, exp); SetCookie('PT_NumPcodes',NumPcodes, exp); // window.location = window.location; window.location = 'http://www.multimap.com/map/browse.cgi?pc="'+Pcode+'"'; } } function ListPcodes() { var NumPcodes = GetCookie('PT_NumPcodes'); // var NumPcodes = 1; var i; var PCode; if (NumPcodes == null) { NumPcodes = 0; } ShowCount = 0; SwapColour = 0; for (i=1; i <= NumPcodes ; i++) { Pcode = GetCookie('PT_Pcode'+i); if (Pcode!= null) { PrintPcode(Pcode, i); // document.write("a postcode<br>"); } } } function DeletePcode(Count) { DeleteCookie('PT_Pcode'+Count); window.location = window.location; } function PrintPcode (Pcode, Count) { var color = ""; SwapColour = 1 - SwapColour; if (SwapColour==0) {color = "bgcolor='#c0c0c0'"} ; ShowCount++; document.write("<tr " + color + ">"); document.write("<td width=10% align=center valign=top><small><small><b>"+ShowCount); document.write("<td width=50% align=left><a href='http://www.multimap.com/map/browse.cgi?pc="); document.write('"'+Pcode+'"'); document.write("'><font color='#0066FF'><small><small>"+Pcode+"</small></small></a>"); document.write("<td width=15% align=center><small><small>"+"<a href='javascript:DeletePcode(" + Count + ")'>Delete</a>"); } var expDays = 30; var exp = new Date(); exp.setTime(exp.getTime() + (expDays*24*60*60*1000)); var Exchange = "GB"; // which stock exchange (sharecheck) // cookie functions function getCookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); } function GetCookie (name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) return getCookieVal (j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; } function SetCookie (name, value) { var argv = SetCookie.arguments; var argc = SetCookie.arguments.length; var expires = (argc > 2) ? argv[2] : null; var path = (argc > 3) ? argv[3] : null; var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 5) ? argv[5] : false; document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : ""); } function DeleteCookie (name) { var exp = new Date(); exp.setTime (exp.getTime() - 1); var cval = GetCookie (name); document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString(); } 2/3. Add the following code to the <head> part of your html page: ================================================================= <! -- script for postcodemaps -- !> <script src="../postcode.js"> </script> 3/3. Add the following to the <body> part of your html page: =========================================================== <table width=30% border=1 align="center" bgcolor="#bbbbbb" valign="top" cellpadding="0" cellspacing="0" ><tr><td width=100%> <table width=100% border=0 align="left" bgcolor="#bbbbbb" !valign="top" cellpadding="0" cellspacing="0" > <tr><td width=5% bgcolor="#bbbbbb" ><td width=95% align=right> <small><b> Postcode Maps (UK only) </b></small> <tr><td width=5%><td width=95% bgcolor="#ffffff" align=right> <table width=100%> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </table> <form method=get action="javascript:void(0)" onsubmit="AddPcode(this); return false;"> <input type=text name=pcode1 value=""><input type=submit value="Map"> </form> </table></table>

Notes

this tutorial demonstrates:
- how to use cookies to store names
- how to display lists of items, and delete them
- how to create dynamic links
the code for maintaining cookies is taken from the original date last visited / number of visits javascript from the JavaScript Source - thanks
if you use this script, amend the variable names' prefix from pt_ to something meaningful to your site

Page last updated 12th Mar 2005