maps

OpenLayers

Native support for OpenLayers (which is related to OpenStreetMap) is new to Tiki7. Below are instructions about OpenLayers with previous versions.

Embedding OpenLayers in a Wiki Page

By using the HTML and Javascript plugins OpenLayers can be used with Tiki. Although it is not yet integrated into the system as Google Maps is, markers on an OpenLayers map can be linked to tracker items and wiki pages.

OpenLayers style sheets are included with a import statement. This works on Firefox and IE. The OpenLayers Javascript API is bought in via js file import by the JS plugin, as is the actual Javascript that defines the map.

Wiki Markup

Wiki markup to embed the OpenLayers Map

{HTML()}
<STYLE TYPE="text/css">
<!--
@import url(map/style/map_style.css);
-->
<!--
@import url(map/page_style.css);
-->
</STYLE>
{HTML}
{HTML()}<div id="map" class="smallmap"></div>{HTML}{JS(file="map/OpenLayers.js")}{JS}{JS(file="map/mfiglobal.js")}{JS}

Javascript

Javascript to load OpenLayers Map

/* Open Layers Map http://openlayers.org for MindFreedom Lancaster */
/*                                                                 */
/* DJ Barney, June 2009 - thanks to crschmidt for slapping me with */
/* a large trout.                                                  */
/*                                                                 */
/* Important. Tiki page *must* reference external Javascript   */
/* file. PluginJS will *not* run multiple Javascript statements    */
/* edited into the wiki markup.                                    */
/*                                                                 */
/* addLoadEvent function is *required* to allow onload event after */
/* the Tiki onload event otherwise the Javascript will never   */
/* run.                                                            */
/*
/* Page editing: PluginJS *cannot* be previewed. Page *must* be    */
/* saved to be able to validate the code (usually an admin task).  */

        var map, layer;
        function olinit(){
            map = new OpenLayers.Map('map');
            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
                "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
            map.addLayer(layer);
            var newl = new OpenLayers.Layer.Text( "text", {location: "map/mfi-locations.txt"} );
            map.addLayer(newl);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.zoomToMaxExtent();
        }
 	function addLoadEvent(func) { 
	  var oldonload = window.onload;
	  if (typeof window.onload != 'function') { 
	    window.onload = func; 
	  } else { 
	    window.onload = function() { 
	      if (oldonload) { 
	        oldonload(); 
	      } 
	      func(); 
	    } 
	  } 
	} 
	addLoadEvent(olinit);

See this page for an example of an embedded OpenLayers map.

alias