Introduction

The goal of this project is to use freely available web service layers to create a map showing areas of mineral deposits across Canada. The mineral deposit areas will then be examined to see which one meets the criteria of the client (mineral extraction and mine development company), depending on factors and constraints of the mineral ore location. Factors such as proximity to cities, water, roads and overall terrain of the mineral ore will be assessed to facilitate an ideal location for the client to start mine development. The Web Map Service (WMS) layers from Geopole.org servers will be added to OpenLayers (base) which is an open source JavaScript library for displaying map data in web browsers. OpenLayers provides an API for building rich web-based geographic applications similar to Google Maps.[#_ftn1 [1]] The methods outlined in this tutorial will showcase and explain the HyperText Markup Language (HTML) code behind the web map showing the mineral deposit sites across Canada.

The primary benefit of this project is further integration of web service layers and open source software to produce map specializing on a certain criteria or requirement. All the layers used are freely available on the internet and can be assessable to anyone for further analysis. The source code behind the map will be looked at and explained for each feature on the displayed map.

Objective

1. To add freely available WMS layers on to Openlayers in order to visually see the locations of the mineral sites and to facilitate an ideal location for the client to start mine development.

2. To assess and explain the HTML code behind the map.

Data and Mapping Tools

OpenLayers

OpenLayers is a pure JavaScript library for showing map data in web browsers, with no server-side reliance. OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, markers, and WMS layers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. OpenLayers is completely free, Open Source JavaScript, released under a BSD-style License. [#_ftn2 [2]]OpenLayers library can be downloaded from openlayers.org and is required for accurate portrayal of the map features.

WMS Layers

WMS is a standard protocol for serving georeferenced map images over the Internet that are generated by a map server using data from a GIS database. The specification was developed and first published by the Open Geospatial Consortium in 1999.[#_ftn3 [3]] Many WMS layers were used in the making of the web based map via WMS. Web services such as WMS and WFS layers have many advantages over traditional methods of acquiring data. Web services offer numerous benefits over other distributing services, such as:

·Interoperability - Web Services normally work outside of private networks, offering an alternative route to solutions for developers. Since its non-proprietary, services developed have a longer life-span. Web Services is flexible in terms of letting the developers use the preferred programming languages. In addition Web Services are nearly platform-independent.

Usability – Web service applications give you the freedom to choose the Web Services that you need. This permits you to develop services and/or client-side code with the languages and tools of your choice.

Reusability - This makes it simple to reuse Web Service components in other services.

Deployability - Web Services are arranged on standard Internet technologies. Web Servers can be deployed to servers on the Internet on the other side of the globe.

Cost Saving – Most of the time the data is freely available or very economical compared to other methods.[#_ftn4 [4]]

WMS layers were used for the base layer of the map (only one can be selected at a time) and WMS overlays of the mineral deposit sites were added on top of the base layer WMS. The following WMS were used as base layers:

OpenLayers Base Layer – Source URL: http://openlayers.org/api/OpenLayers.js

Google Hybrid – Source URL: http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1IJ-Zyyw

Yahoo – Source URL - http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers

Virtual Earth – Source URL - http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1

The following WMS were used as overlays layers (all from the geopole.org):

Vanadium & Titanium Deposits – Source URL - http://apps1.gdr.nrcan.gc.ca/cgi-bin/canmin_en-ca_ows?

Gold Deposits – Source URL - http://apps1.gdr.nrcan.gc.ca/cgi-bin/canmin_en-ca_ows?

Uranium Deposits – Source URL - http://apps1.gdr.nrcan.gc.ca/cgi-bin/canmin_en-ca_ows?

Molybdenum Deposits – Source URL - http://apps1.gdr.nrcan.gc.ca/cgi-bin/canmin_en-ca_ows?

The study area (Canada) and the WMS layers used can be seen in the following image.

[[Image:]]

Methods

HTML Basics

HTML stands for HyperText Markup Language, is the main markup language for web pages. A markup language is made up of markup tags, and these markup tags are used to describe webpage.[#_ftn5 [5]] In general, all HTML documents have the following format:

<html> <head> <title> Here is the title of the HTML document. </title> <meta name=" " content=" " /> ... (there may be one or more meta tags) </meta> </head> <body> Here is the body of the HTML document. </body> </html>

Purpose of each Tag:

<html> Used to specify that this is a HTML document. Most HTML documents should start and end with this tag.

<head> Used to specify the header section of the HTML document, which usually contains the <title> and <meta> tags, and is not showed in the main window of the browser.

<title> Used to specify the title of the HTML page. The title is what is shown on the upper left corner of the browser when it is viewed on a web page.

<body> Everything inside the <body> tag (except those within the <script> tag) is showed on the browser inside the main browser window.[#_ftn6 [6]]

OpenLayers Basic

Simple Example

<html>

<head>

<title> Simple Example </title>

<body>

map = new OpenLayers.Map("SimpleMap");

map.addLayer(new OpenLayers.Layer.OSM());

map.zoomToMaxExtent();

</script>

</body>

</head>

</html>

Create a file called SimpleExample.html and copy the above code. Save the file then open it in your browser. You should see the following map:
[[Image:]]

Line 1 and 2 begin the HTML document and start the HEAD section of the SimpleExample.html page (since this is a simple example, we will place all our scripts in the body and leave the head section blank).

Line 3 to Line 5 of the code above, specifies the title of the page at the top left corner (the title is in between the two title tags).
Line 6 is the start of the body section and Line 7 will create a div with the id of SimpleMap which the OpenLayers Map object will render to later on in the code.
Line 8 points to the OpenLayers library. The OpenLayers library must be included before you try to use OpenLayers code or features (the code depends on the OpenLayers library and without it the code wouldn’t work correctly).
Within Line 9 to Line 13 is the script to display the map within the body of the HTML. Line 10 is using the SimpleMap object earlier declared above. The earlier empty map variable is assigned to an OpenLayers map object. A global variable called "map" will act as our map object, which will hold the OpenLayers map itself. Line 11 adds the newly defined layer to the map. Line 12 specifies the map extent to display (default function in the OpenLayers library).
Line 13 to line 15, is the closing of the body, head and html sections.

This is all that is required to get a map up and working. This is a simple basic map without the use of many controls, layers, and options that is available in OpenLayers. Some of these features will be used in the mapping of the mineral deposit locations across Canada map in the next section.

The Mineral Deposits Location Map

The following HTML code was used in producing the Minerial Deposits Sites Across Canada Map. The actual code for producing the map is complemented with step by step statements describing each part of the code and its purpose (statements starting with ).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Minerial Deposits Across Canada</title> <style type="text/css">

{ margin-top: 0px; margin-bottom: 0px; margin-left: 10px margin-right: 10px; height: 98%; width: 99%; background-color: #dddddd; }

h1 { background-color: transparent;

   	color: black;

font: bold 100% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; border-bottom: 1px solid #3300ff; } p { margin:0px; padding:0px; color: black; }

{ width: 100%; height: 93%; border: 1px solid black; }

</style>

   map = new OpenLayers.Map('map');

   var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",

"http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });

   var google = new OpenLayers.Layer.Google("Google Hybrid",

{ type: G_HYBRID_MAP });

   var ve = new OpenLayers.Layer.VirtualEarth("Virtual Earth");

var yahoo = new OpenLayers.Layer.Yahoo("Yahoo");

   var v_wms = new OpenLayers.Layer.WMS("Vanadium & Titanium Deposits",

"http://apps1.gdr.nrcan.gc.ca/cgi-bin/canmin_en-ca_ows?", { layers: "GSC:CAN_VTiDeposits", transparent: "true"}, { isBaseLayer: false, visibility: false });

   var gold_wms = new OpenLayers.Layer.WMS("Gold Deposits",

"http://apps1.gdr.nrcan.gc.ca/cgi-bin/canmin_en-ca_ows?", { layers: "GSC:CAN_AuDeposits", transparent: "true" }, { isBaseLayer: false, visibility: false });

   var uranium_wms = new OpenLayers.Layer.WMS("Uranium Deposits",

"http://apps1.gdr.nrcan.gc.ca/cgi-bin/canmin_en-ca_ows?", { layers: "GSC:CAN_MoDeposits", transparent: "true" }, { isBaseLayer: false, visibility: false });

   var molybdenum_wms = new OpenLayers.Layer.WMS("Molybdenum Deposits",

"http://apps1.gdr.nrcan.gc.ca/cgi-bin/canmin_en-ca_ows?", { layers: "GSC:CAN_UThDeposits", transparent: "true" }, { isBaseLayer: false, visibility: false });

   map.addLayers([wms, google, ve, yahoo, v_wms, gold_wms, uranium_wms, molybdenum_wms]);

map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

   map.addControl(new OpenLayers.Control.LayerSwitcher());

   //map.addControl(new OpenLayers.Control.PanZoomBar());

   map.addControl(new OpenLayers.Control.MousePosition());

}

</script>

</head> <body onload="init()">

Mineral Despoits Throughout Canada

Mineral Location Sites On Base Layers From Multiple Commercial Map Image Providers.

<a href=http://www.milonic.com/>JavaScript Menu Courtesy of Milonic.com</a>

<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	Site Utility
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/printer_version.gif" width="14" height="10" alt=""> <a href="/en/software/os/i_love_wiki/index.mpl?print=1&">Printer version</a> <img border="0" src="/images/flag_italy.gif" width="14" height="10" alt=""> <a href="/it/software/os/i_love_wiki/index.mpl?">Leggilo in italiano</a> <img border="0" src="/images/stats.gif" width="14" height="10"> <a target="_blank" href="/cgi-bin/perl/awstats/awstats.pl?lang=en">Site stats</a> <img border="0" src="/images/stats.gif" width="14" height="10"> <a href="/phpBB2/index.php">Read forums</a> <img border="0" src="/images/sitemap.gif" width="14" height="10"> <a href="/sitemap.mpl">Site map</a>

<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	Ads by Google
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<script type="text/javascript"></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/chat_with_me.gif" width="27" height="16"> Chat with me
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	My nickname is emi but now I am offline. However you can usually find me on these channels of the <a href="http://www.azzurra.org/">Azzurra</a> networks: <a href="irc://irc.azzurra.net/areanetworking">areanetworking</a>, <a href="irc://irc.azzurra.net/telug">telug</a>, <a href="irc://irc.azzurra.net/controguerra">controguerra</a>, <a href="irc://irc.azzurra.net/webgui">webgui</a>, <a href="irc://irc.azzurra.net/geeks">geeks</a>, <a href="irc://irc.azzurra.net/pescaralug">pescaralug</a>

<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	Credits
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
	<a href="http://www.masonhq.com/">Mason</a> All this website has built using Mason. Without this language derived from Perl, most of the tools used for the manage of this site would never been developed. <a href=http://www.milonic.com/>JavaScript Menu</a> The great menu at the top of this page.

 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

<img border="0" src="/images/1x1.gif" width="1" height="1" alt="">
Copyright© 1997-2006 Emiliano Bruni	Online from 16/08/1998 with <img src="/cgi-bin/c/Count.cgi?ft=0&df=ebruni.it.dat&comma=T&md=8&pad=T&dd=verdana" alt="" align="bottom"> visitors	Write me to: <img border="0" src="/images/mail.gif" width="77" height="10" align="baseline">

</body> </html>

The code above was used to produce the following map:

[[Image:]]

There is an option of 4 different base layers. The options can be seen on the map above. The overlay layers can be selected or deselected based on what mineral deposit the client is interested in. The map can also be zoomed in and moved around, to the areas of interest using the controls on the top left of the map.

CSS stands for Cascading Style Sheets. CSS is an advance in Web design because it permits developers to organize the style and layout of numerous Web pages all at once. As a Web developer you can characterize a style for each HTML component and relate it to several Web pages. To make a global change, the style is changed, and all elements in the Web are updated automatically. CSS was used to develop the map layout seen above.

Final Map

The final map shows mineral deposit sites across Canada. The minerals are broken up into four groups (four different layers) of which the client can choose which to display on the map. The use of base layers from multiple commercial map image providers helps integrate different aspects and view of point. For instance the OpenLayers base layer is simple and not detailed which can be used to assess the overall distribution of the mineral deposit sites across Canada. The other three base layers, can be used to assess mineral deposit sites around a specific area or to calculate the proximity to cities, water and roads since the detail of the map increases with zoom. This is essential in determining which site is most suitable in regards of lower infrastructure cost.

The first map shows a zoomed in area around Whitehorse using OpenLayers as a base layer. For zoomed in areas, the OpenLayers base layer is useless since no detail is added such as major roads, city features and the basic change in terrain. Using the same extent but with a google or yahoo base layer, much more detail regarding the terrain and the physical features around the city can be seen. The client can now view the mineral deposit sites from different viewpoints and can obtain information on the terrain, physical and urban features by just switching the base layer.

[[Image:]]

[[Image:]][[Image:]]

The produced web map using web services shows mineral deposit sites in Canada. The final maps will show all the suitable locations to mine according to the criteria of reducing infrastructure cost. The recommended sites can then be used for exploration and further analysis. This will help the mining company limit the exploration of mineral deposits to only the recommended sites instead of exploring all the sites which will reduce time, money and resources used for exploration. This method goes against traditional mining practices where infrastructure costs are one of the last steps before a decision is made. By making the infrastructure expenditure one of the first steps, the mining company can save money, time, and limit to sites that are more easily assessable than others. This tutorial shows how freely available WMS layers and open source web mapping API, OpenLayers, can be used to generate maps for suitable mineral extraction and mine development locations on the criteria of lowing infrastructure costs.

Resources[#_ftnref1 [1]]

http://en.wikipedia.org/wiki/OpenLayers[#_ftnref2

[2]] http://openlayers.org/[#_ftnref3
[3]] http://en.wikipedia.org/wiki/Web_Map_Service[#_ftnref4
[4]] http://www.w3.org/2003/Talks/0317-ws-intro/slide16-0.html[#_ftnref5
[5]] http://en.wikipedia.org/wiki/HTML[#_ftnref6
[6]] http://html-codes.1keydata.com/html-basic-tags.php

Displaying Mineral Deposit Locations Across Canada using Web Services

Contents

Introduction

Objective

Data and Mapping Tools

OpenLayers

WMS Layers

Methods

HTML Basics

OpenLayers Basic

The Mineral Deposits Location Map

Mineral Despoits Throughout Canada

Final Map

Navigation menu

Page actions

Page actions

Personal tools

Navigation

Search

Tools