WEB MAPPING API PRACTICAL

Technological Infrastructures for GIS

Week 8

WEB MAPPING API PRACTICAL

This practical explores the URL-based APIs to various web mapping services and provides an introduction to the Document Object Model (DOM) and JavaScript. We briefly then look at accessing a full-blown WMS over the web and using our new-found JavaScript skills to control this.

1. Creating an HTML Form Building a simple HTML page containing a single form, used to gather user-input necessary to drive the web mapping engine.

2. Adding JavaScript Making our page do something useful with JavaScript.

3. Web Mapping Using the Streetmap API to give the form mapping capabilities.

4. Adding a Zoom Facility Using the ability of Streetmap to change to different map scales.

5. Journey Routing Using Google Maps to go shopping.

6. WMS ? A full-blown Web Mapping Service in our JavaScript page Going beyond APIs in the address bar ? a full WMS within our actual page via JavaScript.

7. References Sources of further information worth looking at.

means something for you to do or a key point to note () shows an example (not compulsory but try if you wish) or an additional point to note

Targets

Create HTML forms to accept user input within a web browser Use and exploit the functionality of URL-based APIs provided by a range of web mapping

services Understand the concept of using JavaScript to interact with the DOM Realise the flexibility of this approach (client-side scripting via JavaScript) Learn how to build web applications combining the use of HTML, JavaScript and the DOM

By the end of today you should have:

Created a simple yet powerful web-mapping system with real-world application

Page 1 of 9

BMG, OM

Technological Infrastructures for GIS

Week 8

1 Creating an HTML Form

First create an HTML page, using and the , , , and tags to make a page with an appropriate title. This will be a client-side HTML web page, and this week all scripting code will be stored within the web page and run within the web browser) therefore you could in theory save this wherever you like in e.g. your home directory. You might however like to save the file in your public_html folder as normal, and thus allow people to easily see it over the web ? but perhaps in a suitable subdirectory. Add any other text and tags that you might feel are necessary.

Open a web browser and open your file (you can drag and drop or press Ctrl+O) to test it. Alternatively you can view across the web as a page instead of opening the file in a browser (this will allow you to test on Linux and also remotely in Windows/Mac browsers). This week everything will take place within a single web page however in future we will combine both client-side Javascript running locally in the web browser with server-side Python on Linux.

Next you need to add a to your page ? this is where the user can input information. Add the following HTML. You can download code from the related lab demos web page.

Easting: Northing:

Normally a sends its contents down to a server(-side) CGI script specified in the action attribute. However, today we are going to do everything locally in JavaScript, therefore we have no action defined. You may wish to add some further formatting to make the form look pretty (for example, you can position the form elements within a table to line them up).

Easting:

Northing:

(You don't have to do this as a table just now if you don't want to!)

Try reloading or refreshing your page. This is usually achieved with the Reload/Refresh button or F5. If necessary hold down Ctrl and press F5 to force a hard refresh where the page is reloaded directly from the server rather than the browser's local cache). Macs are usually Cmd+R to refresh or Cmd+Shift+R to hard refresh ? but do check for your browser.

Now test the HTML form again. It shouldn't do much yet because we haven't added the necessary JavaScript needed to process it. Let's add this next.

Page 2 of 9

BMG, OM

Technological Infrastructures for GIS

Week 8

2 Adding JavaScript

The JavaScript traditionally needs to be placed in the header of the HTML ? though this has been relaxed in recent years; for now though it looks neater if you put it after the .

function DoStuff(form) {

xCoord = form.xcoord.value + "000"; yCoord = form.ycoord.value + "000"; alert ("X Co-ord: " + xCoord); }

The JavaScript is delimited by a tag. It comprises one function, which we've called (for now) DoStuff. The function does the following (note specific spelling each time!):

? 1) Sets a variable xCoord to be the contents of the xcoord field in your form (using the DOM object form.xcoord.value i.e. the value in the xcoord field on the form). It adds three zeros on the end such that coordinates can be entered in kilometres. Note: JavaScript variables are named using camelCase (or are said to be intercapped). ? 2) It does the same for the yCoord ? 3) It then displays the xCoord embedded in an appropriately formatted text string

a) Try the form again. What does it do?

...........................................................................................................................

The reason it still does nothing is because we have nothing to trigger the JavaScript with. To do this we need the following tag attribute:

onClick="DoStuff(this.form)"

b) Where do you think it should go? Remember it is needed to trigger the form. What do you do to trigger the form? What does the form then do, once this is added?

...........................................................................................................................

c) To see JavaScript errors you need to open the JavaScript or Web Console. This can be found via Tools Browser Tools Web Developer Tools (Firefox) or ... More Tools (Web) Developer Tools or similar from the menus (though it may first need enabled in Safari). Alternatively such tools can be reached usually by pressing F12 or Ctrl+Shift+I, (or, on Mac, Option + Cmd + I) in most main web browsers. Can you extend the alert statement in the JavaScript to display the yCoord too? Format your output to be user-friendly!

...........................................................................................................................

d) Before we go any further, it might be wise, again to promote user-friendliness, to restrict the number of characters which can be typed into the coordinate fields on your form. Use size or maxlength. What does each do?

...................................................................................................................................................

Page 3 of 9

BMG, OM

Technological Infrastructures for GIS

3 Web Mapping

() This diagram to the right shows the British National Grid with each of the 100 km squares. For our purposes, we are interested in the distances in km from the origin, which will give you approximate coordinates of other places to type into your web page.

Week 8

e) OK, now to doing something with a map. We will add a custom map using streetmap.co.uk by including two further lines of JavaScript listed below. Where in the file should these go?

........................................................................................................................................

url = "" + xCoord + "&y=" + yCoord + "&z=140"; this.location.href = url;

The first line makes up a URL for Streetmap incorporating the xCoord and yCoord (that we defined earlier) within the API structure (&x=, &y=, etc. ? the ampersand signifies a parameter taking one of our variables as its argument). The second line is another DOM object property, but this time we are setting it (with the url), rather than receiving information from it.

Your form should now result in a map when clicked! If a Streetmap page appears, but no map, perhaps your coordinates are outside the area for which mapping is available. Try 350 and 530 for something suitable that is easy to remember.

f) Now let's try changing a few things.

i) First try changing the mapping from 1:250K Collins Bartholomew to 1:50K Ordnance Survey. To do this you can simply change the zoom level. "&z=140" gives Collins Bartholomew 1:250k mapping, while "&z=120" gives Ordnance Survey 1:50k mapping.

ii) Now try turning the red arrow off. Add "&ar=n" to the URL string to do this.

iii) The alert box is now a bit of a nuisance, turn it into a comment to stop it executing (referred to as "commenting out") by preceding the line with //

Page 4 of 9

BMG, OM

Technological Infrastructures for GIS

Week 8

g) It is also perhaps better that the map appears in a different browser `window' (or browser tab in modern browsers). To do this, replace:

this.location.href = url;

with another DOM object:

window.open(url);

h) Try your page again. Now try using your form repeatedly a few times (i.e. go back to your form without closing any other windows or tabs). What happens each time?

...........................................................................................................................

...........................................................................................................................

i) This can be a bit of a nuisance and can historically be solved by giving the `window' a name:

window.open(url, 'MyStreetmap');

() To allow browsers to open new proper windows (i.e. instead of tabs) you likely need to specify a size for your windows (see below). The end user may be able to control browser settings to enable new windows instead of tabs, e.g. in Firefox, (and where these settings are not restricted by system administrators) however you should not assume or rely on this as this is beyond your control as a developer. Note: Sized windows may also need named!

j) You can add further parameters to the window.open method to modify the new window's size and positioning (e.g. width=600, height, top, left) as well as its characteristics (resizeable=no, toolbar, scrollbars, status). Look up window.open in Google for further information. Try out some of these attributes e.g.:

window.open(url, 'MyStreetmap', 'width=800,height=600,scrollbars=yes');

You may notice in general that with no attributes set the window simply takes all the properties of the 'mother' window. As soon as you explicitly set one attribute however you may have to explicitly set other attributes too in order to restore previous desired behaviours.

Page 5 of 9

BMG, OM

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download