[Show/Hide Right Column]

OpenLayers
Print
Tags: maps

Embedding OpenLayers in a Wiki Page

By using the HTML and Javascript plugins OpenLayers can be used with Tikiwiki. 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. Tikiwiki 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 Tikiwiki 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.


Contributors to this page: DJ_Barney6 points  .
Page last modified on Monday 15 June, 2009 21:24:06 UTC by DJ_Barney6 points .


Hi DJ_Barney!

Thank you for your contribution.

Why Omap? and not OpenLayers? How about making a real plugin to make it simpler for people to use?

Thanks!

M ;-)



Find by Page Name

Exact match

Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki documentation and should correspond to development keywords (bug reports and feature requests):