<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4.1. Displaying a Scale Line — OpenLayers Workshop</title>
<link rel="stylesheet" href="../_static/alabaster.css" type="text/css" />
<link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: '../',
VERSION: '3.8.2',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: false
};
</script>
<script type="text/javascript" src="../_static/jquery.js"></script>
<script type="text/javascript" src="../_static/underscore.js"></script>
<script type="text/javascript" src="../_static/doctools.js"></script>
<link rel="shortcut icon" href="../_static/favicon.ico"/>
<link rel="top" title="OpenLayers Workshop" href="../index.html" />
<link rel="up" title="4. Controls and interactions" href="index.html" />
<link rel="next" title="4.2. Selecting Features" href="select.html" />
<link rel="prev" title="4. Controls and interactions" href="index.html" />
<meta name="viewport" content="width=device-width, initial-scale=0.9, maximum-scale=0.9">
</head>
<body role="document">
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body" role="main">
<div class="section" id="displaying-a-scale-line">
<span id="openlayers-controls-scaleline"></span><h1>4.1. Displaying a Scale Line<a class="headerlink" href="#displaying-a-scale-line" title="Permalink to this headline">¶</a></h1>
<p>Another typical widget to display on maps is a scale bar. OpenLayers 3 provides an <code class="docutils literal"><span class="pre">ol.control.ScaleLine</span></code> for just this.</p>
<div class="section" id="creating-a-scaleline-control">
<h2>4.1.1. Creating a ScaleLine Control<a class="headerlink" href="#creating-a-scaleline-control" title="Permalink to this headline">¶</a></h2>
<p class="rubric">Tasks</p>
<ol class="arabic">
<li><p class="first">Open the <code class="docutils literal"><span class="pre">map.html</span></code> in your text editor.</p>
</li>
<li><p class="first">Somewhere in the map config, add the following code to create a new scale line control for your map:</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="nx">controls</span><span class="o">:</span> <span class="nx">ol</span><span class="p">.</span><span class="nx">control</span><span class="p">.</span><span class="nx">defaults</span><span class="p">().</span><span class="nx">extend</span><span class="p">([</span>
<span class="k">new</span> <span class="nx">ol</span><span class="p">.</span><span class="nx">control</span><span class="p">.</span><span class="nx">ScaleLine</span><span class="p">()</span>
<span class="p">]),</span>
</pre></div>
</div>
</li>
<li><p class="first">Save your changes and open <code class="docutils literal"><span class="pre">map.html</span></code> in your browser: <a class="reference external" href="http://localhost:3000/map.html">http://localhost:3000/map.html</a></p>
<div class="figure">
<img alt="../_images/scaleline1.png" src="../_images/scaleline1.png" />
</div>
<p>A default scale bar in the bottom left-hand corner</p>
</li>
</ol>
</div>
<div class="section" id="moving-the-scaleline-control">
<h2>4.1.2. Moving the ScaleLine Control<a class="headerlink" href="#moving-the-scaleline-control" title="Permalink to this headline">¶</a></h2>
<p>You may find the scale bar a bit hard to read over the imagery. There are a few approaches to take in order to improve scale visibility. If you want to keep the control inside the map viewport, you can add some style declarations within the CSS of your document. To test this out, you can include a background color and padding to the scale bar with something like the following:</p>
<blockquote>
<div><div class="highlight-html"><div class="highlight"><pre>.ol-scale-line, .ol-scale-line:not([ie8andbelow]) {
background: black;
padding: 5px;
}
</pre></div>
</div>
</div></blockquote>
<p>However, for the sake of this exercise, let’s say you think the map viewport is getting unbearably crowded. To avoid such over-crowding, you can display the scale in a different location. To accomplish this, we need to first create an additional element in our markup and then tell the scale control to render itself within this new element.</p>
<p class="rubric">Tasks</p>
<ol class="arabic">
<li><p class="first">Create a new block level element in the <code class="docutils literal"><span class="pre"><body></span></code> of your page. To make this element easy to refer to, we’ll give it an <code class="docutils literal"><span class="pre">id</span></code> attribute. Insert the following markup somewhere in the <code class="docutils literal"><span class="pre"><body></span></code> of your <code class="docutils literal"><span class="pre">map.html</span></code> page. (Placing the scale element right after the map viewport element <code class="docutils literal"><span class="pre"><div</span> <span class="pre">id="map"></div></span></code> makes sense.):</p>
<div class="highlight-html"><div class="highlight"><pre><span class="nt"><div</span> <span class="na">id=</span><span class="s">"scale-line"</span> <span class="na">class=</span><span class="s">"scale-line"</span><span class="nt">></div></span>
</pre></div>
</div>
</li>
<li><p class="first">Now modify the code creating the scale control so that it refers to the <code class="docutils literal"><span class="pre">scale-line</span></code> element:</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="nx">controls</span><span class="o">:</span> <span class="nx">ol</span><span class="p">.</span><span class="nx">control</span><span class="p">.</span><span class="nx">defaults</span><span class="p">().</span><span class="nx">extend</span><span class="p">([</span>
<span class="k">new</span> <span class="nx">ol</span><span class="p">.</span><span class="nx">control</span><span class="p">.</span><span class="nx">ScaleLine</span><span class="p">({</span><span class="nx">className</span><span class="o">:</span> <span class="s1">'ol-scale-line'</span><span class="p">,</span> <span class="nx">target</span><span class="o">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'scale-line'</span><span class="p">)})</span>
<span class="p">]),</span>
</pre></div>
</div>
</li>
<li><p class="first">Save your changes and open <code class="docutils literal"><span class="pre">map.html</span></code> in your browser: <a class="reference external" href="http://localhost:3000/map.html">http://localhost:3000/map.html</a></p>
<div class="highlight-html"><div class="highlight"><pre>.scale-line {
position: absolute;
top: 350px;
}
.ol-scale-line {
position: relative;
bottom: 0px;
left: 0px;
}
</pre></div>
</div>
</li>
<li><p class="first">Now save your changes and view <code class="docutils literal"><span class="pre">map.html</span></code> again in your browser: <a class="reference external" href="http://localhost:3000/map.html">http://localhost:3000/map.html</a></p>
<div class="figure" id="id1">
<img alt="../_images/scaleline2.png" src="../_images/scaleline2.png" />
<p class="caption"><span class="caption-text">A scale line control outside the map viewport.</span></p>
</div>
</li>
</ol>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">To create a custom control you can inherit (by using <code class="docutils literal"><span class="pre">ol.inherits</span></code>) from <code class="docutils literal"><span class="pre">ol.control.Control</span></code>. To see an example of this check out: <a class="reference external" href="http://openlayers.org/en/master/examples/custom-controls.html">http://openlayers.org/en/master/examples/custom-controls.html</a>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
<div class="sphinxsidebarwrapper">
<h1 class="logo"><a href="../index.html">OpenLayers Workshop</a></h1>
<h3>Navigation</h3>
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../setup.html">1. Setup</a></li>
<li class="toctree-l1"><a class="reference internal" href="../basics/index.html">2. Basics</a></li>
<li class="toctree-l1"><a class="reference internal" href="../layers/index.html">3. Layers and sources</a></li>
<li class="toctree-l1 current"><a class="reference internal" href="index.html">4. Controls and interactions</a><ul class="current">
<li class="toctree-l2 current"><a class="current reference internal" href="">4.1. Displaying a Scale Line</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#creating-a-scaleline-control">4.1.1. Creating a ScaleLine Control</a></li>
<li class="toctree-l3"><a class="reference internal" href="#moving-the-scaleline-control">4.1.2. Moving the ScaleLine Control</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="select.html">4.2. Selecting Features</a></li>
<li class="toctree-l2"><a class="reference internal" href="draw.html">4.3. Drawing Features</a></li>
<li class="toctree-l2"><a class="reference internal" href="modify.html">4.4. Modifying Features</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../vector-style/index.html">5. Vector styling</a></li>
</ul>
<div id="searchbox" style="display: none" role="search">
<h3>Quick search</h3>
<form class="search" action="../search.html" method="get">
<input type="text" name="q" />
<input type="submit" value="Go" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
<p class="searchtip" style="font-size: 90%">
Enter search terms or a module, class or function name.
</p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="footer">
©2015, OpenLayers Contributors.
</div>
</body>
</html>