View source for Displaying Mineral Deposit Locations Across Canada using Web Services

=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.&nbsp; 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 accessed by anyone for further analysis. The source code behind the map will be looked at and explained for each feature on the displayed map.

&nbsp;

=Objective=

&nbsp;

1.&nbsp;&nbsp;&nbsp; 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.&nbsp;&nbsp;&nbsp; To assess and explain the HTML code behind the map.

&nbsp;

=Data and Mapping Tools=
&nbsp;

==OpenLayers== 
OpenLayers is a pure JavaScript library for showing map data in web browsers, with no server-side reliance.&nbsp; 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 and released under a BSD-style License[2]. The 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.&nbsp;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 layers were used as base maps:

OpenLayers Base Layer – Source URL:&nbsp; [http://openlayers.org/api/OpenLayers.js http://openlayers.org/api/OpenLayers.js]

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

Yahoo – Source URL - [http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers 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 http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1]

&nbsp;

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

Vanadium & Titanium Deposits – Source URL - [http://apps1.gdr.nrcan.gc.ca/cgi-bin/canmin_en-ca_ows 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 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 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 http://apps1.gdr.nrcan.gc.ca/cgi-bin/canmin_en-ca_ows]?


The study area (Canada) and the list of (potentially displayed) WMS layers can be seen in the following image.

[[Image:map image.jpg|thumb|center|1100px|alt= Study Area.|Study Area. Canada ]]

=Methods=

I guess finding useful, reliable information on the internet isn't hpoeless after all.

==OpenLayers Basics==

Simple Example

&nbsp;

<nowiki><html></nowiki>

<nowiki><head> </nowiki>

<nowiki><title> </nowiki>Simple Example <nowiki></title></nowiki>

<nowiki><body></nowiki>

&nbsp; <nowiki><div id="SimpleMap"></div></nowiki>

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

&nbsp; <nowiki><script></nowiki>

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

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

&nbsp;&nbsp;&nbsp; map.zoomToMaxExtent();

&nbsp; <nowiki></script></nowiki>

<nowiki></body></nowiki>

<nowiki></head></nowiki>

<nowiki></html></nowiki>

&nbsp;
The following simple map is created by the HTML code above.

 [[Image:Simple Map.jpg|thumb|center|1000px|alt= Simple Map.|Simple Map ]]
# Create a file called SimpleExample.html and copy the above code. Save the file then open it in your browser.
#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.[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
    </h1>"
    #The subtitle under the main title is specified-->
    #p id="_shortdesc">Mineral Location Sites On Base Layers From Multiple Commercial Map Image Providers.
    #</p>

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

  </body> #End of body
 </html> #End of html



The code above was used to produce the following map:

[[Image:final image.jpg|thumb|center|1150px|alt= Final Map.|Mineral Deposit Locations Throughout Canada using OpenLayers as Base Layer ]]

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.[7] CSS was used to develop the map layout seen above.

&nbsp;

=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 point of view. 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 regard to lowering infrastructure costs. 

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:openlayers image.jpg|thumb|left|360px|alt= OpenLayers.|Mineral Deposits around Whitehorse using OpenLayers as Base Layer ]][[Image:yahoo image.jpg|thumb|right|360px|alt= Yahoo|Mineral Deposits around Whitehorse using Yahoo as Base Layer ]][[Image:google image.jpg|thumb|center|360px|alt= Google|Mineral Deposits around Whitehorse using OpenLayers as Google Layer ]]


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.[8] The tutorial showcased 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 sites based on the criteria of lowing infrastructure costs. This is an example of how the integration of web service layers and open source software can produce a map specializing on a certain criteria or requirement for a certain objective.

=Resources= 

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

[[Category:Tutorials]]