Using JavaScript in Templates

You can use JavaScript in your templates if your data needs more depth than HTML can provide.

Distances are returned in units used by the CRS CRS stands for Coordinate Reference Systems; they determine how geographical positions are projected onto 2D surfaces like paper or screen..

You can change these units in the templates using JavaScript functions (for instance if you want to show large numbers in kilometers/miles instead of meters.)

Advanced Template Concepts

The JavaScript shown on this page contains two conversion functions to format distances. These are:

{formatKilometres(Distance)}

{formatMiles(Distance)}

To use these functions a template will need to include either or both, of them as required:

{formatKilometres(Distance)}

Distances under 1000m are shown in meters rounded to the nearest metre.

Distances over 1000m are formatted as kilometers and shown to two decimal places.

{formatMiles(Distance)}

Distances under 100 yards are shown in feet, over 100 yards but less than 1 mile will be in yards rounded to two decimal places.

Distances over 1 mile will be miles rounded to two decimal places.

Example JavaScript file

Here is an example JavaScript file. Paste the contents into a new text file and save it as conversion_functions.js. Ensure the file is in the C:\inetpub\wwwroot\SISWebMap.0.xxxx.0\Script folder.

Note: It is important to use a .js extension for this file.

Tagging the JavaScript

Open map.aspx in Notepad or similar ASCII editor, this file is located in the C:\inetpub\wwwroot\SISWebMap.0.xxxx.0 folder.

Add the line of code below as shown in blue:

<%@ Page Title="" Language="C#" MasterPageFile="~/NoticeBoard.Master" AutoEventWireup="true" 
CodeBehind="NoticeBoard.aspx.cs" Inherits="NoticeBoard.NoticeBoard1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="script/noticeboard.js"></script>
<link href="css/normal.css" rel="stylesheet" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<%--    <script type="text/javascript" src="script/Chart.min.js"></script>--%>
<script src="script/conversion_functions.js" type="text/javascript" ></script>
</asp:Content>

Save map.aspx.

Modifying the Template

1. Open the template where the conversion function is to be used.
2. Enter the function name, either {formatKilometres(Distance)} or {formatMiles(Distance)} as required.

The following screens show both conversion functions; {formatKilometres(Distance)} used in the NOTICE_Education Primary (Further Education) template, and {formatMiles(Distance)} in the NOTICE_Education Secondary (Higher Education) template:

 

For this example the results will look like:

---