Friday, September 2, 2011

Spatial Wiki 10 - Install OpenLayers

This is Part 10 of a series of posts on creating a SpatialWiki.  Previously we Installed GeoServer and started serving a layer of Wiki points.  In this article we'll install OpenLayers and finally put our first map in the Wiki.  OpenLayers in a JavaScript mapping API that will enable us to combine our Wiki points with other layers such as a Google or Bing maps background.

Installing OpenLayers

Installing OpenLayers basically consists of downloading and unzipping the desired version in an appropriate folder.  Download links are here:

http://trac.osgeo.org/openlayers/wiki/HowToDownload

In this example I'm going to download and install OpenLayers in the /var/www (default web) folder, and I'll pull OpenLayers 2.11 rc3 which fixes a nasty issue with a data copyright popup in version 2.10.  The complete sequence to download, uncompress, and clean-up is:
cd /var/www
sudo wget http://openlayers.org/download/OpenLayers-2.11-rc3.tar.gz
sudo tar -zxvf OpenLayers-2.11-rc3.tar.gz
sudo rm OpenLayers-2.11-rc3.tar.gz

Configure MediaWiki for raw HTML

Before we can add a map to a wiki page we need to enable raw HTML (and JavaScript) support in the wiki.  This is done like with most MediaWiki settings by editing the LocalSettings.php file associated with the wiki.  In our case this is /etc/mediawiki/LocalSettings.php so we'll edit it with:
sudo vi /etc/mediawiki/LocalSettings.php

Goto the bottom of the file and add the following lines:
//Allow raw embedded html
$wgRawHtml=true;

Save the file and restart Apache just to be safe.
sudo /etc/init.d/apache2 restart

Adding a Map to a Wiki Page

With OpenLayers installed and the wiki setup to support HTML and JavaScript we just need to add the code to a wiki page to show the map. The formatting is not great, but for example as shown below.  To edit a wiki page just click the Edit menu option at the top of the wiki page.
<html>
<head>
<!-- add OpenLayers and Google Maps APIs -->

<link rel="stylesheet" href="http://[your server address]/OpenLayers-2.11-rc3/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://[your server address]/OpenLayers-2.11-rc3/theme/default/google.css" type="text/css"><script src="http://[your server address]/OpenLayers-2.11-rc3/lib/OpenLayers.js"></script><script src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"></script>
<script type="text/javascript">

//
// ----- setup map options, it is VERY important to set the maxExtent to get the GeoServer WMS
//       data to overlay properly
//
var options = {
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
maxResolution: "auto",
projection: new OpenLayers.Projection("EPSG:900913"),
units: 'm'
};
var map;

//
// ----- function to initialize the map
//
function init()
{
//
// ----- create map and add layer switcher control
//
map = new OpenLayers.Map('map', options);
map.addControl(new OpenLayers.Control.LayerSwitcher());
//
// ----- setup Google Maps layers
//
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN}
);
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 20}
);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
);
//
// ----- setup wikipts layer, this is coming from our GeoServer server
//
var wikipts = new OpenLayers.Layer.WMS(
"Wiki Points",
"http://[your server address]:80/geoserver/spatialwiki/wms",{layers: 'spatialwiki:wikipts', format: 'image/png', transparent: true},
{isBaseLayer: false}
);
//
// ----- add layers to the map
//
map.addLayers([gphy, gmap, ghyb, gsat, wikipts]);
//
// ----- set map center
//       Google.v3 uses EPSG:900913 as projection, so we have to transform our coordinates  
//       longitude 12.0 latitude 20.0 zoom 2 for decent looking world map
//
map.setCenter(new OpenLayers.LonLat(12.0, 20.0).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 2);
}

</script>
</head>
<body onload="init()">
<!-- setup space for the map on the page -->
<div id="map" style="width:100%;height:400px;"></div>
</body>
</html>

When complete the wiki page with the imbedded map showing the locations of FOSS4G meetings (test points) should look like the example below. Finally after lots of installation and setup we're starting to get someplace!






















Showing the Current Location (optional)

As the cursor tracks across the map you can add a readout that shows the current latitude-longitude coordinates by adding a mouse event handler to the JavaScript map code and a corresponding <div> section to the HTML.  The <div> is where the coordinate display will be written to.  For example, add to  the JavaScript:
//
// ----- mouse position in lat-long, gets written to the &amp;quot;coords&amp;quot; div in the html file
//
map.events.register(&amp;quot;mousemove&amp;quot;, map, function(e) { 
 var position = this.events.getMousePosition(e);
 var lonlat = map.getLonLatFromPixel(position);
 lonlat = lonlat.transform( 
      new OpenLayers.Projection(&amp;quot;EPSG:900913&amp;quot;), 
      new OpenLayers.Projection(&amp;quot;EPSG:4326&amp;quot;) 
    );
 var longitude = lonlat.lon.toFixed(4);
 var latitude = lonlat.lat.toFixed(4);
 OpenLayers.Util.getElement(&amp;quot;coords&amp;quot;).innerHTML = 'lon=' + longitude + ', lat=' + latitude;
});

Then add the <div> section to the HTML:
<div id="map" style="width:100%;height:400px;"></div>
<div id="coords"></div><p>

In this case the coordinates will be displayed outside the lower-left corner of the map:









See the next article on Editing Wiki Pages.

posted by cokrzys @ 11:06 AM   0 Comments

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home