Spatial Wiki 13 - Testing and Template Modifications

This is lucky post number 13 in setting up a Spatial Wiki and we're pretty much done, just need to do some testing and tweaks to the Coord template.  See also the Extension:SpatialWiki Documentation for details on the options that the extension adds to MediaWiki.  For example, to begin with we'll display a map centered on the FOSS4G Conference in Denver, CO that's 400 pixels wide and 300 pixels tall by adding the following markup to a wiki page:

{{ #SpatialWikiMap: 39.741850 | -104.988790 | 15 | 400px | 300px | true }}

The map in the wiki page will look like this:

The final "true" parameter in the SpatialWikiMap tag means include points for the spatially referenced articles.  We've not setup a proper spatially referenced article for the FOSS4G meeting, but the point is coming from the test data we loaded into our database.  It's clickable and a popup comes up with the name, but there is not a valid link to an article.

Displaying maps is only part of the problem, the first part was spatially locating an article, writing the coordinates to our spatial database, and displaying a map for that article.  We'll accomplish this by modifying the Template:Coord to look like this:

{{ #SpatialWikiMap:{{{1|12.0}}} | {{{2|20.0}}} | 10 | 507px | 350px | true | true }}

{| border="0" cellpadding="4" cellspacing="0" style="border:0px solid darkgray;"
! width="500px"|
|- 
| valign="top" style="background:#e4f7dd; border-style: solid; border-width: 1px 0 1px 0; border-color:darkgray"| {{PAGENAME}}: Latitude {{{1|0.0}}} Longitude {{{2|0.0}}}, Type {{{3|Undefined}}}
|}

This modified template will do two things, displaying a map for the location of the article with a nicely formatted box below it showing the location details. Let's try it by creating a new article for the Wyknkoop Brewery calling the template with:

{{Coord|39.7534|-104.9985|Test}}

The Wynkoop Brewery page will thus look like:

Finally, go back to the main page and setup the map insert like this:

{{ #SpatialWikiMap: 12.0 | 20.0 | 2 | 100% | 400px | true }}

The final Spatial Wiki homepage has clickable locations of the spatially referenced articles as shown below. The spatial references as they are added or modified are written in real-time to the backend spatial database via the Extension:SpatialWiki for MediaWiki.

Spatial Wiki 12 - Install SpatialWiki Extension

The last part to complete our Spatial Wiki is to install the SpatialWiki Extension for MediaWiki.  This extension has been developed as part of this exercise, and allows you to store spatial references from a wiki page in the PostGIS database, and to display clickable maps of spatial locations in a wiki page.  Install the extension as follows:

cd /var/lib/mediawiki/extensions
sudo apt-get install subversion
sudo svn checkout svn://svn.code.sf.net/p/spatialwiki/code SpatialWiki

This installs the files in the folder /var/lib/mediawiki/extensions/SpatialWiki.  The next step is to add the extension and it's configuration parameters to LocalSettings.php.

sudo vi /etc/mediawiki/LocalSettings.php

Add the following lines at the end:

#
# ----- SpatialWiki Extension
#
require_once("$IP/extensions/SpatialWiki/SpatialWiki.php");
$wgSpatialWikiDebugMessages = false;
$wgSpatialWikiDatabase = "spatialwiki";
$wgSpatialWikiUsername = "postgres";
$wgSpatialWikiPassword = "[your password]";
$wgSpatialWikiPointsTable = "wikipts";
$wgSpatialWikiOpenLayersPath = "http://[your server]/OpenLayers-2.11-rc3";
$wgSpatialWikiWmsPointsUrl = "http://[your server]:80/geoserver/spatialwiki/wms";
$wgSpatialWikiGeoServerPointsLayer = "spatialwiki:view_wikipts";

Modify the parameters to match your installation, then open the wiki in a web browser and goto Special Pages and find the "Version" page to verify that the extension is installed properly. You should see something like this:

With the extension installed go back to the main page of the wiki and edit the page, removing all the custom HTML and JavaScript and replacing it with:

{{ #SpatialWikiMap: }}

This is a tag for the simplest map that can be added to a page, and will produce a page like:

Goto the next article on Testing and Template Modifications.

Spatial Wiki 11 - MediaWiki Markup and Templates

This is part 11 of a series of blog posts on building a Spatial Wiki.  At this point we have the wiki and parts of the spatial backend in-place, but before we continue it would be good to go through some of the markup and templating capabilities in MediaWiki.  Amongst other things templates allow you to collect and display information in a consistent manner so we'll setup and use a template to manage the geographic reference for an article.  We won't use the official Wikipedia templates, but what we'll do will be based on the standard Coord template in Wikipedia so our information and procedures will be compatible with Wikipedia.  The notes below include some brief (very brief) information on MediaWiki markup, and walk through setting up a Coord template for our use.

A great overall reference for MediaWiki that is great to get started with is MediaWiki (Wikipedia and Beyond) by Daniel Barrett.

Editing in MediaWiki

To edit in MediaWiki just select the "edit" option at the top of the page.  Each page should be thought of as an article in the Wiki and you will be editing the contents of that article.  Editing is typically via a straight-forward text editing window, and you can enter straight text or use special characters for markup to get bold, underlines, larger titles, etc.  There are loads of on-line references for the MediaWiki markup syntax, for example see the MediaWiki article in Text Formatting.  Another great reference is to view the source for an article in Wikipedia, it's all there, and since Wikipedia is powered by MediaWiki the markup is the same.

Note also the "history" tab at the top of each article.  Wiki articles are stored in a database along with a complete version history so you can use the History tab to track changes and go back to previous versions if needed.

Creating a New Article

There are various ways to create a new article, but one of the easiest and best ways is to start with a reference to the new article on an existing page.  A lot of the value in a Wiki is the internal links to related articles so it's a good idea to "ground" anything new with something existing.  References (links) to other articles are enclosed in double square brackets so you might have something like [[Great New Article]] that would be a link to an article titled "Great New Article."  For demonstration purposes I'll create a reference to an article about the Etta Pegmatite which is a somewhat famous (limited circles) mine near Mt. Rushmore in South Dakota.  The article link on the main page is [[Etta Pegmatite]].  It will be displayed in red indicating that it doesn't exist and when I click on it I will be able to create the new article.

Creating a Template

Templates are a special type of page that can be used to display the same information in multiple locations, or to enforce formatting standards for specific information.  In our case we'll create a template called Coord that will manage the spatial reference in a wiki page.  To create the template type Template:Coord in the search box and hit Go.  Since the page doesn't exist MediaWiki will ask it you want to create it ... yes.  This is another way to create new wiki pages.  On the new Template:Coord page add the text/markup:

{| border="0" cellpadding="4" cellspacing="0" style="border:0px solid darkgray;"
! width="600px"|
|- 
| valign="top" style="background:#e4f7dd; border-style: solid; border-width: 1px 0 1px 0; border-color:darkgray"| Latitude {{{1}}} Longitude {{{2}}}, Type {{{3|Undefined}}}
|}

This is markup to create a table that is 600 pixels wide with a green background and a horizontal like along the top and the bottom. The table will contain text for the latitude, longitude, and point type. These are referenced as parameters that are passed into the template, for example {{{2}}} is the second parameter and refers to the longitude.  When you save the template it will look like this:

Using the Coord Template

To use the new Coord template specify the template name and include the parameters latitude, longitude, and point type separated by a | character.  For example in the article on the Etta Pegmatite I have:

The Etta Pegmatite is near Keystone, South Dakota.

{{Coord|43.8810|-103.4165|Pegmatite}}

This will then be displayed as shown on the article:

So far the template is "dumb" and other than display the coordinate reference nicely formatted it doesn't do anything.  In the next article we'll install an extension to extract the geographic reference and add it to the spatial database.

See next article on Installing the SpatialWiki Extension.

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 "coords" div in the html file
//
map.events.register("mousemove", map, function(e) { 
 var position = this.events.getMousePosition(e);
 var lonlat = map.getLonLatFromPixel(position);
 lonlat = lonlat.transform( 
      new OpenLayers.Projection("EPSG:900913"), 
      new OpenLayers.Projection("EPSG:4326") 
    );
 var longitude = lonlat.lon.toFixed(4);
 var latitude = lonlat.lat.toFixed(4);
 OpenLayers.Util.getElement("coords").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.

Spatial Wiki 9 - Add PostGIS Layer to GeoServer

This is Part 9 on building a Spatial Wiki, we've just Installed GeoServer and we're ready to add a new layer in GeoServer that serves up points from our PostGIS Database.

To get started login to the GeoServer web interface with something like:

http://[your server]/geoserver/web

Or if you're operating with port 8080 then use:

http://[your server]:8080/geoserver/web

From the GeoServer main screen use the option to create a new Workspace called "spatialwiki" and associate it with a URI also named spatialwiki.  In general we'll be creating a Workspace that contains a database connection called a Store (data), and a Layer with symbology that references data in a particular  Store.

After creating the Workspace select the option to create a new Store, this will be a connection to our PostGIS database.  Select the PostGIS connection type, just use the regular one, not the JNDI option.  Fill in the connection parameters, changing the workspace to the spatialwiki workspace that we just created. Use the postgres user to connect to the database.  Save the new Data Store.  When you create the data Store you will be forwarded to a screen to create a new layer with the Data Store or you can start a new layer using the Layers menu option on the left.

Either after creating a new Data Store, or via picking the Layers menu option and adding a new resource you can select the newly created spatialwiki:spatialwiki Workspace:Store and publish the view_wikipts view which is our previously created view that contains the points from our wiki.  You can use all the defaults when creating the layer, and you will have to click the options to calculate a native and lat-long bounding box from the data.  If you click the "Publishing" tab you can change the symbology for the points, the default is a small red box.

After creating the Layer select the Layer Preview menu on the left to preview the new layer in OpenLayers, or via KML or GML.  The test points of FOSS4G meeting locations are shown below in an OpenLayers preview.

See the next article on Installing OpenLayers.