Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Fetching contributors…
Cannot retrieve contributors at this time
71 lines (60 sloc) 2.01 KB
<html xmlns="">
<title>OpenLayers Teleporter Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="../lib/OpenLayers.js"></script>
<style type="text/css">
#wrapper {
position: relative;
.spot1 {
width: 250px;
.spot2 {
width: 300px;
position: absolute;
left: 300px;
top: 0;
<script type="text/javascript">
var map, layer, spot=1;
function init(){
map = new OpenLayers.Map({
div: "spot1"
map.addControl(new OpenLayers.Control.OverviewMap());
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
{layers: 'basic'} );
function teleport() {
if (spot == 1) {
spot = 2;
} else {
spot = 1;
map.render("spot" + spot);
<body onload="init()">
<h1 id="title">Map "Teleportation" and Rendering</h1>
<div id="tags"></div>
<p id="shortdesc">Call the map's render method to change its container.</p>
<div id="wrapper">
<div id="spot1" class="smallmap spot1"></div>
<div id="spot2" class="smallmap spot2"></div>
<input type="button" onclick="teleport()" value="Teleport!"></input>
<div id="docs">
This example demonstrates how a map can be rendered initially in one
container and then moved to a new container. At any point after map
construction, the map's render method can be called with the id of
an empty container, moving the map to the new container.
Jump to Line
Something went wrong with that request. Please try again.