Time for action – target practice

In this example, we'll use the target property to move the map around in our web page:

Working from the previous example, add a second <div> tag for the map and a <button> tag after the <input> element we added for the bindTo() example. Change the class of both <div> tags to half-map—this class tells the <div> tag to only take up to 50 percent of the width of the page. When the user clicks the button, we'll move the map between the two <div> tags:
```
<div id="map" class="half-map"></div>
<div id="map2" class="half-map"></div>
<input type="checkbox" id="visible" checked> Toggle Layer Visibility
<button onclick="changeTarget();">Change Target</button>
```
Now, we can add a function to the end of the <script> element that contains our new code, right after the code we added in the bindTo() example. The function will first call map.getTarget() to get the ID of the element that the map is currently in. If the ID is map, then we set the target to map2; otherwise, we set it to map:
```
function changeTarget() {
 var target = map.getTarget();
 if (target == 'map') {
   map.setTarget('map2');
 } else {
   map.setTarget('map');
 }
}
```
Reload the example in your browser, you should see something like this:
Click the Change Target button, and you should see something like this:

What just happened?

When you click the button, the changeTarget() function is called. This function uses getTarget() to find out which element the map is rendered in and setTarget() to move it to the other map element.

Have a go hero – hiding the map

Moving the map between two HTML elements is really a contrived example to illustrate how the methods work. A more likely use of these methods might be to show and hide the map entirely. Try changing the above example to show and hide the map, rather than moving it. Also, try using get() and set() instead of getTarget() and setTarget() methods.

Tip

Calling setTarget() with no parameters will set the map target to nothing, effectively removing it from the page.

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – target practice

What just happened?

Have a go hero – hiding the map

Tip

Table of Contents for
OpenLayers 3 : Beginner's Guide