[76] | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
---|
| 2 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
---|
| 3 | |
---|
| 4 | <html xmlns="http://www.w3.org/1999/xhtml"> |
---|
| 5 | <head> |
---|
| 6 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
---|
| 7 | |
---|
| 8 | <title>Map Tool Tutorial — GeoExt v1.0</title> |
---|
| 9 | <link rel="stylesheet" href="../_static/geoext.css" type="text/css" /> |
---|
| 10 | <link rel="stylesheet" href="../_static/pygments.css" type="text/css" /> |
---|
| 11 | <script type="text/javascript"> |
---|
| 12 | var DOCUMENTATION_OPTIONS = { |
---|
| 13 | URL_ROOT: '../', |
---|
| 14 | VERSION: '1.0', |
---|
| 15 | COLLAPSE_MODINDEX: false, |
---|
| 16 | FILE_SUFFIX: '.html', |
---|
| 17 | HAS_SOURCE: true |
---|
| 18 | }; |
---|
| 19 | </script> |
---|
| 20 | <script type="text/javascript" src="../_static/jquery.js"></script> |
---|
| 21 | <script type="text/javascript" src="../_static/doctools.js"></script> |
---|
| 22 | <link rel="shortcut icon" href="../_static/favicon.ico"/> |
---|
| 23 | <link rel="top" title="GeoExt v1.0" href="../index.html" /> |
---|
| 24 | <link rel="up" title="Tutorials" href="index.html" /> |
---|
| 25 | <link rel="next" title="Vector Data Tutorial" href="remote-features-tutorial.html" /> |
---|
| 26 | <link rel="prev" title="Layer Tree Tutorial" href="layertree-tutorial.html" /> |
---|
| 27 | |
---|
| 28 | |
---|
| 29 | |
---|
| 30 | |
---|
| 31 | |
---|
| 32 | |
---|
| 33 | </head> |
---|
| 34 | <body> |
---|
| 35 | <div class="header"> |
---|
| 36 | <div class="wrap"> |
---|
| 37 | <h1 id="logo"><a href="../index.html">GeoExt</a></h1> |
---|
| 38 | <ul id="top-nav"> |
---|
| 39 | <li class="first"><a href="../docs.html">Documentation</a></li> |
---|
| 40 | <li><a href="../examples.html">Examples</a></li> |
---|
| 41 | <li><a href="../downloads.html">Download</a></li> |
---|
| 42 | <li><a href="http://trac.geoext.org/">Development</a></li> |
---|
| 43 | </ul> |
---|
| 44 | <div id="searchbox"> |
---|
| 45 | <form class="search" action="../search.html" method="get"> |
---|
| 46 | <input id="searchbox-query" type="text" name="q" size="25" value="Search …" tabindex="3" onblur="if(this.value=='') this.value='Search …';" onfocus="if(this.value=='Search …') this.value='';" /> |
---|
| 47 | <input id="searchbox-submit" type="image" value="Search" src="../_static/img/search_icon_green.png" /> |
---|
| 48 | <input type="hidden" name="check_keywords" value="yes" /> |
---|
| 49 | <input type="hidden" name="area" value="default" /> |
---|
| 50 | </form> |
---|
| 51 | </div> |
---|
| 52 | </div> |
---|
| 53 | </div> |
---|
| 54 | |
---|
| 55 | <div class="related"> |
---|
| 56 | <h3>Navigation</h3> |
---|
| 57 | <ul> |
---|
| 58 | <li><a href="../index.html">GeoExt</a> »</li> |
---|
| 59 | <li><a href="index.html" accesskey="U">Tutorials</a> »</li> |
---|
| 60 | <li><a href="#">Map Tool Tutorial</a></li> |
---|
| 61 | </ul> |
---|
| 62 | </div> |
---|
| 63 | |
---|
| 64 | <div class="sphinxsidebar"> |
---|
| 65 | <div class="sphinxsidebarwrapper"> |
---|
| 66 | <h3><a href="../index.html">Table Of Contents</a></h3> |
---|
| 67 | <ul> |
---|
| 68 | <li><a class="reference external" href="#">Map Tool Tutorial</a><ul> |
---|
| 69 | <li><a class="reference external" href="#openlayers-controls">OpenLayers Controls</a></li> |
---|
| 70 | <li><a class="reference external" href="#extjs-buttons">ExtJS Buttons</a></li> |
---|
| 71 | <li><a class="reference external" href="#there-can-be-only-one">There Can Be Only One</a></li> |
---|
| 72 | </ul> |
---|
| 73 | </li> |
---|
| 74 | </ul> |
---|
| 75 | |
---|
| 76 | <h4>Previous topic</h4> |
---|
| 77 | <p class="topless"><a href="layertree-tutorial.html" |
---|
| 78 | title="previous chapter">Layer Tree Tutorial</a></p> |
---|
| 79 | <h4>Next topic</h4> |
---|
| 80 | <p class="topless"><a href="remote-features-tutorial.html" |
---|
| 81 | title="next chapter">Vector Data Tutorial</a></p> |
---|
| 82 | </div> |
---|
| 83 | </div> |
---|
| 84 | |
---|
| 85 | |
---|
| 86 | <div class="document"> |
---|
| 87 | <div class="documentwrapper"> |
---|
| 88 | <div class="bodywrapper"> |
---|
| 89 | <div class="body"> |
---|
| 90 | |
---|
| 91 | <div class="section" id="map-tool-tutorial"> |
---|
| 92 | <h1>Map Tool Tutorial<a class="headerlink" href="#map-tool-tutorial" title="Permalink to this headline">¶</a></h1> |
---|
| 93 | <p>Okay, so now you know how to <a class="reference external" href="mappanel-tutorial.html"><em>add a map to a web page</em></a> |
---|
| 94 | and load some data into it. Your users can drag and zoom to their hearts’ |
---|
| 95 | content. You even followed the <a class="reference external" href="layertree-tutorial.html"><em>Layer Tree Tutorial</em></a> so they could switch |
---|
| 96 | between different datasets. (You did follow that tutorial, right?) But now you |
---|
| 97 | want to do more than just view some pretty pictures. You want to let your users |
---|
| 98 | analyze data, or get more info about particular features on your map, or just |
---|
| 99 | draw things. Basically, you want to give them some <strong>tools</strong>.</p> |
---|
| 100 | <div class="admonition note"> |
---|
| 101 | <p class="first admonition-title">Note</p> |
---|
| 102 | <p class="last">This tutorial makes heavy use of the OpenLayers mapping library. If |
---|
| 103 | you’re not familiar with it, you might want to take a look at the |
---|
| 104 | <a class="reference external" href="../primers/openlayers-primer.html"><em>Primer: OpenLayers</em></a> before moving forward.</p> |
---|
| 105 | </div> |
---|
| 106 | <div class="section" id="openlayers-controls"> |
---|
| 107 | <h2>OpenLayers Controls<a class="headerlink" href="#openlayers-controls" title="Permalink to this headline">¶</a></h2> |
---|
| 108 | <p>In <a class="reference external" href="http://openlayers.org/">OpenLayers</a>, these tools for interacting with a |
---|
| 109 | map are called <tt class="docutils literal"><span class="pre">Controls</span></tt>. For the purposes of this tutorial, we’ll just |
---|
| 110 | stick to the <tt class="docutils literal"><span class="pre">Measure</span></tt> control, a handy little tool that lets you draw a line |
---|
| 111 | on the map and tells you its length in real-world units.</p> |
---|
| 112 | <div class="admonition-see-also admonition seealso"> |
---|
| 113 | <p class="first admonition-title">See also</p> |
---|
| 114 | <p class="last">The OpenLayer API documentation for a comprehensive listing of standard controls.</p> |
---|
| 115 | </div> |
---|
| 116 | </div> |
---|
| 117 | <div class="section" id="extjs-buttons"> |
---|
| 118 | <h2>ExtJS Buttons<a class="headerlink" href="#extjs-buttons" title="Permalink to this headline">¶</a></h2> |
---|
| 119 | <p>While OpenLayers <tt class="docutils literal"><span class="pre">Control</span></tt>s provide a number of excellent ways of |
---|
| 120 | interacting with maps, they have only limited support for actually manipulating |
---|
| 121 | the controls; ie, choosing which tool to use and providing user feedback about |
---|
| 122 | which tool is active. ExtJS provides a richer array of options for managing |
---|
| 123 | tools. Here is the idiomatic way to create an <tt class="docutils literal"><span class="pre">Ext.Button</span></tt> which activates and |
---|
| 124 | deactivates an OpenLayers <tt class="docutils literal"><span class="pre">Control</span></tt>, and stays depressed while the control |
---|
| 125 | is active:</p> |
---|
| 126 | <div class="highlight-javascript"><div class="highlight"><pre><span class="kd">var</span> <span class="nx">control</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Control</span><span class="p">.</span><span class="nx">Measure</span><span class="p">(</span><span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Handler</span><span class="p">.</span><span class="nx">Path</span><span class="p">,</span> <span class="p">{</span> |
---|
| 127 | <span class="nx">eventListeners</span><span class="o">:</span> <span class="p">{</span> |
---|
| 128 | <span class="nx">measure</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">evt</span><span class="p">)</span> <span class="p">{</span> |
---|
| 129 | <span class="nx">alert</span><span class="p">(</span><span class="s2">"The measurement was "</span> <span class="o">+</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">measure</span> <span class="o">+</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">units</span><span class="p">);</span> |
---|
| 130 | <span class="p">}</span> |
---|
| 131 | <span class="p">}</span> |
---|
| 132 | <span class="p">});</span> |
---|
| 133 | |
---|
| 134 | <span class="nx">mapPanel</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">addControl</span><span class="p">(</span><span class="nx">control</span><span class="p">);</span> |
---|
| 135 | <span class="kd">var</span> <span class="nx">button</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Ext</span><span class="p">.</span><span class="nx">Button</span><span class="p">({</span> |
---|
| 136 | <span class="nx">text</span><span class="o">:</span> <span class="s1">'Measure Things'</span><span class="p">,</span> |
---|
| 137 | <span class="nx">enableToggle</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> |
---|
| 138 | <span class="nx">handler</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">toggled</span><span class="p">){</span> |
---|
| 139 | <span class="k">if</span> <span class="p">(</span><span class="nx">toggled</span><span class="p">)</span> <span class="p">{</span> |
---|
| 140 | <span class="nx">control</span><span class="p">.</span><span class="nx">activate</span><span class="p">();</span> |
---|
| 141 | <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> |
---|
| 142 | <span class="nx">control</span><span class="p">.</span><span class="nx">deactivate</span><span class="p">();</span> |
---|
| 143 | <span class="p">}</span> |
---|
| 144 | <span class="p">}</span> |
---|
| 145 | <span class="p">});</span> |
---|
| 146 | </pre></div> |
---|
| 147 | </div> |
---|
| 148 | <p>The <tt class="docutils literal"><span class="pre">Button</span></tt> can be added to an ExtJS toolbar or to a panel, in whatever |
---|
| 149 | layout we choose. For example, you could add the button to a <tt class="docutils literal"><span class="pre">MapPanel</span></tt>‘s |
---|
| 150 | top toolbar:</p> |
---|
| 151 | <div class="highlight-javascript"><div class="highlight"><pre><span class="nx">mapPanel</span><span class="p">.</span><span class="nx">getTopToolbar</span><span class="p">().</span><span class="nx">addButton</span><span class="p">(</span><span class="nx">button</span><span class="p">);</span> |
---|
| 152 | </pre></div> |
---|
| 153 | </div> |
---|
| 154 | </div> |
---|
| 155 | <div class="section" id="there-can-be-only-one"> |
---|
| 156 | <h2>There Can Be Only One<a class="headerlink" href="#there-can-be-only-one" title="Permalink to this headline">¶</a></h2> |
---|
| 157 | <p>In general, when you have multiple tools associated with a map, you want to |
---|
| 158 | avoid having more than one tool active at the same time. It would be somewhat |
---|
| 159 | confusing if the user starts deleting data while he or she is trying to find the |
---|
| 160 | distance from one end of town to the other! Fortunately, ExtJS makes it very |
---|
| 161 | simple to ensure that only one toggle button from a group is toggled at a time, |
---|
| 162 | through the <tt class="docutils literal"><span class="pre">toggleGroup</span></tt> property of the <tt class="docutils literal"><span class="pre">Button</span></tt> object. This is a string |
---|
| 163 | identifying a group of buttons, only one of which can be pressed at a time. |
---|
| 164 | Let’s extend our example from before, this time adding the option to measure |
---|
| 165 | area instead of length:</p> |
---|
| 166 | <div class="highlight-javascript"><div class="highlight"><pre><span class="kd">var</span> <span class="nx">length</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Control</span><span class="p">.</span><span class="nx">Measure</span><span class="p">(</span><span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Handler</span><span class="p">.</span><span class="nx">Path</span><span class="p">,</span> <span class="p">{</span> |
---|
| 167 | <span class="nx">eventListeners</span><span class="o">:</span> <span class="p">{</span> |
---|
| 168 | <span class="nx">measure</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">evt</span><span class="p">)</span> <span class="p">{</span> |
---|
| 169 | <span class="nx">alert</span><span class="p">(</span><span class="s2">"The length was "</span> <span class="o">+</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">measure</span> <span class="o">+</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">units</span><span class="p">);</span> |
---|
| 170 | <span class="p">}</span> |
---|
| 171 | <span class="p">}</span> |
---|
| 172 | <span class="p">});</span> |
---|
| 173 | |
---|
| 174 | <span class="kd">var</span> <span class="nx">area</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Control</span><span class="p">.</span><span class="nx">Measure</span><span class="p">(</span><span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Handler</span><span class="p">.</span><span class="nx">Polygon</span><span class="p">,</span> <span class="p">{</span> |
---|
| 175 | <span class="nx">eventListeners</span><span class="o">:</span> <span class="p">{</span> |
---|
| 176 | <span class="nx">measure</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">evt</span><span class="p">)</span> <span class="p">{</span> |
---|
| 177 | <span class="nx">alert</span><span class="p">(</span><span class="s2">"The area was "</span> <span class="o">+</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">measure</span> <span class="o">+</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">units</span><span class="p">);</span> |
---|
| 178 | <span class="p">}</span> |
---|
| 179 | <span class="p">}</span> |
---|
| 180 | <span class="p">});</span> |
---|
| 181 | |
---|
| 182 | <span class="nx">mapPanel</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">addControl</span><span class="p">(</span><span class="nx">length</span><span class="p">);</span> |
---|
| 183 | <span class="nx">mapPanel</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">addControl</span><span class="p">(</span><span class="nx">area</span><span class="p">);</span> |
---|
| 184 | |
---|
| 185 | <span class="kd">var</span> <span class="nx">toggleGroup</span> <span class="o">=</span> <span class="s2">"measure controls"</span><span class="p">;</span> |
---|
| 186 | |
---|
| 187 | <span class="kd">var</span> <span class="nx">lengthButton</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Ext</span><span class="p">.</span><span class="nx">Button</span><span class="p">({</span> |
---|
| 188 | <span class="nx">text</span><span class="o">:</span> <span class="s1">'Measure Length'</span><span class="p">,</span> |
---|
| 189 | <span class="nx">enableToggle</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> |
---|
| 190 | <span class="nx">toggleGroup</span><span class="o">:</span> <span class="nx">toggleGroup</span><span class="p">,</span> |
---|
| 191 | <span class="nx">handler</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">toggled</span><span class="p">){</span> |
---|
| 192 | <span class="k">if</span> <span class="p">(</span><span class="nx">toggled</span><span class="p">)</span> <span class="p">{</span> |
---|
| 193 | <span class="nx">length</span><span class="p">.</span><span class="nx">activate</span><span class="p">();</span> |
---|
| 194 | <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> |
---|
| 195 | <span class="nx">length</span><span class="p">.</span><span class="nx">deactivate</span><span class="p">();</span> |
---|
| 196 | <span class="p">}</span> |
---|
| 197 | <span class="p">}</span> |
---|
| 198 | <span class="p">});</span> |
---|
| 199 | |
---|
| 200 | <span class="kd">var</span> <span class="nx">area</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Ext</span><span class="p">.</span><span class="nx">Button</span><span class="p">({</span> |
---|
| 201 | <span class="nx">text</span><span class="o">:</span> <span class="s1">'Measure Area'</span><span class="p">,</span> |
---|
| 202 | <span class="nx">enableToggle</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> |
---|
| 203 | <span class="nx">toggleGroup</span><span class="o">:</span> <span class="nx">toggleGroup</span><span class="p">,</span> |
---|
| 204 | <span class="nx">handler</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">toggled</span><span class="p">){</span> |
---|
| 205 | <span class="k">if</span> <span class="p">(</span><span class="nx">toggled</span><span class="p">)</span> <span class="p">{</span> |
---|
| 206 | <span class="nx">area</span><span class="p">.</span><span class="nx">activate</span><span class="p">();</span> |
---|
| 207 | <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> |
---|
| 208 | <span class="nx">area</span><span class="p">.</span><span class="nx">deactivate</span><span class="p">();</span> |
---|
| 209 | <span class="p">}</span> |
---|
| 210 | <span class="p">}</span> |
---|
| 211 | <span class="p">});</span> |
---|
| 212 | </pre></div> |
---|
| 213 | </div> |
---|
| 214 | <p>All right, you’ve got all you need to add and activate tools to help users get |
---|
| 215 | the most out of your maps.</p> |
---|
| 216 | </div> |
---|
| 217 | </div> |
---|
| 218 | |
---|
| 219 | |
---|
| 220 | </div> |
---|
| 221 | </div> |
---|
| 222 | </div> |
---|
| 223 | <div class="clearer"></div> |
---|
| 224 | </div> |
---|
| 225 | <div class="related"> |
---|
| 226 | <h3>Navigation</h3> |
---|
| 227 | <ul> |
---|
| 228 | <li class="right" style="margin-right: 10px"> |
---|
| 229 | <a href="../genindex.html" title="General Index" |
---|
| 230 | accesskey="I">index</a></li> |
---|
| 231 | <li class="right" > |
---|
| 232 | <a href="../modindex.html" title="Global Module Index" |
---|
| 233 | accesskey="M">modules</a> |</li> |
---|
| 234 | <li class="right" > |
---|
| 235 | <a href="remote-features-tutorial.html" title="Vector Data Tutorial" |
---|
| 236 | accesskey="N">next</a> |</li> |
---|
| 237 | <li class="right" > |
---|
| 238 | <a href="layertree-tutorial.html" title="Layer Tree Tutorial" |
---|
| 239 | accesskey="P">previous</a> |</li> |
---|
| 240 | <li><a href="../index.html">GeoExt</a> »</li> |
---|
| 241 | <li><a href="index.html" >Tutorials</a> »</li> |
---|
| 242 | <li><a href="#">Map Tool Tutorial</a></li> |
---|
| 243 | </ul> |
---|
| 244 | </div> |
---|
| 245 | |
---|
| 246 | <div class="footer"> |
---|
| 247 | © Copyright 2009-2010, GeoExt Community. |
---|
| 248 | </div> |
---|
| 249 | </body> |
---|
| 250 | </html> |
---|