-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathopenlayers.html
More file actions
360 lines (291 loc) · 21.4 KB
/
openlayers.html
File metadata and controls
360 lines (291 loc) · 21.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
<!DOCTYPE html>
<html lang="ar" data-content_root="../">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MapServer OpenLayers Viewer — MapServer 8.6.2 documentation</title>
<link rel="stylesheet" type="text/css" href="../_static/pygments.css?v=03e43079" />
<link rel="stylesheet" type="text/css" href="../_static/sphinx.css?v=48f05237" />
<link rel="stylesheet" type="text/css" href="../_static/copybutton.css?v=76b2166b" />
<link rel="stylesheet" type="text/css" href="../_static/sphinx_collapse.css?v=226d88b4" />
<link rel="stylesheet" type="text/css" href="../_static/custom.css?v=dd298242" />
<link rel="stylesheet" type="text/css" href="../_static/ribbon.css?v=ea091bf4" />
<script src="../_static/jquery.js?v=5d32c60e"></script>
<script src="../_static/_sphinx_javascript_frameworks_compat.js?v=2cd50e6c"></script>
<script src="../_static/documentation_options.js?v=7eca00c6"></script>
<script src="../_static/doctools.js?v=fd6eb6e6"></script>
<script src="../_static/sphinx_highlight.js?v=6ffebe34"></script>
<script src="../_static/clipboard.min.js?v=a7894cd8"></script>
<script src="../_static/copybutton.js?v=f281be69"></script>
<script src="../_static/translations.js?v=87cb2081"></script>
<link rel="icon" href="../_static/mapserver.ico"/>
<link rel="author" title="About these documents" href="../about.html" />
<link rel="index" title="Index" href="../genindex.html" />
<link rel="search" title="بحث" href="../search.html" />
<link rel="copyright" title="الحقوق" href="../copyright.html" />
<link rel="next" title="Glossary" href="../glossary.html" />
<link rel="prev" title="A Simple CGI Wrapper Script" href="wrapper.html" />
</head><body>
<!-- for main branch only, do not backport this -->
<table width="100%" style="width: 100%; background-color: white;">
<tr>
<td rowspan="2" style="padding: 10px 0px 10px 10px;">
<a href="../index.html" title="Home"><img src="../_static/banner.png" alt="MapServer banner" border="0" /></a>
</td>
<td style="padding: 10px 10px 0px 0px; text-align: right; vertical-align: top;">
<a href="../index.html" title="Home">Home</a> |
<a href="../products.html" title="Products (MapServer core, MapCache, TinyOWS">Products</a> |
<a href="https://github.com/mapserver/mapserver/issues/" title="Issue Tracker (MapServer core)">Issue Tracker</a> |
<a href="../community/service_providers.html" title="Professional Service Providers">Service Providers</a> |
<a href="../faq.html" title="Frequently Asked Questions">FAQ</a> |
<a href="https://fosstodon.org/@mapserver" title="Mastodon" target="_blank">Mastodon</a> |
<a href="../download.html" title="Download Source or Binaries">Download </a> |
<a class="badge" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=KRJ2X44N3HA6U&source=url" target="_blank">
<img src="https://img.shields.io/badge/donate-%E2%9D%A4%C2%A0-ff69b4.svg?style=flat" alt="Donate to MapServer">
</a>
</td>
</tr>
<tr>
<td style="padding: 0px 10px 0px 0px; text-align: right; vertical-align: bottom;">
<a href="../../cgi/openlayers.html"><img src="../_static/flagicons/en.png" alt="en" title="en" border="0" /></a>
<img src="../_static/flagicons/ar.png" alt="ar" title="ar" border="0" width="18px" height="13px"/>
<a href="../../de/cgi/openlayers.html"><img src="../_static/flagicons/de.png" alt="de" title="de" border="0" /></a>
<a href="../../el/cgi/openlayers.html"><img src="../_static/flagicons/el.png" alt="el" title="el" border="0" /></a>
<a href="../../es/cgi/openlayers.html"><img src="../_static/flagicons/es.png" alt="es" title="es" border="0" /></a>
<a href="../../fr/cgi/openlayers.html"><img src="../_static/flagicons/fr.png" alt="fr" title="fr" border="0" /></a>
<a href="../../id/cgi/openlayers.html"><img src="../_static/flagicons/id.png" alt="id" title="id" border="0" /></a>
<a href="../../it/cgi/openlayers.html"><img src="../_static/flagicons/it.png" alt="it" title="it" border="0" /></a>
<a href="../../ja/cgi/openlayers.html"><img src="../_static/flagicons/ja.png" alt="ja" title="ja" border="0" /></a>
<a href="../../nl_NL/cgi/openlayers.html"><img src="../_static/flagicons/nl_NL.png" alt="nl_NL" title="nl_NL" border="0" /></a>
<a href="../../pl/cgi/openlayers.html"><img src="../_static/flagicons/pl.png" alt="pl" title="pl" border="0" /></a>
<a href="../../ru/cgi/openlayers.html"><img src="../_static/flagicons/ru.png" alt="ru" title="ru" border="0" /></a>
<a href="../../sq/cgi/openlayers.html"><img src="../_static/flagicons/sq.png" alt="sq" title="sq" border="0" /></a>
<a href="../../tr/cgi/openlayers.html"><img src="../_static/flagicons/tr.png" alt="tr" title="tr" border="0" /></a>
</td>
</tr>
</table>
<div class="related" role="navigation" aria-label="Related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="../genindex.html" title="الفهرس العام"
accesskey="I">الفهرس</a></li>
<li class="right" >
<a href="../glossary.html" title="Glossary"
accesskey="N">التالي</a> |</li>
<li class="right" >
<a href="wrapper.html" title="A Simple CGI Wrapper Script"
accesskey="P">السابق</a> |</li>
<li class="nav-item nav-item-0"><a href="../index.html">Home</a> »</li>
<li class="nav-item nav-item-1"><a href="../documentation.html" >MapServer 8.6.2 Documentation</a> »</li>
<li class="nav-item nav-item-2"><a href="index.html" accesskey="U">CGI</a> »</li>
<li class="nav-item nav-item-this"><a href="">MapServer OpenLayers Viewer</a></li>
</ul>
</div>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body" role="main">
<section id="mapserver-openlayers-viewer">
<span id="openlayers"></span><span id="index-0"></span><h1>MapServer OpenLayers Viewer<a class="headerlink" href="#mapserver-openlayers-viewer" title="Link to this heading">¶</a></h1>
<p>MapServer (since the 6.0 release) provides a simple, built-in method for testing a mapfile
using OpenLayers. This feature is for testing and development purposes
only, and not for production or deploying full-featured sites. You
can preview, test, and navigate a mapfile by accessing a special URL
which will return a built-in OpenLayers template.</p>
<div class="admonition note">
<p class="admonition-title">ملاحظة</p>
<p>This feature was discussed in
<a class="reference external" href="https://mapserver.org/development/rfc/ms-rfc-63.html">RFC 63</a>
and in ticket <a class="reference external" href="https://github.com/MapServer/MapServer/issues/3549">#3549</a></p>
</div>
<p>Up to the MapServer 8.4 release the OpenLayers Viewer was based on <a class="reference external" href="https://openlayers.org/two/">OpenLayers 2</a>.
As of MapServer 8.6 the OpenLayers viewer was updated to work with <a class="reference external" href="https://openlayers.org/">OpenLayers 10.5+</a>.
The MapServer CGI Layer, used by the viewer, can be see in
the <a class="reference external" href="https://openlayers.org/en/latest/examples/mapserver-cgi.html">OpenLayers examples</a>.</p>
<section id="using-the-openlayers-viewer">
<h2>Using the OpenLayers viewer<a class="headerlink" href="#using-the-openlayers-viewer" title="Link to this heading">¶</a></h2>
<section id="opening-the-openlayers-viewer-in-your-browser">
<h3>Opening the OpenLayers viewer in your browser<a class="headerlink" href="#opening-the-openlayers-viewer-in-your-browser" title="Link to this heading">¶</a></h3>
<p>Assuming you are running MapServer on your local machine, and you have
the Itasca demo setup, a basic URL would be:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>http://localhost/cgi-bin/mapserv?mode=browse&template=openlayers&layer=lakespy2&layer=dlgstln2&map=/var/www/workshop/itasca.map
</pre></div>
</div>
<p>Here is a quick breakdown of that URL:</p>
<ul>
<li><p>Basic Parameters for activating the OpenLayers browser:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">template</span><span class="o">=</span><span class="n">openlayers</span>
<span class="n">mode</span><span class="o">=</span><span class="n">browse</span>
</pre></div>
</div>
</li>
<li><p>Basic Map / Layer parameters:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="nb">map</span><span class="o">=/</span><span class="n">var</span><span class="o">/</span><span class="n">www</span><span class="o">/</span><span class="n">workshop</span><span class="o">/</span><span class="n">itasca</span><span class="o">.</span><span class="n">map</span>
<span class="n">layer</span><span class="o">=</span><span class="n">lakespy2</span>
<span class="n">layer</span><span class="o">=</span><span class="n">dlgstln2</span>
</pre></div>
</div>
</li>
</ul>
<p>When using the <code class="docutils literal notranslate"><span class="pre">mode=browse</span></code> MapServer will create an image on the server. By default this will be in the same folder as the mapfile.
If this MapServer cannot write to this folder you will see an error similar to:</p>
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span>msSaveImage<span class="o">()</span>:<span class="w"> </span>Unable<span class="w"> </span>to<span class="w"> </span>access<span class="w"> </span>file.<span class="w"> </span>Failed<span class="w"> </span>to<span class="w"> </span>create<span class="w"> </span>output<span class="w"> </span>file<span class="w"> </span><span class="o">(</span>/etc/mapserver/Test174833722471.png<span class="o">)</span>.
</pre></div>
</div>
<p>In this case you will need to set your <a class="reference internal" href="../mapfile/web.html#mapfile-web-imagepath"><span class="std std-ref">IMAGEPATH</span></a> to a folder MapServer can write to.</p>
<p><strong>That's it!</strong></p>
<div class="admonition tip">
<p class="admonition-title">نصيحة</p>
<p>If you don't have a live MapServer install to play with, you can also try the
<a class="reference external" href="https://demo.mapserver.org/cgi-bin/wms?mode=browse&template=openlayers&layer=continents&layer=country_bounds">MapServer demo</a>.</p>
</div>
</section>
<section id="opening-the-openlayers-viewer-in-the-form-of-a-wms-request">
<h3>Opening the OpenLayers viewer in the form of a WMS request<a class="headerlink" href="#opening-the-openlayers-viewer-in-the-form-of-a-wms-request" title="Link to this heading">¶</a></h3>
<p>This feature is useful when debugging WMS requests. You can write one
of these by hand, or copy the URL for a WMS tile. Running the
following should give you a simple OpenLayers demo around the BBOX
(split into several lines for readability):</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>http://localhost/cgi-bin/mapserv?map=/var/www/workshop/itasca.map
&LAYERS=lakespy2&VERSION=1.1.1&SERVICE=WMS&REQUEST=GetMap
&FORMAT=application/openlayers&WIDTH=512&HEIGHT=512&SRS=EPSG:26915
&BBOX=429956.19803725,5231780.0814818,444078.32296225,5245902.2064068
</pre></div>
</div>
<p>Here is a quick breakdown of the interesting parts of that URL:</p>
<ul>
<li><p>Special Parameter for activating the OpenLayers viewer:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">FORMAT</span><span class="o">=</span><span class="n">application</span><span class="o">/</span><span class="n">openlayers</span>
</pre></div>
</div>
</li>
<li><p>Basic MapServer Parameters:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="nb">map</span><span class="o">=/</span><span class="n">var</span><span class="o">/</span><span class="n">www</span><span class="o">/</span><span class="n">workshop</span><span class="o">/</span><span class="n">itasca</span><span class="o">.</span><span class="n">map</span>
</pre></div>
</div>
</li>
<li><p>Basic WMS parameters:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="c1"># Layers, our bounding box and projection</span>
<span class="n">LAYERS</span><span class="o">=</span><span class="n">lakespy2</span>
<span class="n">BBOX</span><span class="o">=</span><span class="mf">429956.19803725</span><span class="p">,</span><span class="mf">5231780.0814818</span><span class="p">,</span><span class="mf">444078.32296225</span><span class="p">,</span><span class="mf">5245902.2064068</span>
<span class="n">SRS</span><span class="o">=</span><span class="n">EPSG</span><span class="p">:</span><span class="mi">26915</span>
<span class="c1"># Version and other WMS request parameters</span>
<span class="n">SERVICE</span><span class="o">=</span><span class="n">WMS</span>
<span class="n">VERSION</span><span class="o">=</span><span class="mf">1.3.0</span>
<span class="n">REQUEST</span><span class="o">=</span><span class="n">GetMap</span>
<span class="n">WIDTH</span><span class="o">=</span><span class="mi">512</span>
<span class="n">HEIGHT</span><span class="o">=</span><span class="mi">512</span>
<span class="n">TRANSPARENT</span><span class="o">=</span><span class="n">true</span>
<span class="n">CRS</span><span class="o">=</span><span class="n">EPSG</span><span class="p">:</span><span class="mi">4326</span>
<span class="n">BBOX</span><span class="o">=-</span><span class="mi">90</span><span class="p">,</span><span class="o">-</span><span class="mi">180</span><span class="p">,</span><span class="mi">90</span><span class="p">,</span><span class="mi">180</span>
<span class="n">STYLES</span><span class="o">=</span>
</pre></div>
</div>
</li>
</ul>
<div class="admonition tip">
<p class="admonition-title">نصيحة</p>
<p>If you don't have a live MapServer install to play with, you can also try the
<a class="reference external" href="https://demo.mapserver.org/cgi-bin/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&BBOX=-90,-180,90,180&CRS=EPSG:4326&WIDTH=953&HEIGHT=480&LAYERS=bluemarble,continents,country_bounds,cities&STYLES=&FORMAT=application/openlayers&TRANSPARENT=true">MapServer demo in the form of a WMS request</a>.</p>
</div>
</section>
<section id="customizing-settings">
<h3>Customizing settings<a class="headerlink" href="#customizing-settings" title="Link to this heading">¶</a></h3>
<p>The viewer relies on two external files - a JavaScript file and a CSS file. By default these are loaded
from <code class="docutils literal notranslate"><span class="pre">https://mapserver.org/lib/</span></code>, however you can use your own copies of these files if external network access
is restricted by setting the following two <a class="reference internal" href="../optimization/environment_variables.html#environment-variables"><span class="std std-ref">Environment Variables</span></a>:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">MS_OPENLAYERS_JS_URL</span></code> - the URL to the OpenLayers JavaScript library.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">MS_OPENLAYERS_CSS_URL</span></code> - the URL to the OpenLayers CSS file used for styling.</p></li>
</ul>
<p>These variables can also be set in a mapfile, for example to point to the full OpenLayers build on a CDN
(Content Delivery Network):</p>
<div class="highlight-mapfile notranslate"><div class="highlight"><pre><span></span><span class="k">CONFIG</span> <span class="s">"MS_OPENLAYERS_CSS_URL"</span> <span class="s">"//cdn.jsdelivr.net/npm/ol@v10.5.0/ol.css"</span>
<span class="k">CONFIG</span> <span class="s">"MS_OPENLAYERS_JS_URL"</span> <span class="s">"//cdn.jsdelivr.net/npm/ol@v10.5.0/dist/ol.js"</span>
</pre></div>
</div>
</section>
</section>
<section id="location-of-the-embedded-openlayers-js-file">
<h2>Location of the embedded OpenLayers.js file<a class="headerlink" href="#location-of-the-embedded-openlayers-js-file" title="Link to this heading">¶</a></h2>
<p>If you aren't providing your own OpenLayers library through <code class="docutils literal notranslate"><span class="pre">MS_OPENLAYERS_JS_URL</span></code> and
<code class="docutils literal notranslate"><span class="pre">MS_OPENLAYERS_CSS_URL</span></code>, MapServer will point to hard-coded filepaths at <cite>mapserver.org/lib</cite> to find the OpenLayers
library, referred to in <a class="reference external" href="https://github.com/MapServer/MapServer/blob/main/src/maptemplate.c#L54">maptemplate.c</a>.</p>
<p>This version of OpenLayers is a cut-down version that only contains the classes needed for the
MapServer viewer. The <code class="docutils literal notranslate"><span class="pre">ol-mapserver.js</span></code> file is ~200 KB compared to the full library which is ~ 840 KB.</p>
<p>The contents of that <cite>lib</cite> folder is stored in the MapServer documentation repository,
in the <a class="reference external" href="https://github.com/MapServer/MapServer-documentation/tree/main/extra">/extra</a> folder.
You are warmly encouraged to contribute to upgrading the OpenLayers library, at any time (maybe start
with creating a new <a class="reference external" href="https://github.com/MapServer/MapServer-documentation/pulls">Pull Request</a> there).</p>
</section>
</section>
<div class="clearer"></div>
</div>
</div>
</div>
<div class="sphinxsidebar" role="navigation" aria-label="Main">
<div class="sphinxsidebarwrapper">
<search id="searchbox" style="display: none" role="search">
<h3 id="searchlabel">البحث السريع</h3>
<div class="searchformwrapper">
<form class="search" action="../search.html" method="get">
<input type="text" name="q" aria-labelledby="searchlabel" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
<input type="submit" value="Go" />
</form>
</div>
</search>
<script>document.getElementById('searchbox').style.display = "block"</script><h3>Navigation</h3>
<p>
<a href="../about.html" title="About">About</a><br>
<a href="../products.html" title="Products">Products</a><br>
<a href="../community/index.html" title="Community">Community</a><br>
<a href="../development/index.html" title="Development">Development</a><br>
<a href="../download.html" title="Downloads">Downloads</a><br>
<a href="../documentation.html" title="Documentation">Documentation</a><br>
<a href="../faq.html" title="FAQ">FAQ</a><br>
<a href="../psc.html" title="PSC">PSC</a><br>
<a href="https://fosstodon.org/@mapserver" title="Mastodon">Mastodon</a>
</p>
<h3>Current Table Of Contents</h3>
<ul>
<li><a class="reference internal" href="#">MapServer OpenLayers Viewer</a><ul>
<li><a class="reference internal" href="#using-the-openlayers-viewer">Using the OpenLayers viewer</a><ul>
<li><a class="reference internal" href="#opening-the-openlayers-viewer-in-your-browser">Opening the OpenLayers viewer in your browser</a></li>
<li><a class="reference internal" href="#opening-the-openlayers-viewer-in-the-form-of-a-wms-request">Opening the OpenLayers viewer in the form of a WMS request</a></li>
<li><a class="reference internal" href="#customizing-settings">Customizing settings</a></li>
</ul>
</li>
<li><a class="reference internal" href="#location-of-the-embedded-openlayers-js-file">Location of the embedded OpenLayers.js file</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="related" role="navigation" aria-label="Related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="../genindex.html" title="الفهرس العام"
>الفهرس</a></li>
<li class="right" >
<a href="../glossary.html" title="Glossary"
>التالي</a> |</li>
<li class="right" >
<a href="wrapper.html" title="A Simple CGI Wrapper Script"
>السابق</a> |</li>
<li class="nav-item nav-item-0"><a href="../index.html">Home</a> »</li>
<li class="nav-item nav-item-1"><a href="../documentation.html" >MapServer 8.6.2 Documentation</a> »</li>
<li class="nav-item nav-item-2"><a href="index.html" >CGI</a> »</li>
<li class="nav-item nav-item-this"><a href="">MapServer OpenLayers Viewer</a></li>
</ul>
</div>
<div class="footer" role="contentinfo">
© <a href="../copyright.html">الحقوق</a> 2026, Open Source Geospatial Foundation.
Last updated on 2026-04-20.
Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> 9.1.0.
</div>
</body>
</html>