Displaying Mineral Deposit Locations Across Canada using Web Services

From CUOSGwiki
Jump to navigationJump to search

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.[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[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.[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[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.

Study Area.
Study Area. Canada

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.[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.

 

<meta> Used for the author of the HTML page to record information connected to the web page. Two common attributes are name and content.

 

<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>

  <div id="SimpleMap"></div>

  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>

  <script>

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

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

    map.zoomToMaxExtent();

  </script>

</body>

</head>

</html>

  

[[Image:]]
  1. 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:
  2. 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).
  3. 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).
  4. 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.
  5. 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).
  6. 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).
  7. Line 13 to line 15, is the closing of the body, head and html sections.[6]

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 #). 

#According to HTML standards, each HTML document requires a document type declaration. The "DOCTYPE" begins the HTML document and tells 
#a validator which version of HTML to use in checking the document's syntax. This declares the document to be XHTML 1.0 Strict which 
#is an XML version of HTML 4 Strict
<!DOCTYPE html PUBLIC"-// W3C//DTD XHTML 1.0 Strict//EN"" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
#Specifies the namespace to use (only for XHTML documents)
<html xmlns="http://www.w3.org/1999/xhtml">
#Start of the Head section
 <head>
#Defines the title of the document and defines a title in the browser toolbar
   <title>Minerial Deposits Across Canada
   </title>
#Tag code for CSS(explained after the code) style which will always start with <style type="text/css"> and will end with </style>. 
#Controls the style and layout of the Web page
   <style type="text/css"> 


#Specfy the margins , page size (percent) and background color of the html body
     html body
     {
     margin-top: 0px;
     margin-bottom: 0px;
     margin-left: 10px
     margin-right: 10px;
     height: 98%;
     width: 99%;
     background-color: #dddddd;
     }

#Defines the properties for a Heading (background-color, color, font and border)
     h1
     {
     background-color: transparent;
     color: black;
     font: bold 100% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
     border-bottom: 1px solid #3300ff;
     }
 #Defines text-align (margin, padding and color)-->
     p
     {
     margin:0px;
     padding:0px;
     color: black;
     }

 #Defines the properties of the map (width, height and border)-->
     {
     width: 100%;
     height: 93%;
     border: 1px solid black;
     }	

   </style>

#Map data scripts

  #Source script location of the Google WMS
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1I
J-Zyyw'></script>
  #Source script location of the Virtual Earth WMS-->
<script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>
  #Source script location of the Yahoo WMS-->
<script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>

  #This references the OpenLayers.js script on the Open Layers website-->
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>

  #This script is needed to perform projection transformations-->
<script type="text/javascript" src="http://proj4js.org/lib/proj4js-compressed.js"></script>

  #Sets the start location of the map (longitude,latitude and zoom level)-->
<script type="text/javascript"> 
var lon = -94.97368;
var lat = 59.66534;
var zoom = 4;

#Creates a global variable called "map" which will act as our map object, which will hold the OpenLayers map itself
var map;
# Creates a function called init without passing anything into the function
function init() {
#Using the map object declared above, the assigning of the previously empty map variable to an OpenLayers map object is made. Creates a new Open Layers map
   map = new OpenLayers.Map('map');

   #Creates a new OpenLayers WMS layer called wms-->
   {
   var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'});

} 

   #Creates a new Google layer using the type Hybrid called google-->
   var google = new OpenLayers.Layer.Google("Google Hybrid", {type: G_HYBRID_MAP});

   #Creates a new Virtual Earth Layer called ve-->
   var ve = new OpenLayers.Layer.VirtualEarth("Virtual Earth");
   
   #Create a new Yahoo Layer called yahoo-->
   var yahoo = new OpenLayers.Layer.Yahoo("Yahoo");

   #Create a new WMS overlay called (Vanadium & Titanium Deposits)
   var v_wms = new OpenLayers.Layer.WMS("Vanadium & Titanium Deposits", 
   #This is the URL of the WMS service
   "http://apps1.gdr.nrcan.gc.ca/cgi-bin/canmin_en-ca_ows?", 
   #This is a dictionary of options the Layer object uses to generate the layer. In this case, The " GSC:CAN_VTiDeposits" layer from 
   #the layers of the WMS service is called. The getCapabilities is used on the WMS url to view a list of all possible layers the WMS service
   { layers: "GSC:CAN_VTiDeposits", transparent: "true"},
   #This statement shows that the layer added is not a base layer but an overlay	
   { isBaseLayer: false, visibility: false });

   #Creates a new WMS overlay called (Gold Deposits)-->
   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 });

   #Creates a new WMS overlay called (Uranium Deposits)-->
   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 });

   #Creates a new WMS overlay called (Molybdenum)-->
   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 });

   #Adds the all the layers to the OpenLayers map-->
   map.addLayers([wms, google, ve, yahoo, v_wms, gold_wms, uranium_wms, molybdenum_wms]);

   #Centers the Open Layers map on the given coordinates-->
   map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); 
   #Adds the layer switcher control to the Open Layers Map (top right)-->
   map.addControl(new OpenLayers.Control.LayerSwitcher());	
   #Adds the zoom and movement control to the Open Layers Map (top left)-->
   //map.addControl(new OpenLayers.Control.PanZoomBar());	
   #Adds the mouse position coordinates to the Open Layers Map (bottom right)-->
   map.addControl(new OpenLayers.Control.MousePosition());



} # End init() function
</script> # End of the script

 </head> #End of the head
 #The body is loaded using the onload="init()" function
 <body onload="init()">
 
   #The main title on the top left corner of the webpage is specified
   #h1 id="_title"> Mineral Despoits Throughout Canada

" 

   #The subtitle under the main title is specified-->
   #p id="_shortdesc">Mineral Location Sites On Base Layers From Multiple Commercial Map Image Providers.

#

   #This tag is will be displayed in the map
   #div id='map'>

" 

 </body> #End of body
</html> #End of 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


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

Retrieved from "https://dges.carleton.ca/CUOSGwiki/index.php?title=Displaying_Mineral_Deposit_Locations_Across_Canada_using_Web_Services&oldid=839"