mirror of
https://expo.survex.com/repositories/expoweb/.git/
synced 2024-11-21 14:51:54 +00:00
slippy trials
This commit is contained in:
Expo on server
parent
26566cafad
commit
fe7e3dbc5a
@ -7,7 +7,7 @@
|
|||||||
<meta http-equiv="content-style-type" content="text/css" />
|
<meta http-equiv="content-style-type" content="text/css" />
|
||||||
<meta http-equiv="content-language" content="en" />
|
<meta http-equiv="content-language" content="en" />
|
||||||
|
|
||||||
<script src="/javascript/openlayers/OpenLayers.js"></script>
|
<script src="/javascript/openlayers-2.13/OpenLayers.js"></script>
|
||||||
<!-- <script src="/javascript/openstreetmap/OpenStreetMap.js"></script> -->
|
<!-- <script src="/javascript/openstreetmap/OpenStreetMap.js"></script> -->
|
||||||
<script src="util.js"></script>
|
<script src="util.js"></script>
|
||||||
|
|
||||||
|
|||||||
203
map/test/3rd-party/index.html
vendored
Normal file
203
map/test/3rd-party/index.html
vendored
Normal file
@ -0,0 +1,203 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||||
|
<title>OpenLayers - 3rd party</title>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
|
||||||
|
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- menu items that get hidden below 768px width -->
|
||||||
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||||||
|
<ul class="nav navbar-nav ms-auto">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
|
||||||
|
<a class="dropdown-item" href="/doc/">Docs</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
|
||||||
|
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
|
||||||
|
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
|
||||||
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fa fa-sitemap me-1"></i>API
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
|
||||||
|
<a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v9.1.0 (latest)</a>
|
||||||
|
<a class="dropdown-item" href="/en/v8.1.0/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v8.1.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v7.5.2/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v7.5.2</a>
|
||||||
|
<a class="dropdown-item" href="/en/v6.15.1/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v6.15.1</a>
|
||||||
|
<a class="dropdown-item" href="/en/v5.3.0/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v5.3.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v4.6.5/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v4.6.5</a>
|
||||||
|
<a class="dropdown-item" href="/en/v3.20.1/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v3.20.1</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
|
||||||
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
|
||||||
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="container mt-4 pt-4">
|
||||||
|
<h3 class="mb-3">Useful 3rd party libraries</h3>
|
||||||
|
<p class="lead">
|
||||||
|
The libraries below provide additional functionality by extending OpenLayers or integrating well with it.
|
||||||
|
</p>
|
||||||
|
<table class="table table-hover">
|
||||||
|
<tbody>
|
||||||
|
<tr><th>Library</th><th>Description</th><th>Maintainer</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/openlayers/ol-cesium">OL-Cesium</a></td>
|
||||||
|
<td>Cesium integration library.</td>
|
||||||
|
<td><a href="https://github.com/openlayers">OpenLayers</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://npmjs.com/package/ol-mapbox-style">ol-mapbox-style</a></td>
|
||||||
|
<td>Create OpenLayers maps from Mapbox Style objects.</td>
|
||||||
|
<td><a href="https://github.com/openlayers">OpenLayers</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/walkermatt/ol-layerswitcher">OL-LayerSwitcher</a></td>
|
||||||
|
<td>Layer control for OpenLayers.</td>
|
||||||
|
<td><a href="https://github.com/walkermatt">Matt Walker</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/walkermatt/ol-popup">OL-Popup</a></td>
|
||||||
|
<td>Basic popup overlay for OpenLayers.</td>
|
||||||
|
<td><a href="https://github.com/walkermatt">Matt Walker</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/bjornharrtell/jsts">JSTS</a></td>
|
||||||
|
<td>JavaScript Topology Suite.</td>
|
||||||
|
<td><a href="https://github.com/bjornharrtell">Björn Harrtell</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/jonataswalker/ol-geocoder">OL-Geocoder</a></td>
|
||||||
|
<td>Geocoder Nominatim for OpenLayers.</td>
|
||||||
|
<td><a href="https://github.com/jonataswalker">Jonatas Walker</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/webgeodatavore/ol3-photon">OL3-Photon</a></td>
|
||||||
|
<td>Photon geocoder for OpenLayers.</td>
|
||||||
|
<td><a href="https://github.com/ThomasG77">Thomas Gratier</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/OpenCageData/geosearch/tree/master/packages/ol-opencage-geosearch">ol-opencage-geosearch</a></td>
|
||||||
|
<td>OpenCage GeoSearch for OpenLayers.</td>
|
||||||
|
<td><a href="https://github.com/OpenCageData">OpenCage</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/jonataswalker/ol-contextmenu">OL-ContextMenu</a></td>
|
||||||
|
<td>Custom Context Menu for OpenLayers.</td>
|
||||||
|
<td><a href="https://github.com/jonataswalker">Jonatas Walker</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/mapgears/ol3-google-maps">OL-Google-Maps</a></td>
|
||||||
|
<td>Google Maps integration library.</td>
|
||||||
|
<td><a href="https://github.com/mapgears">Mapgears</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/mapgears/ol3-panzoom">OL3-PanZoom</a></td>
|
||||||
|
<td>PanZoom and PanZoomBar controls for OpenLayers.</td>
|
||||||
|
<td><a href="https://github.com/mapgears">Mapgears</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/Viglino/ol-ext">OL-Ext</a></td>
|
||||||
|
<td>Miscellaneous classes and functions for OpenLayers.</td>
|
||||||
|
<td><a href="https://github.com/Viglino">Jean-Marc Viglino</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/nsidc/ol3-projection-switcher">OL3-Projection-Switcher</a></td>
|
||||||
|
<td>An OpenLayers Control to switch between projections.</td>
|
||||||
|
<td><a href="https://github.com/nsidc">NSIDC</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/boundlessgeo/ole">Olé</a></td>
|
||||||
|
<td>Integration of OpenLayers and Esri ArcGIS REST services.</td>
|
||||||
|
<td><a href="https://github.com/boundlessgeo">Boundless</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/allenhwkim/react-openlayers">React OpenLayers</a></td>
|
||||||
|
<td>A minimal React wrapper of OpenLayers 3+ written in TypeScript</td>
|
||||||
|
<td><a href="https://github.com/allenhwkim">Allen Kim</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/TDesjardins/gwt-ol">GWT-OpenLayers 3+</a></td>
|
||||||
|
<td>A GWT wrapper for OpenLayers 3+ written in Java</td>
|
||||||
|
<td><a href="https://github.com/TDesjardins">Tino Desjardins</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/terrestris/react-geo">react-geo</a></td>
|
||||||
|
<td>A set of geo related modules to use in combination with React, Ant Design UI and OpenLayers</td>
|
||||||
|
<td><a href="https://github.com/terrestris">terrestris</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/dayjournal/ol-opacity">ol-opacity</a></td>
|
||||||
|
<td>A layer switcher control with opacity sliders for overlays.</td>
|
||||||
|
<td><a href="https://github.com/dayjournal">dayjournal</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/symbioquine/ol-grid">ol-grid</a></td>
|
||||||
|
<td>A dynamic grid for OpenLayers - intended for use as part of advanced snapping controls.</td>
|
||||||
|
<td><a href="https://github.com/symbioquine">Symbioquine</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/MelihAltintas/vue3-openlayers">vue3-openlayers</a></td>
|
||||||
|
<td>vue3-openlayers is a components library that brings the power of OpenLayers to the Vue3 reactive world.</td>
|
||||||
|
<td><a href="https://github.com/MelihAltintas/">Melih Altıntaş</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/ahocevar/ol-marker-feature">ol-marker-feature</a></td>
|
||||||
|
<td>The OpenLayers Marker Feature plugin provides an easy way to add markers to a map and associate them with popups, e.g. using <a href="https://github.com/walkermatt/ol-popup">OL-Popup</a>.</td>
|
||||||
|
<td><a href="https://github.com/ahocevar">Andreas Hocevar</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/m-mohr/ol-stac">OL STAC</a></td>
|
||||||
|
<td><a href="https://stacspec.org">STAC</a> support for OpenLayers. Automatically fills an OpenLayers LayerGroup with data extracted from various STAC entities, e.g. geometry and imagery.</td>
|
||||||
|
<td><a href="https://github.com/m-mohr">Matthias Mohr</a></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>.
|
||||||
|
All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>.
|
||||||
|
Thanks to our <a href='https://opencollective.com/openlayers'>sponsors</a>.
|
||||||
|
<br>
|
||||||
|
<a href="https://www.netlify.com">This site is powered by Netlify.</a>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
197
map/test/doc/errors/index.html
Normal file
197
map/test/doc/errors/index.html
Normal file
@ -0,0 +1,197 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||||
|
<title>OpenLayers - Errors</title>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
|
||||||
|
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- menu items that get hidden below 768px width -->
|
||||||
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||||||
|
<ul class="nav navbar-nav ms-auto">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
|
||||||
|
<a class="dropdown-item" href="/doc/">Docs</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
|
||||||
|
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
|
||||||
|
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
|
||||||
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fa fa-sitemap me-1"></i>API
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
|
||||||
|
<a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v9.1.0 (latest)</a>
|
||||||
|
<a class="dropdown-item" href="/en/v8.1.0/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v8.1.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v7.5.2/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v7.5.2</a>
|
||||||
|
<a class="dropdown-item" href="/en/v6.15.1/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v6.15.1</a>
|
||||||
|
<a class="dropdown-item" href="/en/v5.3.0/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v5.3.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v4.6.5/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v4.6.5</a>
|
||||||
|
<a class="dropdown-item" href="/en/v3.20.1/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v3.20.1</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
|
||||||
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
|
||||||
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="errors">Errors</h1>
|
||||||
|
<h3 id="1">1</h3>
|
||||||
|
<p>The view center is not defined.</p>
|
||||||
|
<h3 id="2">2</h3>
|
||||||
|
<p>The view resolution is not defined.</p>
|
||||||
|
<h3 id="3">3</h3>
|
||||||
|
<p>The view rotation is not defined.</p>
|
||||||
|
<h3 id="4">4</h3>
|
||||||
|
<p><code>image</code> and <code>src</code> cannot be provided at the same time.</p>
|
||||||
|
<h3 id="5">5</h3>
|
||||||
|
<p><code>imgSize</code> must be set when <code>image</code> is provided.</p>
|
||||||
|
<h3 id="6">6</h3>
|
||||||
|
<p>A defined and non-empty <code>src</code> or <code>image</code> must be provided.</p>
|
||||||
|
<h3 id="7">7</h3>
|
||||||
|
<p><code>format</code> must be set when <code>url</code> is set.</p>
|
||||||
|
<h3 id="8">8</h3>
|
||||||
|
<p>Unknown <code>serverType</code> configured.</p>
|
||||||
|
<h3 id="9">9</h3>
|
||||||
|
<p><code>url</code> must be configured or set using <code>#setUrl()</code>.</p>
|
||||||
|
<h3 id="10">10</h3>
|
||||||
|
<p>The default <code>geometryFunction</code> can only handle <code>ol/geom/Point</code> geometries.</p>
|
||||||
|
<h3 id="11">11</h3>
|
||||||
|
<p><code>options.featureTypes</code> must be an Array.</p>
|
||||||
|
<h3 id="12">12</h3>
|
||||||
|
<p><code>options.geometryName</code> must also be provided when <code>options.bbox</code> is set.</p>
|
||||||
|
<h3 id="13">13</h3>
|
||||||
|
<p>Invalid corner. Valid corners are <code>top-left</code>, <code>top-right</code>, <code>bottom-right</code> and <code>bottom-left</code>.</p>
|
||||||
|
<h3 id="14">14</h3>
|
||||||
|
<p>Invalid color. Valid colors are all <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">CSS colors</a>.</p>
|
||||||
|
<h3 id="15">15</h3>
|
||||||
|
<p>Tried to get a value for a key that does not exist in the cache.</p>
|
||||||
|
<h3 id="16">16</h3>
|
||||||
|
<p>Tried to set a value for a key that is used already.</p>
|
||||||
|
<h3 id="17">17</h3>
|
||||||
|
<p><code>resolutions</code> must be sorted in descending order.</p>
|
||||||
|
<h3 id="18">18</h3>
|
||||||
|
<p>Either <code>origin</code> or <code>origins</code> must be configured, never both.</p>
|
||||||
|
<h3 id="19">19</h3>
|
||||||
|
<p>Number of <code>tileSizes</code> and <code>resolutions</code> must be equal.</p>
|
||||||
|
<h3 id="20">20</h3>
|
||||||
|
<p>Number of <code>origins</code> and <code>resolutions</code> must be equal.</p>
|
||||||
|
<h3 id="22">22</h3>
|
||||||
|
<p>Either <code>tileSize</code> or <code>tileSizes</code> must be configured, never both.</p>
|
||||||
|
<h3 id="24">24</h3>
|
||||||
|
<p>Invalid extent or geometry provided as <code>geometry</code>.</p>
|
||||||
|
<h3 id="25">25</h3>
|
||||||
|
<p>Cannot fit empty extent provided as <code>geometry</code>.</p>
|
||||||
|
<h3 id="26">26</h3>
|
||||||
|
<p>Features for <code>deletes</code> must have an id set by the feature reader or <code>ol.Feature#setId()</code>.</p>
|
||||||
|
<h3 id="27">27</h3>
|
||||||
|
<p>Features for <code>updates</code> must have an id set by the feature reader or <code>ol.Feature#setId()</code>.</p>
|
||||||
|
<h3 id="28">28</h3>
|
||||||
|
<p><code>renderMode</code> must be <code>'hybrid'</code> or <code>'vector'</code>.</p>
|
||||||
|
<h3 id="30">30</h3>
|
||||||
|
<p>The passed <code>feature</code> was already added to the source.</p>
|
||||||
|
<h3 id="31">31</h3>
|
||||||
|
<p>Tried to enqueue an <code>element</code> that was already added to the queue.</p>
|
||||||
|
<h3 id="32">32</h3>
|
||||||
|
<p>Transformation matrix cannot be inverted.</p>
|
||||||
|
<h3 id="33">33</h3>
|
||||||
|
<p>Invalid <code>units</code>. <code>'degrees'</code>, <code>'imperial'</code>, <code>'nautical'</code>, <code>'metric'</code> or <code>'us'</code> required.</p>
|
||||||
|
<h3 id="34">34</h3>
|
||||||
|
<p>Invalid geometry layout. Must be <code>XY</code>, <code>XYZ</code>, <code>XYM</code> or <code>XYZM</code>.</p>
|
||||||
|
<h3 id="36">36</h3>
|
||||||
|
<p>Unknown SRS type. Expected <code>"name"</code>.</p>
|
||||||
|
<h3 id="37">37</h3>
|
||||||
|
<p>Unknown geometry type found. Expected <code>'Point'</code>, <code>'LineString'</code>, <code>'Polygon'</code> or <code>'GeometryCollection'</code>.</p>
|
||||||
|
<h3 id="38">38</h3>
|
||||||
|
<p><code>styleMapValue</code> has an unknown type.</p>
|
||||||
|
<h3 id="39">39</h3>
|
||||||
|
<p>Unknown geometry type found. Expected <code>'GeometryCollection'</code>, <code>'MultiPoint'</code>, <code>'MultiLineString'</code> or <code>'MultiPolygon'</code>.</p>
|
||||||
|
<h3 id="40">40</h3>
|
||||||
|
<p>Expected <code>feature</code> to have a geometry.</p>
|
||||||
|
<h3 id="41">41</h3>
|
||||||
|
<p>Expected an <code>ol.style.Style</code> or an array of <code>ol.style.Style</code>.</p>
|
||||||
|
<h3 id="43">43</h3>
|
||||||
|
<p>Expected <code>layers</code> to be an array or an <code>ol.Collection</code>.</p>
|
||||||
|
<h3 id="47">47</h3>
|
||||||
|
<p>Expected <code>controls</code> to be an array or an <code>ol.Collection</code>.</p>
|
||||||
|
<h3 id="48">48</h3>
|
||||||
|
<p>Expected <code>interactions</code> to be an array or an <code>ol.Collection</code>.</p>
|
||||||
|
<h3 id="49">49</h3>
|
||||||
|
<p>Expected <code>overlays</code> to be an array or an <code>ol.Collection</code>.</p>
|
||||||
|
<h3 id="50">50</h3>
|
||||||
|
<p>Cannot determine Rest Service from url.</p>
|
||||||
|
<h3 id="51">51</h3>
|
||||||
|
<p>Either <code>url</code> or <code>tileJSON</code> options must be provided.</p>
|
||||||
|
<h3 id="52">52</h3>
|
||||||
|
<p>Unknown <code>serverType</code> configured.</p>
|
||||||
|
<h3 id="53">53</h3>
|
||||||
|
<p>Unknown <code>tierSizeCalculation</code> configured.</p>
|
||||||
|
<h3 id="55">55</h3>
|
||||||
|
<p>The <code>{-y}</code> placeholder requires a tile grid with extent.</p>
|
||||||
|
<h3 id="56">56</h3>
|
||||||
|
<p><code>mapBrowserEvent</code> must originate from a pointer event.</p>
|
||||||
|
<h3 id="57">57</h3>
|
||||||
|
<p>At least 2 conditions are required.</p>
|
||||||
|
<h3 id="58">58</h3>
|
||||||
|
<p>Duplicate item added to a unique collection. For example, it may be that you tried to add the same layer to a map twice. Check for calls to <code>map.addLayer()</code> or other places where the map's layer collection is modified.</p>
|
||||||
|
<h3 id="59">59</h3>
|
||||||
|
<p>Invalid command found in the PBF. This indicates that the loaded vector tile may be corrupt.</p>
|
||||||
|
<h3 id="60">60</h3>
|
||||||
|
<p>Missing or invalid <code>size</code>.</p>
|
||||||
|
<h3 id="61">61</h3>
|
||||||
|
<p>Cannot determine IIIF Image API version from provided image information JSON.</p>
|
||||||
|
<h3 id="62">62</h3>
|
||||||
|
<p>A <code>WebGLArrayBuffer</code> must either be of type <code>ELEMENT_ARRAY_BUFFER</code> or <code>ARRAY_BUFFER</code>.</p>
|
||||||
|
<h3 id="64">64</h3>
|
||||||
|
<p>Layer opacity must be a number.</p>
|
||||||
|
<h3 id="66">66</h3>
|
||||||
|
<p><code>forEachFeatureAtCoordinate</code> cannot be used on a WebGL layer if the hit detection logic has not been enabled.</p>
|
||||||
|
<h3 id="67">67</h3>
|
||||||
|
<p>A layer can only be added to the map once. Use either <code>layer.setMap()</code> or <code>map.addLayer()</code>, not both.</p>
|
||||||
|
<h3 id="68">68</h3>
|
||||||
|
<p>Data from this source can only be rendered if it has a projection compatible with the view projection.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>.
|
||||||
|
All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>.
|
||||||
|
Thanks to our <a href='https://opencollective.com/openlayers'>sponsors</a>.
|
||||||
|
<br>
|
||||||
|
<a href="https://www.netlify.com">This site is powered by Netlify.</a>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
398
map/test/doc/faq.html
Normal file
398
map/test/doc/faq.html
Normal file
@ -0,0 +1,398 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||||
|
<title>OpenLayers - Frequently Asked Questions (FAQ)</title>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
|
||||||
|
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- menu items that get hidden below 768px width -->
|
||||||
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||||||
|
<ul class="nav navbar-nav ms-auto">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
|
||||||
|
<a class="dropdown-item" href="/doc/">Docs</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
|
||||||
|
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
|
||||||
|
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
|
||||||
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fa fa-sitemap me-1"></i>API
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
|
||||||
|
<a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v9.1.0 (latest)</a>
|
||||||
|
<a class="dropdown-item" href="/en/v8.1.0/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v8.1.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v7.5.2/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v7.5.2</a>
|
||||||
|
<a class="dropdown-item" href="/en/v6.15.1/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v6.15.1</a>
|
||||||
|
<a class="dropdown-item" href="/en/v5.3.0/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v5.3.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v4.6.5/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v4.6.5</a>
|
||||||
|
<a class="dropdown-item" href="/en/v3.20.1/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v3.20.1</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
|
||||||
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
|
||||||
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="frequently-asked-questions-faq">Frequently Asked Questions (FAQ)</h1>
|
||||||
|
<p>Certain questions arise more often than others when users ask for help. This
|
||||||
|
document tries to list some of the common questions that frequently get asked,
|
||||||
|
e.g. on <a href="https://stackoverflow.com/questions/tagged/openlayers">Stack Overflow</a>.</p>
|
||||||
|
<p>If you think a question (and naturally its answer) should be added here, feel
|
||||||
|
free to ping us or to send a pull request enhancing this document.</p>
|
||||||
|
<p>Table of contents:</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#what-projection-is-openlayers-using-">What projection is OpenLayers using?</a></li>
|
||||||
|
<li><a href="#how-do-i-change-the-projection-of-my-map-">How do I change the projection of my map?</a></li>
|
||||||
|
<li><a href="#why-is-my-map-centered-on-the-gulf-of-guinea-or-africa-the-ocean-null-island-">Why is my map centered on the gulf of guinea (or africa, the ocean, null-island)?</a></li>
|
||||||
|
<li><a href="#why-is-the-order-of-a-coordinate-lon-lat-and-not-lat-lon-">Why is the order of a coordinate [lon,lat], and not [lat,lon]?</a></li>
|
||||||
|
<li><a href="#why-aren-t-there-any-features-in-my-source-">Why aren't there any features in my source?</a></li>
|
||||||
|
<li><a href="#how-do-i-force-a-re-render-of-the-map-">How do I force a re-render of the map?</a></li>
|
||||||
|
<li><a href="#why-are-my-features-not-found-">Why are my features not found?</a></li>
|
||||||
|
<li><a href="#user-content-why-is-zooming-or-clicking-off-inaccurate">Why is zooming or clicking off, inaccurate?</a></li>
|
||||||
|
</ul>
|
||||||
|
<h2 id="what-projection-is-openlayers-using">What projection is OpenLayers using?</h2>
|
||||||
|
<p>Every map that you'll create with OpenLayers will have a view, and every view
|
||||||
|
will have a projection. As the earth is three-dimensional and round but the 2D
|
||||||
|
view of a map isn't, we need a mathematical expression to represent it. Enter
|
||||||
|
projections.</p>
|
||||||
|
<p>There isn't only one projection, but there are many common ones. Each projection
|
||||||
|
has different properties, in that it accurately represents distances, angles or
|
||||||
|
areas. Certain projections are better suited for different regions in the world.</p>
|
||||||
|
<p>Back to the original question: OpenLayers is capable of dealing with most
|
||||||
|
projections. If you do not explicitly set one, your map is going to use our
|
||||||
|
default which is the Web Mercator projection (EPSG:3857). The same projection is
|
||||||
|
used e.g. for the maps of the OpenStreetMap-project and commercial products such
|
||||||
|
as Bing Maps or Google Maps.</p>
|
||||||
|
<p>This projection is a good choice if you want a map which shows the whole world,
|
||||||
|
and you may need to have this projection if you want to e.g. use the
|
||||||
|
OpenStreetMap or Bing tiles.</p>
|
||||||
|
<h2 id="how-do-i-change-the-projection-of-my-map">How do I change the projection of my map?</h2>
|
||||||
|
<p>There is a good chance that you want to change the default projection of
|
||||||
|
OpenLayers to something more appropriate for your region or your specific data.</p>
|
||||||
|
<p>The projection of your map can be set through the <code>view</code>-property. Here are some
|
||||||
|
examples:</p>
|
||||||
|
<pre><code class="language-javascript">import Map from 'ol/Map.js';
|
||||||
|
import View from 'ol/View.js';
|
||||||
|
|
||||||
|
// OpenLayers comes with support for the World Geodetic System 1984, EPSG:4326:
|
||||||
|
const map = new Map({
|
||||||
|
view: new View({
|
||||||
|
projection: 'EPSG:4326'
|
||||||
|
// other view properties like map center etc.
|
||||||
|
})
|
||||||
|
// other properties for your map like layers etc.
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
<pre><code class="language-javascript">import Map from 'ol/Map.js';
|
||||||
|
import View from 'ol/View.js';
|
||||||
|
import proj4 from 'proj4';
|
||||||
|
import {register} from 'ol/proj/proj4.js';
|
||||||
|
import {get as getProjection} from 'ol/proj.js';
|
||||||
|
|
||||||
|
// To use other projections, you have to register the projection in OpenLayers.
|
||||||
|
// This can easily be done with [http://proj4js.org/](proj4)
|
||||||
|
//
|
||||||
|
// By default OpenLayers does not know about the EPSG:21781 (Swiss) projection.
|
||||||
|
// So we create a projection instance for EPSG:21781 and pass it to
|
||||||
|
// register to make it available to the library for lookup by its
|
||||||
|
// code.
|
||||||
|
proj4.defs('EPSG:21781',
|
||||||
|
'+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 ' +
|
||||||
|
'+x_0=600000 +y_0=200000 +ellps=bessel ' +
|
||||||
|
'+towgs84=660.077,13.551,369.344,2.484,1.783,2.939,5.66 +units=m +no_defs');
|
||||||
|
register(proj4);
|
||||||
|
const swissProjection = getProjection('EPSG:21781');
|
||||||
|
|
||||||
|
// we can now use the projection:
|
||||||
|
const map = new Map({
|
||||||
|
view: new View({
|
||||||
|
projection: swissProjection
|
||||||
|
// other view properties like map center etc.
|
||||||
|
})
|
||||||
|
// other properties for your map like layers etc.
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
<p>We recommend to lookup parameters of your projection (like the validity extent)
|
||||||
|
over at <a href="https://epsg.io/">epsg.io</a>.</p>
|
||||||
|
<h2 id="why-is-my-map-centered-on-the-gulf-of-guinea-or-africa-the-ocean-null-island">Why is my map centered on the gulf of guinea (or africa, the ocean, null-island)?</h2>
|
||||||
|
<p>If you have set a center in your map view, but don't see a real change in visual
|
||||||
|
output, chances are that you have provided the coordinates of the map center in
|
||||||
|
the wrong (a non-matching) projection.</p>
|
||||||
|
<p>As the default projection in OpenLayers is Web Mercator (see above), the
|
||||||
|
coordinates for the center have to be provided in that projection. Chances are
|
||||||
|
that your map looks like this:</p>
|
||||||
|
<pre><code class="language-javascript">import Map from 'ol/Map.js';
|
||||||
|
import View from 'ol/View.js';
|
||||||
|
import TileLayer from 'ol/layer/Tile.js';
|
||||||
|
import OSM from 'ol/source/OSM.js';
|
||||||
|
|
||||||
|
const washingtonLonLat = [-77.036667, 38.895];
|
||||||
|
const map = new Map({
|
||||||
|
layers: [
|
||||||
|
new TileLayer({
|
||||||
|
source: new OSM()
|
||||||
|
})
|
||||||
|
],
|
||||||
|
target: 'map',
|
||||||
|
view: new View({
|
||||||
|
center: washingtonLonLat,
|
||||||
|
zoom: 12
|
||||||
|
})
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
<p>Here <code>[-77.036667, 38.895]</code> is provided as the center of the view. But as Web
|
||||||
|
Mercator is a metric projection, you are currently telling OpenLayers that the
|
||||||
|
center shall be some meters (~77m and ~39m respectively) away from <code>[0, 0]</code>. In
|
||||||
|
the Web Mercator projection the coordinate is right in the gulf of guinea.</p>
|
||||||
|
<p>The solution is easy: Provide the coordinates projected into Web Mercator.
|
||||||
|
OpenLayers has some helpful utility methods to assist you:</p>
|
||||||
|
<pre><code class="language-javascript">import Map from 'ol/Map.js';
|
||||||
|
import View from 'ol/View.js';
|
||||||
|
import TileLayer from 'ol/layer/Tile.js';
|
||||||
|
import OSM from 'ol/source/OSM.js';
|
||||||
|
import {fromLonLat} from 'ol/proj.js';
|
||||||
|
|
||||||
|
const washingtonLonLat = [-77.036667, 38.895];
|
||||||
|
const washingtonWebMercator = fromLonLat(washingtonLonLat);
|
||||||
|
|
||||||
|
const map = new Map({
|
||||||
|
layers: [
|
||||||
|
new TileLayer({
|
||||||
|
source: new OSM()
|
||||||
|
})
|
||||||
|
],
|
||||||
|
target: 'map',
|
||||||
|
view: new View({
|
||||||
|
center: washingtonWebMercator,
|
||||||
|
zoom: 8
|
||||||
|
})
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
<p>The method <code>fromLonLat()</code> is available from version 3.5 onwards.</p>
|
||||||
|
<p>If you told OpenLayers about a custom projection (see above), you can use the
|
||||||
|
following method to transform a coordinate from WGS84 to your projection:</p>
|
||||||
|
<pre><code class="language-javascript">import {transform} from 'ol/proj.js';
|
||||||
|
// assuming that OpenLayers knows about EPSG:21781, see above
|
||||||
|
const swissCoord = transform([8.23, 46.86], 'EPSG:4326', 'EPSG:21781');
|
||||||
|
</code></pre>
|
||||||
|
<h2 id="why-is-the-order-of-a-coordinate-lonlat-and-not-latlon">Why is the order of a coordinate [lon,lat], and not [lat,lon]?</h2>
|
||||||
|
<p>Because of two different and incompatible conventions. Latitude and longitude
|
||||||
|
are normally given in that order. Maps are 2D representations/projections
|
||||||
|
of the earth's surface, with coordinates expressed in the <code>x,y</code> grid of the
|
||||||
|
<a href="https://en.wikipedia.org/wiki/Cartesian_coordinate_system">Cartesian system</a>.
|
||||||
|
As they are by convention drawn with west on the left and north at the top,
|
||||||
|
this means that <code>x</code> represents longitude, and <code>y</code> latitude. As stated above,
|
||||||
|
OpenLayers is designed to handle all projections, but the default view is in
|
||||||
|
projected Cartesian coordinates. It would make no sense to have duplicate
|
||||||
|
functions to handle coordinates in both the Cartesian <code>x,y</code> and <code>lat,lon</code>
|
||||||
|
systems, so the degrees of latitude and longitude should be entered as though
|
||||||
|
they were Cartesian, in other words, they are <code>lon,lat</code>.</p>
|
||||||
|
<p>If you have difficulty remembering which way round it is, use the language code
|
||||||
|
for English, <code>en</code>, as a mnemonic: East before North.</p>
|
||||||
|
<h4 id="a-practical-example">A practical example</h4>
|
||||||
|
<p>So you want to center your map on a certain place on the earth and obviously you
|
||||||
|
need to have its coordinates for this. Let's assume you want your map centered
|
||||||
|
on Schladming, a beautiful place in Austria. Head over to the wikipedia
|
||||||
|
page for <a href="https://en.wikipedia.org/wiki/Schladming">Schladming</a>. In the top-right
|
||||||
|
corner there is a link to <a href="https://geohack.toolforge.org/geohack.php?pagename=Schladming¶ms=47_23_39_N_13_41_21_E_type:city(4565)_region:AT-6">GeoHack</a>,
|
||||||
|
which effectively tells you the coordinates are:</p>
|
||||||
|
<pre><code>WGS84:
|
||||||
|
47° 23′ 39″ N, 13° 41′ 21″ E
|
||||||
|
47.394167, 13.689167
|
||||||
|
</code></pre>
|
||||||
|
<p>So the next step would be to put the decimal coordinates into an array and use
|
||||||
|
it as center:</p>
|
||||||
|
<pre><code class="language-javascript">import Map from 'ol/Map.js';
|
||||||
|
import View from 'ol/View.js';
|
||||||
|
import TileLayer from 'ol/layer/Tile.js';
|
||||||
|
import OSM from 'ol/source/OSM.js';
|
||||||
|
import {fromLonLat} from 'ol/proj.js';
|
||||||
|
|
||||||
|
const schladming = [47.394167, 13.689167]; // caution partner, read on...
|
||||||
|
// since we are using OSM, we have to transform the coordinates...
|
||||||
|
const schladmingWebMercator = fromLonLat(schladming);
|
||||||
|
|
||||||
|
const map = new Map({
|
||||||
|
layers: [
|
||||||
|
new TileLayer({
|
||||||
|
source: new OSM()
|
||||||
|
})
|
||||||
|
],
|
||||||
|
target: 'map',
|
||||||
|
view: new View({
|
||||||
|
center: schladmingWebMercator,
|
||||||
|
zoom: 9
|
||||||
|
})
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
<p>Running the above example will possibly surprise you, since we are not centered
|
||||||
|
on Schladming, Austria, but instead on Abyan, a region in Yemen (possibly also a
|
||||||
|
nice place). So what happened?</p>
|
||||||
|
<p>Many people mix up the order of longitude and latitude in a coordinate array.
|
||||||
|
Don't worry if you get it wrong at first, many OpenLayers developers have to
|
||||||
|
think twice about whether to put the longitude or the latitude first when they
|
||||||
|
e.g. try to change the map center.</p>
|
||||||
|
<p>Ok, then let's flip the coordinates:</p>
|
||||||
|
<pre><code class="language-javascript">import Map from 'ol/Map.js';
|
||||||
|
import View from 'ol/View.js';
|
||||||
|
import TileLayer from 'ol/layer/Tile.js';
|
||||||
|
import OSM from 'ol/source/OSM.js';
|
||||||
|
import {fromLonLat} from 'ol/proj.js';
|
||||||
|
|
||||||
|
const schladming = [13.689167, 47.394167]; // longitude first, then latitude
|
||||||
|
// since we are using OSM, we have to transform the coordinates...
|
||||||
|
const schladmingWebMercator = fromLonLat(schladming);
|
||||||
|
|
||||||
|
const map = new Map({
|
||||||
|
layers: [
|
||||||
|
new TileLayer({
|
||||||
|
source: new OSM()
|
||||||
|
})
|
||||||
|
],
|
||||||
|
target: 'map',
|
||||||
|
view: new View({
|
||||||
|
center: schladmingWebMercator,
|
||||||
|
zoom: 9
|
||||||
|
})
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
<p>Schladming is now correctly displayed in the center of the map.</p>
|
||||||
|
<p>So when you deal with EPSG:4326 coordinates in OpenLayers, put the longitude
|
||||||
|
first, and then the latitude. This behaviour is the same as we had in OpenLayers
|
||||||
|
2, and it actually makes sense because of the natural axis order in WGS84.</p>
|
||||||
|
<p>If you cannot remember the correct order, just have a look at the method name
|
||||||
|
we used: <code>fromLonLat</code>; even there we hint that we expect longitude
|
||||||
|
first, and then latitude.</p>
|
||||||
|
<h2 id="why-arent-there-any-features-in-my-source">Why aren't there any features in my source?</h2>
|
||||||
|
<p>Suppose you want to load a KML file and display the contained features on the
|
||||||
|
map. Code like the following could be used:</p>
|
||||||
|
<pre><code class="language-javascript">import VectorLayer from 'ol/layer/Vector.js';
|
||||||
|
import KMLSource from 'ol/source/KML.js';
|
||||||
|
|
||||||
|
const vector = new VectorLayer({
|
||||||
|
source: new KMLSource({
|
||||||
|
projection: 'EPSG:3857',
|
||||||
|
url: 'data/kml/2012-02-10.kml'
|
||||||
|
})
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
<p>You may ask yourself how many features are in that KML, and try something like
|
||||||
|
the following:</p>
|
||||||
|
<pre><code class="language-javascript">import VectorLayer from 'ol/layer/Vector.js';
|
||||||
|
import KMLSource from 'ol/source/KML.js';
|
||||||
|
|
||||||
|
const vector = new VectorLayer({
|
||||||
|
source: new KMLSource({
|
||||||
|
projection: 'EPSG:3857',
|
||||||
|
url: 'data/kml/2012-02-10.kml'
|
||||||
|
})
|
||||||
|
});
|
||||||
|
const numFeatures = vector.getSource().getFeatures().length;
|
||||||
|
console.log("Count right after construction: " + numFeatures);
|
||||||
|
</code></pre>
|
||||||
|
<p>This will log a count of <code>0</code> features to be in the source. This is because the
|
||||||
|
loading of the KML-file will happen in an asynchronous manner. To get the count
|
||||||
|
as soon as possible (right after the file has been fetched and the source has
|
||||||
|
been populated with features), you should use an event listener function on the
|
||||||
|
<code>source</code>:</p>
|
||||||
|
<pre><code class="language-javascript">vector.getSource().on('change', function(evt){
|
||||||
|
const source = evt.target;
|
||||||
|
if (source.getState() === 'ready') {
|
||||||
|
const numFeatures = source.getFeatures().length;
|
||||||
|
console.log("Count after change: " + numFeatures);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
<p>This will correctly report the number of features, <code>1119</code> in that particular
|
||||||
|
case.</p>
|
||||||
|
<h2 id="how-do-i-force-a-re-render-of-the-map">How do I force a re-render of the map?</h2>
|
||||||
|
<p>Usually the map is automatically re-rendered, once a source changes (for example
|
||||||
|
when a remote source has loaded).</p>
|
||||||
|
<p>If you actually want to manually trigger a rendering, you could use</p>
|
||||||
|
<pre><code class="language-javascript">map.render();
|
||||||
|
</code></pre>
|
||||||
|
<p>...or its companion method</p>
|
||||||
|
<pre><code class="language-javascript">map.renderSync();
|
||||||
|
</code></pre>
|
||||||
|
<h2 id="why-are-my-features-not-found">Why are my features not found?</h2>
|
||||||
|
<p>You are using <code>Map#forEachFeatureAtPixel</code> or <code>Map#hasFeatureAtPixel</code>, but
|
||||||
|
it sometimes does not work for large icons or labels? The <em>hit detection</em> only
|
||||||
|
checks features that are within a certain distance of the given position. For large
|
||||||
|
icons, the actual geometry of a feature might be too far away and is not considered.</p>
|
||||||
|
<p>In this case, set the <code>renderBuffer</code> property of <code>VectorLayer</code> (the default value is 100px):</p>
|
||||||
|
<pre><code class="language-javascript">import VectorLayer from 'ol/layer/Vector.js';
|
||||||
|
|
||||||
|
const vectorLayer = new VectorLayer({
|
||||||
|
...
|
||||||
|
renderBuffer: 200
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
<p>The recommended value is the size of the largest symbol, line width or label.</p>
|
||||||
|
<h2 id="why-is-zooming-or-clicking-in-the-map-offinaccurate">Why is zooming or clicking in the map off/inaccurate?</h2>
|
||||||
|
<p>OpenLayers does not update the map when the container element is resized. This can be caused by progressive updates
|
||||||
|
to CSS styles or manually resizing the map. When that happens, any interaction will become inaccurate: the map would zoom in and out, and end up not being centered on the pointer. This makes it hard to do certain interactions, e.g. selecting the desired feature.</p>
|
||||||
|
<p>There is currently no built-in way to react to element's size changes, as <a href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver">Resize Observer API</a> is only implemented in Chrome.</p>
|
||||||
|
<p>There is however an easy to use <a href="https://github.com/que-etc/resize-observer-polyfill">polyfill</a>:</p>
|
||||||
|
<pre><code class="language-javascript">import Map from 'ol/Map.js';
|
||||||
|
import ResizeObserver from 'resize-observer-polyfill';
|
||||||
|
|
||||||
|
const mapElement = document.querySelector('#map')
|
||||||
|
const map = new Map({
|
||||||
|
target: mapElement
|
||||||
|
})
|
||||||
|
|
||||||
|
const sizeObserver = new ResizeObserver(() => {
|
||||||
|
map.updateSize()
|
||||||
|
})
|
||||||
|
sizeObserver.observe(mapElement)
|
||||||
|
|
||||||
|
// called when the map is destroyed
|
||||||
|
// sizeObserver.disconnect()
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>.
|
||||||
|
All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>.
|
||||||
|
Thanks to our <a href='https://opencollective.com/openlayers'>sponsors</a>.
|
||||||
|
<br>
|
||||||
|
<a href="https://www.netlify.com">This site is powered by Netlify.</a>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
91
map/test/doc/index.html
Normal file
91
map/test/doc/index.html
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||||
|
<title>OpenLayers - Documentation</title>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
|
||||||
|
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- menu items that get hidden below 768px width -->
|
||||||
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||||||
|
<ul class="nav navbar-nav ms-auto">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
|
||||||
|
<a class="dropdown-item" href="/doc/">Docs</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
|
||||||
|
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
|
||||||
|
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
|
||||||
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fa fa-sitemap me-1"></i>API
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
|
||||||
|
<a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v9.1.0 (latest)</a>
|
||||||
|
<a class="dropdown-item" href="/en/v8.1.0/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v8.1.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v7.5.2/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v7.5.2</a>
|
||||||
|
<a class="dropdown-item" href="/en/v6.15.1/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v6.15.1</a>
|
||||||
|
<a class="dropdown-item" href="/en/v5.3.0/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v5.3.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v4.6.5/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v4.6.5</a>
|
||||||
|
<a class="dropdown-item" href="/en/v3.20.1/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v3.20.1</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
|
||||||
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
|
||||||
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="documentation">Documentation</h1>
|
||||||
|
<p>If you're eager to get your first OpenLayers map on a page, dive into the <a href="./quickstart.html">quick start</a>.</p>
|
||||||
|
<p>For a more in-depth overview of OpenLayers core concepts, check out the <a href="./tutorials/">tutorials</a>.</p>
|
||||||
|
<p>Make sure to also check out the <a href="/workshop/">OpenLayers workshop</a>.</p>
|
||||||
|
<p>Find additional reference material in the <a href="/en/latest/apidoc/">API docs</a> and <a href="/en/latest/examples/">examples</a>.</p>
|
||||||
|
<h1 id="frequently-asked-questions-faq">Frequently Asked Questions (FAQ)</h1>
|
||||||
|
<p>We have put together a document that lists <a href="./faq.html">Frequently Asked Questions (FAQ)</a> and our answers. Common problems that may arise when using OpenLayers are explained there, and chances are you'll find an appropriate solution in this document.</p>
|
||||||
|
<h1 id="more-questions">More questions?</h1>
|
||||||
|
<p>If you cannot find an answer in the documentation or the FAQ, you can search <a href="https://stackoverflow.com/questions/tagged/openlayers">Stack Overflow</a>. If you cannot find an answer there, ask a new question there, using the tag 'openlayers'.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>.
|
||||||
|
All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>.
|
||||||
|
Thanks to our <a href='https://opencollective.com/openlayers'>sponsors</a>.
|
||||||
|
<br>
|
||||||
|
<a href="https://www.netlify.com">This site is powered by Netlify.</a>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
165
map/test/doc/quickstart.html
Normal file
165
map/test/doc/quickstart.html
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||||
|
<title>OpenLayers - Quick Start</title>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
|
||||||
|
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- menu items that get hidden below 768px width -->
|
||||||
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||||||
|
<ul class="nav navbar-nav ms-auto">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
|
||||||
|
<a class="dropdown-item" href="/doc/">Docs</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
|
||||||
|
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
|
||||||
|
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
|
||||||
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fa fa-sitemap me-1"></i>API
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
|
||||||
|
<a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v9.1.0 (latest)</a>
|
||||||
|
<a class="dropdown-item" href="/en/v8.1.0/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v8.1.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v7.5.2/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v7.5.2</a>
|
||||||
|
<a class="dropdown-item" href="/en/v6.15.1/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v6.15.1</a>
|
||||||
|
<a class="dropdown-item" href="/en/v5.3.0/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v5.3.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v4.6.5/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v4.6.5</a>
|
||||||
|
<a class="dropdown-item" href="/en/v3.20.1/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v3.20.1</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
|
||||||
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
|
||||||
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="quick-start">Quick Start</h1>
|
||||||
|
<p>This primer shows you how to put a map on a web page. The development setup uses <a href="https://nodejs.org/">Node</a> (14 or higher) and requires that you have <a href="https://github.com/git-guides/install-git"><code>git</code></a> installed.</p>
|
||||||
|
<h2 id="set-up-a-new-project">Set up a new project</h2>
|
||||||
|
<p>The easiest way to start building a project with OpenLayers is to run <code>npm create ol-app</code>:</p>
|
||||||
|
<pre><code class="language-bash">npm create ol-app my-app
|
||||||
|
cd my-app
|
||||||
|
npm start
|
||||||
|
</code></pre>
|
||||||
|
<p>The first command will create a directory called <code>my-app</code> (you can use a different name if you wish), install OpenLayers and a development server, and set up a basic app with <code>index.html</code>, <code>main.js</code>, and <code>style.css</code> files.</p>
|
||||||
|
<p>The second command (<code>cd my-app</code>) changes the working directory to your new <code>my-app</code> project so you can start working with it.</p>
|
||||||
|
<p>The third command (<code>npm start</code>) starts a development server so you can view your application in a browser while working on it. After running <code>npm start</code>, you'll see output that tells you the URL to open. Open <a href="http://localhost:5173/">http://localhost:5173/</a> (or whatever URL is displayed) to see your new application.</p>
|
||||||
|
<h2 id="exploring-the-parts">Exploring the parts</h2>
|
||||||
|
<p>An OpenLayers application is composed of three basic parts:</p>
|
||||||
|
<ul>
|
||||||
|
<li>The HTML markup with an element to contain the map (<code>index.html</code>)</li>
|
||||||
|
<li>The JavaScript that initializes the map (<code>main.js</code>)</li>
|
||||||
|
<li>The CSS styles that determine the map size and any other customizations (<code>style.css</code>)</li>
|
||||||
|
</ul>
|
||||||
|
<h3 id="the-markup">The markup</h3>
|
||||||
|
<p>Open the <code>index.html</code> file in a text editor. It should look something like this:</p>
|
||||||
|
<pre><code class="language-html"><!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Quick Start</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="map"></div>
|
||||||
|
<script type="module" src="./main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</code></pre>
|
||||||
|
<p>The two important parts in the markup are the <code><div></code> element to contain the map and the <code><script></code> tag to pull in the JavaScript. The map container or target should be a block level element (like a <code><div></code>) and it must appear in the document before the <code><script></code> tag that initializes the map.</p>
|
||||||
|
<h2 id="the-script">The script</h2>
|
||||||
|
<p>Open the <code>main.js</code> file in a text editor. It should look something like this:</p>
|
||||||
|
<pre><code class="language-js">import './style.css';
|
||||||
|
import Map from 'ol/Map.js';
|
||||||
|
import OSM from 'ol/source/OSM.js';
|
||||||
|
import TileLayer from 'ol/layer/Tile.js';
|
||||||
|
import View from 'ol/View.js';
|
||||||
|
|
||||||
|
const map = new Map({
|
||||||
|
target: 'map',
|
||||||
|
layers: [
|
||||||
|
new TileLayer({
|
||||||
|
source: new OSM(),
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
view: new View({
|
||||||
|
center: [0, 0],
|
||||||
|
zoom: 2,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
<p>OpenLayers is packaged as a collection of <a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules</a>. The <code>import</code> lines are used to pull in the modules that your application needs. Take a look through the <a href="/en/latest/examples/">examples</a> and <a href="/en/latest/apidoc/">API docs</a> to understand which modules you might want to use.</p>
|
||||||
|
<p>The <code>import './style.css';</code> line might be a bit unexpected. In this example, we're using <a href="https://vitejs.dev/">Vite</a> as a development server. Vite allows CSS to be imported from JavaScript modules. If you were using a different development server, you might include the <code>style.css</code> in a <code><link></code> tag in the <code>index.html</code> instead.</p>
|
||||||
|
<p>The <code>main.js</code> module serves as an entry point for your application. It initializes a new map, giving it a single layer with an OSM source and a view describing the center and zoom level. Read through the <a href="./tutorials/concepts.html">Basic Concepts tutorial</a> to learn more about <code>Map</code>, <code>View</code>, <code>Layer</code>, and <code>Source</code> components.</p>
|
||||||
|
<h2 id="the-style">The style</h2>
|
||||||
|
<p>Open the <code>style.css</code> file in a text editor. It should look something like this:</p>
|
||||||
|
<pre><code class="language-css">@import "node_modules/ol/ol.css";
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#map {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<p>The first line imports the <code>ol.css</code> file that comes with the <code>ol</code> package (OpenLayers is published as the <a href="https://www.npmjs.com/package/ol"><code>ol</code> package</a> in the npm registry). The <code>ol</code> package was installed in the <code>npm create ol-app</code> step above. If you were starting with an existing application instead of using <code>npm create ol-app</code>, you would install the package with <code>npm install ol</code>. The <code>ol.css</code> stylesheet includes styles for the elements that OpenLayers creates – things like buttons for zooming in and out.</p>
|
||||||
|
<p>The remaining rules in the <code>style.css</code> file make it so the <code><div id="map"></code> element that contains the map fills the entire page.</p>
|
||||||
|
<h2 id="deploying-your-app">Deploying your app</h2>
|
||||||
|
<p>You can make edits to the <code>index.html</code>, <code>main.js</code>, or <code>style.css</code> files and see the resulting change in your browser while running the development server (with <code>npm start</code>). After you have finished making edits, it is time to bundle or build your application so that it can be deployed as a static website (without needing to run a development server like Vite).</p>
|
||||||
|
<p>To build your application, run the following:</p>
|
||||||
|
<pre><code class="language-bash">npm run build
|
||||||
|
</code></pre>
|
||||||
|
<p>This will create a <code>dist</code> directory with a new <code>index.html</code> and assets that make up your application. These <code>dist</code> files can be deployed with your production website.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>.
|
||||||
|
All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>.
|
||||||
|
Thanks to our <a href='https://opencollective.com/openlayers'>sponsors</a>.
|
||||||
|
<br>
|
||||||
|
<a href="https://www.netlify.com">This site is powered by Netlify.</a>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
105
map/test/doc/tutorials/background.html
Normal file
105
map/test/doc/tutorials/background.html
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||||
|
<title>OpenLayers - Background</title>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
|
||||||
|
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- menu items that get hidden below 768px width -->
|
||||||
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||||||
|
<ul class="nav navbar-nav ms-auto">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
|
||||||
|
<a class="dropdown-item" href="/doc/">Docs</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
|
||||||
|
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
|
||||||
|
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
|
||||||
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fa fa-sitemap me-1"></i>API
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
|
||||||
|
<a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v9.1.0 (latest)</a>
|
||||||
|
<a class="dropdown-item" href="/en/v8.1.0/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v8.1.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v7.5.2/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v7.5.2</a>
|
||||||
|
<a class="dropdown-item" href="/en/v6.15.1/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v6.15.1</a>
|
||||||
|
<a class="dropdown-item" href="/en/v5.3.0/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v5.3.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v4.6.5/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v4.6.5</a>
|
||||||
|
<a class="dropdown-item" href="/en/v3.20.1/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v3.20.1</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
|
||||||
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
|
||||||
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="background">Background</h1>
|
||||||
|
<h2 id="overview">Overview</h2>
|
||||||
|
<p>OpenLayers is a modular, high-performance, feature-packed library for displaying and interacting with maps and geospatial data.</p>
|
||||||
|
<p>The library comes with built-in support for a wide range of commercial and free image and vector tile sources, and the most popular open and proprietary vector data formats. With OpenLayers's map projection support, data can be in any projection.</p>
|
||||||
|
<h2 id="public-api">Public API</h2>
|
||||||
|
<p>OpenLayers is available as <a href="https://npmjs.com/package/ol"><code>ol</code> npm package</a>, which provides all modules of the officially supported <a href="../../apidoc">API</a>.</p>
|
||||||
|
<h2 id="browser-support">Browser Support</h2>
|
||||||
|
<p>OpenLayers runs on all modern browsers (with greater than 1% global usage). This includes Chrome, Firefox, Safari and Edge. For older browsers, <a href="https://polyfill.io/">polyfills</a> will likely need to be added.</p>
|
||||||
|
<p>The library is intended for use on both desktop/laptop and mobile devices, and supports pointer and touch interactions.</p>
|
||||||
|
<h2 id="module-and-naming-conventions">Module and Naming Conventions</h2>
|
||||||
|
<p>OpenLayers modules with CamelCase names provide classes as default exports, and may contain additional constants or functions as named exports:</p>
|
||||||
|
<pre><code class="language-js">import Map from 'ol/Map.js';
|
||||||
|
import View from 'ol/View.js';
|
||||||
|
</code></pre>
|
||||||
|
<p>Class hierarchies grouped by their parent are provided in a subfolder of the package, e.g. <code>layer/</code>.</p>
|
||||||
|
<p>For convenience, these are also available as named exports, e.g.</p>
|
||||||
|
<pre><code class="language-js">import {Map, View} from 'ol';
|
||||||
|
import {Tile, Vector} from 'ol/layer.js';
|
||||||
|
</code></pre>
|
||||||
|
<p>In addition to these re-exported classes, modules with lowercase names also provide constants or functions as named exports:</p>
|
||||||
|
<pre><code class="language-js">import {getUid} from 'ol';
|
||||||
|
import {fromLonLat} from 'ol/proj.js';
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>.
|
||||||
|
All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>.
|
||||||
|
Thanks to our <a href='https://opencollective.com/openlayers'>sponsors</a>.
|
||||||
|
<br>
|
||||||
|
<a href="https://www.netlify.com">This site is powered by Netlify.</a>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
142
map/test/doc/tutorials/concepts.html
Normal file
142
map/test/doc/tutorials/concepts.html
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||||
|
<title>OpenLayers - Basic Concepts</title>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
|
||||||
|
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- menu items that get hidden below 768px width -->
|
||||||
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||||||
|
<ul class="nav navbar-nav ms-auto">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
|
||||||
|
<a class="dropdown-item" href="/doc/">Docs</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
|
||||||
|
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
|
||||||
|
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
|
||||||
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fa fa-sitemap me-1"></i>API
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
|
||||||
|
<a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v9.1.0 (latest)</a>
|
||||||
|
<a class="dropdown-item" href="/en/v8.1.0/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v8.1.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v7.5.2/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v7.5.2</a>
|
||||||
|
<a class="dropdown-item" href="/en/v6.15.1/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v6.15.1</a>
|
||||||
|
<a class="dropdown-item" href="/en/v5.3.0/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v5.3.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v4.6.5/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v4.6.5</a>
|
||||||
|
<a class="dropdown-item" href="/en/v3.20.1/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v3.20.1</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
|
||||||
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
|
||||||
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="basic-concepts">Basic Concepts</h1>
|
||||||
|
<h2 id="map">Map</h2>
|
||||||
|
<p>The core component of OpenLayers is the map (from the <code>ol/Map</code> module). It is rendered to a <code>target</code> container (e.g. a <code>div</code> element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. <code>setTarget()</code>.</p>
|
||||||
|
<p>The markup below could be used to create a <code><div></code> that contains your map.</p>
|
||||||
|
<pre><code class="language-xml"><div id="map" style="width: 100%; height: 400px"></div>
|
||||||
|
</code></pre>
|
||||||
|
<p>The script below constructs a map that is rendered in the <code><div></code> above, using the <code>map</code> id of the element as a selector.</p>
|
||||||
|
<pre><code class="language-js">import Map from 'ol/Map.js';
|
||||||
|
|
||||||
|
const map = new Map({target: 'map'});
|
||||||
|
</code></pre>
|
||||||
|
<h2 id="view">View</h2>
|
||||||
|
<p>The map is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of a <code>ol/View</code> instance.</p>
|
||||||
|
<pre><code class="language-js">import View from 'ol/View.js';
|
||||||
|
|
||||||
|
map.setView(new View({
|
||||||
|
center: [0, 0],
|
||||||
|
zoom: 2,
|
||||||
|
}));
|
||||||
|
</code></pre>
|
||||||
|
<p>A <code>View</code> also has a <code>projection</code>. The projection determines the coordinate system of the <code>center</code> and the units for map resolution calculations. If not specified (like in the above snippet), the default projection is Spherical Mercator (EPSG:3857), with meters as map units.</p>
|
||||||
|
<p>The <code>zoom</code> option is a convenient way to specify the map resolution. The available zoom levels are determined by <code>maxZoom</code> (default: 28), <code>zoomFactor</code> (default: 2) and <code>maxResolution</code> (default is calculated in such a way that the projection's validity extent fits in a 256x256 pixel tile). Starting at zoom level 0 with a resolution of <code>maxResolution</code> units per pixel, subsequent zoom levels are calculated by dividing the previous zoom level's resolution by <code>zoomFactor</code>, until zoom level <code>maxZoom</code> is reached.</p>
|
||||||
|
<h2 id="source">Source</h2>
|
||||||
|
<p>To get remote data for a layer, OpenLayers uses <code>ol/source/Source</code> subclasses. These are available for free and commercial map tile services like OpenStreetMap or Bing, for OGC sources like WMS or WMTS, and for vector data in formats like GeoJSON or KML.</p>
|
||||||
|
<pre><code class="language-js">import OSM from 'ol/source/OSM.js';
|
||||||
|
|
||||||
|
const source = OSM();
|
||||||
|
</code></pre>
|
||||||
|
<h2 id="layer">Layer</h2>
|
||||||
|
<p>A layer is a visual representation of data from a source. OpenLayers has four basic types of layers:</p>
|
||||||
|
<ul>
|
||||||
|
<li><code>ol/layer/Tile</code> - Renders sources that provide tiled images in grids that are organized by zoom levels for specific resolutions.</li>
|
||||||
|
<li><code>ol/layer/Image</code> - Renders sources that provide map images at arbitrary extents and resolutions.</li>
|
||||||
|
<li><code>ol/layer/Vector</code> - Renders vector data client-side.</li>
|
||||||
|
<li><code>ol/layer/VectorTile</code> - Renders data that is provided as vector tiles.</li>
|
||||||
|
</ul>
|
||||||
|
<pre><code class="language-js">import TileLayer from 'ol/layer/Tile.js';
|
||||||
|
|
||||||
|
// ...
|
||||||
|
const layer = new TileLayer({source: source});
|
||||||
|
map.addLayer(layer);
|
||||||
|
</code></pre>
|
||||||
|
<h2 id="putting-it-all-together">Putting it all together</h2>
|
||||||
|
<p>The above snippets can be combined into a single script that renders a map with a single tile layer:</p>
|
||||||
|
<pre><code class="language-js">import Map from 'ol/Map.js';
|
||||||
|
import View from 'ol/View.js';
|
||||||
|
import OSM from 'ol/source/OSM.js';
|
||||||
|
import TileLayer from 'ol/layer/Tile.js';
|
||||||
|
|
||||||
|
new Map({
|
||||||
|
layers: [
|
||||||
|
new TileLayer({source: new OSM()}),
|
||||||
|
],
|
||||||
|
view: new View({
|
||||||
|
center: [0, 0],
|
||||||
|
zoom: 2,
|
||||||
|
}),
|
||||||
|
target: 'map',
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>.
|
||||||
|
All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>.
|
||||||
|
Thanks to our <a href='https://opencollective.com/openlayers'>sponsors</a>.
|
||||||
|
<br>
|
||||||
|
<a href="https://www.netlify.com">This site is powered by Netlify.</a>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
88
map/test/doc/tutorials/index.html
Normal file
88
map/test/doc/tutorials/index.html
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||||
|
<title>OpenLayers - Tutorials</title>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
|
||||||
|
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- menu items that get hidden below 768px width -->
|
||||||
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||||||
|
<ul class="nav navbar-nav ms-auto">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
|
||||||
|
<a class="dropdown-item" href="/doc/">Docs</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
|
||||||
|
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
|
||||||
|
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
|
||||||
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fa fa-sitemap me-1"></i>API
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
|
||||||
|
<a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v9.1.0 (latest)</a>
|
||||||
|
<a class="dropdown-item" href="/en/v8.1.0/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v8.1.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v7.5.2/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v7.5.2</a>
|
||||||
|
<a class="dropdown-item" href="/en/v6.15.1/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v6.15.1</a>
|
||||||
|
<a class="dropdown-item" href="/en/v5.3.0/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v5.3.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v4.6.5/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v4.6.5</a>
|
||||||
|
<a class="dropdown-item" href="/en/v3.20.1/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v3.20.1</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
|
||||||
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
|
||||||
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="tutorials">Tutorials</h1>
|
||||||
|
<ul>
|
||||||
|
<li><a href="concepts.html">Basic Concepts</a></li>
|
||||||
|
<li><a href="background.html">Some Background on OpenLayers</a></li>
|
||||||
|
<li><a href="raster-reprojection.html">Raster Reprojection</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>.
|
||||||
|
All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>.
|
||||||
|
Thanks to our <a href='https://opencollective.com/openlayers'>sponsors</a>.
|
||||||
|
<br>
|
||||||
|
<a href="https://www.netlify.com">This site is powered by Netlify.</a>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
187
map/test/doc/tutorials/raster-reprojection.html
Normal file
187
map/test/doc/tutorials/raster-reprojection.html
Normal file
@ -0,0 +1,187 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||||
|
<title>OpenLayers - Raster Reprojection</title>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
|
||||||
|
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- menu items that get hidden below 768px width -->
|
||||||
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||||||
|
<ul class="nav navbar-nav ms-auto">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
|
||||||
|
<a class="dropdown-item" href="/doc/">Docs</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
|
||||||
|
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
|
||||||
|
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
|
||||||
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fa fa-sitemap me-1"></i>API
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
|
||||||
|
<a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v9.1.0 (latest)</a>
|
||||||
|
<a class="dropdown-item" href="/en/v8.1.0/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v8.1.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v7.5.2/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v7.5.2</a>
|
||||||
|
<a class="dropdown-item" href="/en/v6.15.1/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v6.15.1</a>
|
||||||
|
<a class="dropdown-item" href="/en/v5.3.0/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v5.3.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v4.6.5/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v4.6.5</a>
|
||||||
|
<a class="dropdown-item" href="/en/v3.20.1/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v3.20.1</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
|
||||||
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
|
||||||
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="raster-reprojection">Raster Reprojection</h1>
|
||||||
|
<p>OpenLayers has an ability to display raster data from WMS, WMTS, static images and many other sources in a different coordinate system than delivered from the server.
|
||||||
|
Transformation of the map projections of the image happens directly in a web browser.
|
||||||
|
The view in any Proj4js supported coordinate reference system is possible and previously incompatible layers can now be combined and overlaid.</p>
|
||||||
|
<h1 id="usage">Usage</h1>
|
||||||
|
<p>The API usage is very simple. Just specify proper projection (e.g. using <a href="https://epsg.io">EPSG</a> code) on <code>ol/View</code>:</p>
|
||||||
|
<pre><code class="language-js">import Map from 'ol/Map.js';
|
||||||
|
import TileLayer from 'ol/layer/Tile.js';
|
||||||
|
import TileWMS from 'ol/source/TileWMS.js';
|
||||||
|
import View from 'ol/View.js';
|
||||||
|
|
||||||
|
const map = new Map({
|
||||||
|
target: 'map',
|
||||||
|
view: new View({
|
||||||
|
projection: 'EPSG:3857', // here is the view projection
|
||||||
|
center: [0, 0],
|
||||||
|
zoom: 2,
|
||||||
|
}),
|
||||||
|
layers: [
|
||||||
|
new TileLayer({
|
||||||
|
source: new TileWMS({
|
||||||
|
projection: 'EPSG:4326', // here is the source projection
|
||||||
|
url: 'https://ahocevar.com/geoserver/wms',
|
||||||
|
params: {
|
||||||
|
'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
<p>If a source (based on <code>ol/source/TileImage</code> or <code>ol/source/Image</code>) has a projection different from the current <code>ol/View</code>’s projection then the reprojection happens automatically under the hood.</p>
|
||||||
|
<h3 id="examples">Examples</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/en/latest/examples/reprojection.html">Raster reprojection demo</a></li>
|
||||||
|
<li><a href="/en/latest/examples/reprojection-wgs84.html">OpenStreetMap to WGS84 reprojection</a></li>
|
||||||
|
<li><a href="/en/latest/examples/reprojection-by-code.html">Reprojection with EPSG.io database search</a></li>
|
||||||
|
<li><a href="/en/latest/examples/reprojection-image.html">Image reprojection</a></li>
|
||||||
|
</ul>
|
||||||
|
<h3 id="custom-projection">Custom projection</h3>
|
||||||
|
<p>The easiest way to use a custom projection is to add the <a href="http://proj4js.org/">Proj4js</a> library to your project and then define the projection using a proj4 definition string. It can be installed with</p>
|
||||||
|
<pre><code>npm install proj4
|
||||||
|
</code></pre>
|
||||||
|
<p>Following example shows definition of a <a href="https://epsg.io/27700">British National Grid</a>:</p>
|
||||||
|
<pre><code class="language-js">import proj4 from 'proj4';
|
||||||
|
import {get as getProjection} from 'ol/proj.js';
|
||||||
|
import {register} from 'ol/proj/proj4.js';
|
||||||
|
|
||||||
|
proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
|
||||||
|
'+x_0=400000 +y_0=-100000 +ellps=airy ' +
|
||||||
|
'+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
|
||||||
|
'+units=m +no_defs');
|
||||||
|
register(proj4);
|
||||||
|
const proj27700 = getProjection('EPSG:27700');
|
||||||
|
proj27700.setExtent([0, 0, 700000, 1300000]);
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="change-of-the-view-projection">Change of the view projection</h3>
|
||||||
|
<p>To switch the projection used to display the map you have to set a new <code>ol/View</code> with selected projection on the <code>ol/Map</code>:</p>
|
||||||
|
<pre><code class="language-js">map.setView(new View({
|
||||||
|
projection: 'EPSG:27700',
|
||||||
|
center: [400000, 650000],
|
||||||
|
zoom: 4,
|
||||||
|
}));
|
||||||
|
</code></pre>
|
||||||
|
<h2 id="tilegrid-and-extents">TileGrid and Extents</h2>
|
||||||
|
<p>When reprojection is needed, new tiles (in the target projection) are under the hood created from the original source tiles.
|
||||||
|
The TileGrid of the reprojected tiles is by default internally constructed using <code>ol/tilegrid~getForProjection(projection)</code>.
|
||||||
|
The projection should have extent defined (see above) for this to work properly.</p>
|
||||||
|
<p>Alternatively, a custom target TileGrid can be constructed manually and set on the source instance using <code>ol/source/TileImage~setTileGridForProjection(projection, tilegrid)</code>.
|
||||||
|
This TileGrid will then be used when reprojecting to the specified projection instead of creating the default one.
|
||||||
|
In certain cases, this can be used to optimize performance (by tweaking tile sizes) or visual quality (by specifying resolutions).</p>
|
||||||
|
<h1 id="how-it-works">How it works</h1>
|
||||||
|
<p>The reprojection process is based on triangles – the target raster is divided into a limited number of triangles with vertices transformed using <code>ol/proj</code> capabilities (<a href="http://proj4js.org/">proj4js</a> is usually utilized to define custom transformations).
|
||||||
|
The reprojection of pixels inside the triangle is approximated with an affine transformation (with rendering hardware-accelerated by the canvas 2d context):</p>
|
||||||
|
<img src="raster-reprojection-resources/how-it-works.jpg" alt="How it works" width="600" />
|
||||||
|
|
||||||
|
<p>This way we can support a wide range of projections from proj4js (or even custom transformation functions) on almost any hardware (with canvas 2d support) with a relatively small number of actual transformation calculations.</p>
|
||||||
|
<p>The precision of the reprojection is then limited by the number of triangles.</p>
|
||||||
|
<p>The reprojection process preserves transparency on the raster data supplied from the source (png or gif) and the gaps and no-data pixels generated by reprojection are automatically transparent.</p>
|
||||||
|
<h3 id="dynamic-triangulation">Dynamic triangulation</h3>
|
||||||
|
<p>The above image above shows a noticeable error (especially on the edges) when the original image (left; EPSG:27700) is transformed with only a limited number of triangles (right; EPSG:3857).
|
||||||
|
The error can be minimized by increasing the number of triangles used.</p>
|
||||||
|
<p>Since some transformations require a more detail triangulation network, the dynamic triangulation process automatically measures reprojection error and iteratively subdivides to meet a specific error threshold:</p>
|
||||||
|
<img src="raster-reprojection-resources/iterative-triangulation.png" alt="Iterative triangulation" width="600" />
|
||||||
|
|
||||||
|
<p>For debugging, rendering of the reprojection edges can be enabled by <code>ol.source.TileImage#setRenderReprojectionEdges(true)</code>.</p>
|
||||||
|
<h1 id="advanced">Advanced</h1>
|
||||||
|
<h3 id="triangulation-precision-threshold">Triangulation precision threshold</h3>
|
||||||
|
<p>The default <a href="#dynamic-triangulation">triangulation error threshold</a> in pixels is given by <code>ERROR_THRESHOLD</code> (0.5 pixel).
|
||||||
|
In case a different threshold needs to be defined for different sources, the <code>reprojectionErrorThreshold</code> option can be passed when constructing the tile image source.</p>
|
||||||
|
<h3 id="limiting-visibility-of-reprojected-map-by-extent">Limiting visibility of reprojected map by extent</h3>
|
||||||
|
<p>The reprojection algorithm uses inverse transformation (from <em>view projection</em> to <em>data projection</em>).
|
||||||
|
For certain coordinate systems this can result in a "double occurrence" of the source data on a map.
|
||||||
|
For example, when reprojecting a map of Switzerland from EPSG:21781 to EPSG:3857, it is displayed twice: once at the proper place in Europe, but also in the Pacific Ocean near New Zealand, on the opposite side of the globe.</p>
|
||||||
|
<img src="raster-reprojection-resources/double-occurrence.jpg" alt="Double occurrence of a reprojected map" width="600" />
|
||||||
|
|
||||||
|
<p>Although this is mathematically correct behavior of the inverse transformation, visibility of the layer on multiple places is not expected by users.
|
||||||
|
A possible general solution would be to calculate the forward transformation for every vertex as well - but this would significantly decrease performance (especially for computationally expensive transformations).</p>
|
||||||
|
<p>Therefore a recommended workaround is to define a proper visibility extent on the <code>ol.layer.Tile</code> in the view projection.
|
||||||
|
Setting such a limit is demonstrated in the <a href="https://openlayers.org/en/latest/examples/reprojection.html">reprojection demo example</a>.</p>
|
||||||
|
<h3 id="resolution-calculation">Resolution calculation</h3>
|
||||||
|
<p>When determining source tiles to load, the ideal source resolution needs to be calculated.
|
||||||
|
The <code>ol/reproj~calculateSourceResolution(sourceProj, targetProj, targetCenter, targetResolution)</code> function calculates the ideal value in order to achieve pixel mapping as close as possible to 1:1 during reprojection, which is then used to select proper zoom level from the source.</p>
|
||||||
|
<p>It is, however, generally not practical to use the same source zoom level for the whole target zoom level -- different projections can have significantly different resolutions in different parts of the world (e.g. polar regions in EPSG:3857 vs EPSG:4326) and enforcing a single resolution for the whole zoom level would result in some tiles being scaled up/down, possibly requiring a huge number of source tiles to be loaded.
|
||||||
|
Therefore, the resolution mapping is calculated separately for each reprojected tile (in the middle of the tile extent).</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>.
|
||||||
|
All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>.
|
||||||
|
Thanks to our <a href='https://opencollective.com/openlayers'>sponsors</a>.
|
||||||
|
<br>
|
||||||
|
<a href="https://www.netlify.com">This site is powered by Netlify.</a>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
139
map/test/download/index.html
Normal file
139
map/test/download/index.html
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||||
|
<title>OpenLayers - Get the Code</title>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
|
||||||
|
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- menu items that get hidden below 768px width -->
|
||||||
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||||||
|
<ul class="nav navbar-nav ms-auto">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
|
||||||
|
<a class="dropdown-item" href="/doc/">Docs</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
|
||||||
|
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
|
||||||
|
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
|
||||||
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fa fa-sitemap me-1"></i>API
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
|
||||||
|
<a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v9.1.0 (latest)</a>
|
||||||
|
<a class="dropdown-item" href="/en/v8.1.0/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v8.1.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v7.5.2/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v7.5.2</a>
|
||||||
|
<a class="dropdown-item" href="/en/v6.15.1/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v6.15.1</a>
|
||||||
|
<a class="dropdown-item" href="/en/v5.3.0/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v5.3.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v4.6.5/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v4.6.5</a>
|
||||||
|
<a class="dropdown-item" href="/en/v3.20.1/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v3.20.1</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
|
||||||
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
|
||||||
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="container mt-4 pt-4">
|
||||||
|
<div class="row">
|
||||||
|
<h3 class="col-sm-12">The <code>ol</code> package</h3>
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<p>
|
||||||
|
The recommended way to use OpenLayers is to work with the <a href="https://www.npmjs.com/package/ol"><code>ol</code> package</a>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
To add OpenLayers to an existing project, install the latest with <code>npm</code>:
|
||||||
|
<pre><code class="language-shell-session">npm install ol</code></pre>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
If you are starting a new project from scratch, see the <a href="../doc/quickstart.html">quick start docs</a> for more information.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<h3 class="col-sm-12">Hosted build for development</h3>
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<p>
|
||||||
|
If you want to try out OpenLayers without downloading anything (<b>not recommended for production</b>), include the following in the head of your html page:
|
||||||
|
<pre><code class="language-html"><script src="https://cdn.jsdelivr.net/npm/ol@v9.1.0/dist/ol.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v9.1.0/ol.css">
|
||||||
|
</code></pre>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
The full build of the library does not include all dependencies: the <code>geotiff</code> and <code>ol-mapbox-style</code> packages are omitted. If you use these, you'll need to add additional script tags.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<h3 class="col-sm-12">Downloads for the v9.1.0 release</h3>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<table class="table table-hover">
|
||||||
|
<tbody>
|
||||||
|
<tr><th>Archive</th><th>Description</th></tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/openlayers/openlayers/releases/download/v9.1.0/v9.1.0-site.zip">v9.1.0-site.zip</a></td>
|
||||||
|
<td>Includes examples and documentation.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="https://github.com/openlayers/openlayers/releases/download/v9.1.0/v9.1.0-package.zip">v9.1.0-package.zip</a></td>
|
||||||
|
<td>Includes sources and the full build of the library.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p>
|
||||||
|
See the <a href="https://github.com/openlayers/openlayers/releases/tag/v9.1.0">v9.1.0 release page</a> for a changelog and any special upgrade notes.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
For archives of previous releases, see the <a href="https://github.com/openlayers/openlayers/releases/">complete list of releases</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>.
|
||||||
|
All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>.
|
||||||
|
Thanks to our <a href='https://opencollective.com/openlayers'>sponsors</a>.
|
||||||
|
<br>
|
||||||
|
<a href="https://www.netlify.com">This site is powered by Netlify.</a>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
map/test/favicon.ico
Normal file
BIN
map/test/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
204
map/test/index.html
Normal file
204
map/test/index.html
Normal file
@ -0,0 +1,204 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||||
|
<title>OpenLayers - Welcome</title>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/ol.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/theme/site.css">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="./theme/index.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
|
||||||
|
<a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- menu items that get hidden below 768px width -->
|
||||||
|
<nav class="collapse navbar-collapse" id="olmenu">
|
||||||
|
<ul class="nav navbar-nav ms-auto">
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
|
||||||
|
<a class="dropdown-item" href="/doc/">Docs</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
|
||||||
|
<a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
|
||||||
|
<a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
|
||||||
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
|
<i class="fa fa-sitemap me-1"></i>API
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
|
||||||
|
<a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v9.1.0 (latest)</a>
|
||||||
|
<a class="dropdown-item" href="/en/v8.1.0/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v8.1.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v7.5.2/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v7.5.2</a>
|
||||||
|
<a class="dropdown-item" href="/en/v6.15.1/apidoc/"><i class="fa fa-sitemap a-fw me-2 fa-lg"></i>v6.15.1</a>
|
||||||
|
<a class="dropdown-item" href="/en/v5.3.0/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v5.3.0</a>
|
||||||
|
<a class="dropdown-item" href="/en/v4.6.5/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v4.6.5</a>
|
||||||
|
<a class="dropdown-item" href="/en/v3.20.1/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v3.20.1</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||||||
|
<div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
|
||||||
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
|
||||||
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div id='map'></div>
|
||||||
|
<div class='container'>
|
||||||
|
<blockquote id='tagline' class='text-end plain'>
|
||||||
|
<p>A high-performance, feature-packed library for all your mapping needs.</p>
|
||||||
|
</blockquote>
|
||||||
|
<div class='row' id='news'>
|
||||||
|
<div class='col-sm-12'>
|
||||||
|
<h1 class='topic'><i class='fa fa-rss'></i> Latest</h1>
|
||||||
|
<p><strong>OpenLayers <a href="/download/">v9.1.0</a> is here!</strong> Check out the <a href="/doc/">docs</a> and the <a href="/en/latest/examples/">examples</a> to get started. The full distribution can be downloaded from the <a href="/download/">release page</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='row'>
|
||||||
|
<h1 class='topic col-sm-12'>Overview</h1>
|
||||||
|
</div>
|
||||||
|
<div class='row'>
|
||||||
|
<div class='col-sm-12'>
|
||||||
|
<p>OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector data and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='row'>
|
||||||
|
<h1 class='topic col-sm-12'>Features</h1>
|
||||||
|
</div>
|
||||||
|
<div class='row'>
|
||||||
|
<div class='col-sm-6'>
|
||||||
|
<h3>Tiled Layers</h3>
|
||||||
|
<img src='/theme/img/tiled-layers.png' width="102" height="84" class='thumb' alt="tiled layers">
|
||||||
|
<p>Pull tiles from OSM, Bing, MapBox, Stadia Maps, and any other XYZ source you can find. OGC mapping services and untiled layers also supported.</p>
|
||||||
|
</div>
|
||||||
|
<div class='col-sm-6'>
|
||||||
|
<h3>Vector Layers</h3>
|
||||||
|
<img src='/theme/img/vector-layers.png' width="102" height="84" class='thumb' alt="vector layers">
|
||||||
|
<p>Render vector data from GeoJSON, TopoJSON, KML, GML, Mapbox vector tiles, and other formats.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='row'>
|
||||||
|
<div class='col-sm-6'>
|
||||||
|
<h3>Cutting Edge, Fast & Mobile Ready</h3>
|
||||||
|
<img src='/theme/img/timeline.png' width="102" height="84" class='thumb' alt="mobile ready">
|
||||||
|
<p>Leverages Canvas 2D, WebGL, and all the latest greatness from HTML5. Mobile support out of the box. Build lightweight custom profiles with just the components you need.</p>
|
||||||
|
</div>
|
||||||
|
<div class='col-sm-6'>
|
||||||
|
<h3>Easy to Customize and Extend</h3>
|
||||||
|
<img src='/theme/img/popup.png' width="102" height="84" class='thumb' alt="customizable">
|
||||||
|
<p>Style your map controls with straight-forward CSS. Hook into different levels of the API or use <a href="/3rd-party/">3rd party libraries</a> to customize and extend functionality.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='row'>
|
||||||
|
<h1 class='topic col-sm-12'>Learn More</h1>
|
||||||
|
</div>
|
||||||
|
<div class='row'>
|
||||||
|
<div class='col-sm-6'>
|
||||||
|
<a href='/doc/quickstart.html'>
|
||||||
|
<h3><i class='fa fa-check'></i> Quick Start</h3>
|
||||||
|
</a>
|
||||||
|
<p>Seen enough already? Go here to get started.</p>
|
||||||
|
</div>
|
||||||
|
<div class='col-sm-6'>
|
||||||
|
<a href='/download/'>
|
||||||
|
<h3><i class='fa fa-download'></i> Get the Code</h3>
|
||||||
|
</a>
|
||||||
|
<p>Get the latest release or dig through the archives.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='row'>
|
||||||
|
<div class='col-sm-6'>
|
||||||
|
<a href='/doc/tutorials/'>
|
||||||
|
<h3><i class='fa fa-book'></i> Tutorials</h3>
|
||||||
|
</a>
|
||||||
|
<p>Spend time learning the basics and graduate up to advanced mapping techniques.</p>
|
||||||
|
</div>
|
||||||
|
<div class='col-sm-6'>
|
||||||
|
<a href='/workshop/'>
|
||||||
|
<h3><i class='fa fa-graduation-cap'></i> Workshop</h3>
|
||||||
|
</a>
|
||||||
|
<p>Want to learn OpenLayers hands-on? Get started with the workshop.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='row'>
|
||||||
|
<div class='col-sm-6'>
|
||||||
|
<a href='/en/latest/apidoc/'>
|
||||||
|
<h3><i class='fa fa-sitemap'></i> API Docs</h3>
|
||||||
|
</a>
|
||||||
|
<p>Browse through the API docs for details on code usage.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='row'>
|
||||||
|
<h1 class='topic col-sm-12'>Older versions</h1>
|
||||||
|
<div class='col-sm-12'>
|
||||||
|
<p>In case you are not ready (yet) for the latest version of OpenLayers, we provide links to selected resources of older major versions of the software.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Latest v8: <a href="https://github.com/openlayers/openlayers/releases/tag/v8.1.0">v8.1.0</a> released 2023-09-07 — <a href="/en/v8.1.0/apidoc/">API</a> & <a href="/en/v8.1.0/examples/">examples</a></li>
|
||||||
|
<li>Latest v7: <a href="https://github.com/openlayers/openlayers/releases/tag/v7.5.2">v7.5.2</a> released 2023-08-31 — <a href="/en/v7.5.2/apidoc/">API</a> & <a href="/en/v7.5.2/examples/">examples</a></li>
|
||||||
|
<li>Latest v6: <a href="https://github.com/openlayers/openlayers/releases/tag/v6.15.1">v6.15.1</a> released 2022-07-18 — <a href="/en/v6.15.1/doc/">docs</a>, <a href="/en/v6.15.1/apidoc/">API</a> & <a href="/en/v6.15.1/examples/">examples</a></li>
|
||||||
|
<li>Latest v5: <a href="https://github.com/openlayers/openlayers/releases/tag/v5.3.0">v5.3.0</a> released 2018-11-06 — <a href="/en/v5.3.0/doc/">docs</a>, <a href="/en/v5.3.0/apidoc/">API</a> & <a href="/en/v5.3.0/examples/">examples</a></li>
|
||||||
|
<li>Latest v4: <a href="https://github.com/openlayers/openlayers/releases/tag/v4.6.5">v4.6.5</a> released 2018-03-20 — <a href="/en/v4.6.5/doc/">docs</a>, <a href="/en/v4.6.5/apidoc/">API</a> & <a href="/en/v4.6.5/examples/">examples</a></li>
|
||||||
|
<li>Latest v3: <a href="https://github.com/openlayers/openlayers/releases/tag/v3.20.1">v3.20.1</a>, released 2016-12-21 — <a href="/en/v3.20.1/doc/">docs</a>, <a href="/en/v3.20.1/apidoc/">API</a> & <a href="/en/v3.20.1/examples/">examples</a></li>
|
||||||
|
<li>Latest v2: v2.13.1, released 2013-07-09 — you'll find everything you need on the <a href="./two/">2.x page</a></li>
|
||||||
|
</ul>
|
||||||
|
<p>Please consider upgrading to benefit from the latest features and bug fixes. Get better performance and usability for free by using recent versions of OpenLayers.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='row'>
|
||||||
|
<h1 class='topic col-sm-12'>Get Involved</h1>
|
||||||
|
</div>
|
||||||
|
<div class='row'>
|
||||||
|
<div class='col-sm-4'>
|
||||||
|
<a href='https://github.com/openlayers/openlayers'>
|
||||||
|
<h3><i class="fa fa-code-fork"></i> Fork the repo</h3>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class='col-sm-4'>
|
||||||
|
<a href='https://github.com/openlayers/openlayers/issues'>
|
||||||
|
<h3><i class="fa fa-bug"></i> Open a ticket</h3>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class='col-sm-4'>
|
||||||
|
<a href='http://stackoverflow.com/questions/tagged/openlayers'>
|
||||||
|
<h3><i class="fa fa-user"></i> Ask a question</h3>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="./main.js"></script>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
Code licensed under the <a href='http://www.tldrlegal.com/license/bsd-2-clause-license-(freebsd)'>2-Clause BSD</a>.
|
||||||
|
All documentation <a href='http://creativecommons.org/licenses/by/3.0/'>CC BY 3.0</a>.
|
||||||
|
Thanks to our <a href='https://opencollective.com/openlayers'>sponsors</a>.
|
||||||
|
<br>
|
||||||
|
<a href="https://www.netlify.com">This site is powered by Netlify.</a>
|
||||||
|
</footer>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
3
map/test/main.js
Normal file
3
map/test/main.js
Normal file
File diff suppressed because one or more lines are too long
23
map/test/theme/img/logo-dark.svg
Normal file
23
map/test/theme/img/logo-dark.svg
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100" height="100" viewBox="0 0 100 100"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<g id="layer" transform="translate(50 50)">
|
||||||
|
<g transform="scale(0.7071 0.5)">
|
||||||
|
<g transform="translate(-50 -50)">
|
||||||
|
<rect width="100" height="100" rx="15" transform="rotate(45 50 50)" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</defs>
|
||||||
|
<g fill="#FFFFFF" transform="translate(0 10)">
|
||||||
|
<use xlink:href="#layer"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#333333">
|
||||||
|
<use xlink:href="#layer"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#00AAFF" transform="translate(0 -10)">
|
||||||
|
<use xlink:href="#layer"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 739 B |
23
map/test/theme/img/logo-light.svg
Normal file
23
map/test/theme/img/logo-light.svg
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100" height="100" viewBox="0 0 100 100"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<defs>
|
||||||
|
<g id="layer" transform="translate(50 50)">
|
||||||
|
<g transform="scale(0.7071 0.5)">
|
||||||
|
<g transform="translate(-50 -50)">
|
||||||
|
<rect width="100" height="100" rx="15" transform="rotate(45 50 50)" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</defs>
|
||||||
|
<g fill="#333333" transform="translate(0 10)">
|
||||||
|
<use xlink:href="#layer"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#FFFFFF">
|
||||||
|
<use xlink:href="#layer"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#00AAFF" transform="translate(0 -10)">
|
||||||
|
<use xlink:href="#layer"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 739 B |
BIN
map/test/theme/img/popup.png
Normal file
BIN
map/test/theme/img/popup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
map/test/theme/img/tiled-layers.png
Normal file
BIN
map/test/theme/img/tiled-layers.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
map/test/theme/img/timeline.png
Normal file
BIN
map/test/theme/img/timeline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
map/test/theme/img/vector-layers.png
Normal file
BIN
map/test/theme/img/vector-layers.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
50
map/test/theme/index.css
Normal file
50
map/test/theme/index.css
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
#map {
|
||||||
|
position: relative;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#map:fullscreen {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#map:-webkit-full-screen {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tagline {
|
||||||
|
padding-left: 25%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tagline p {
|
||||||
|
font-size: 150%;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
#news {
|
||||||
|
background-color: var(--ol-accent-background-color);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 1rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#news h1 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.thumb {
|
||||||
|
float: right;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ol customizations */
|
||||||
|
|
||||||
|
.ol-overlaycontainer-stopevent {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 300ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* not done with :hover because the overlay blocks events and has no height */
|
||||||
|
.over .ol-overlaycontainer-stopevent {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
350
map/test/theme/ol.css
Normal file
350
map/test/theme/ol.css
Normal file
@ -0,0 +1,350 @@
|
|||||||
|
:root,
|
||||||
|
:host {
|
||||||
|
--ol-background-color: white;
|
||||||
|
--ol-accent-background-color: #F5F5F5;
|
||||||
|
--ol-subtle-background-color: rgba(128, 128, 128, 0.25);
|
||||||
|
--ol-partial-background-color: rgba(255, 255, 255, 0.75);
|
||||||
|
--ol-foreground-color: #333333;
|
||||||
|
--ol-subtle-foreground-color: #666666;
|
||||||
|
--ol-brand-color: #00AAFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-box {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1.5px solid var(--ol-background-color);
|
||||||
|
background-color: var(--ol-partial-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-mouse-position {
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-scale-line {
|
||||||
|
background: var(--ol-partial-background-color);
|
||||||
|
border-radius: 4px;
|
||||||
|
bottom: 8px;
|
||||||
|
left: 8px;
|
||||||
|
padding: 2px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-scale-line-inner {
|
||||||
|
border: 1px solid var(--ol-subtle-foreground-color);
|
||||||
|
border-top: none;
|
||||||
|
color: var(--ol-foreground-color);
|
||||||
|
font-size: 10px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 1px;
|
||||||
|
will-change: contents, width;
|
||||||
|
transition: all 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-scale-bar {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 8px;
|
||||||
|
left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-scale-bar-inner {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-scale-step-marker {
|
||||||
|
width: 1px;
|
||||||
|
height: 15px;
|
||||||
|
background-color: var(--ol-foreground-color);
|
||||||
|
float: right;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-scale-step-text {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -5px;
|
||||||
|
font-size: 10px;
|
||||||
|
z-index: 11;
|
||||||
|
color: var(--ol-foreground-color);
|
||||||
|
text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-scale-text {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
bottom: 25px;
|
||||||
|
color: var(--ol-foreground-color);
|
||||||
|
text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-scale-singlebar {
|
||||||
|
position: relative;
|
||||||
|
height: 10px;
|
||||||
|
z-index: 9;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid var(--ol-foreground-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-scale-singlebar-even {
|
||||||
|
background-color: var(--ol-subtle-foreground-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-scale-singlebar-odd {
|
||||||
|
background-color: var(--ol-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-unsupported {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-viewport,
|
||||||
|
.ol-unselectable {
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-viewport canvas {
|
||||||
|
all: unset;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-viewport {
|
||||||
|
touch-action: pan-x pan-y;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-selectable {
|
||||||
|
-webkit-touch-callout: default;
|
||||||
|
-webkit-user-select: text;
|
||||||
|
-moz-user-select: text;
|
||||||
|
user-select: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-grabbing {
|
||||||
|
cursor: -webkit-grabbing;
|
||||||
|
cursor: -moz-grabbing;
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-grab {
|
||||||
|
cursor: move;
|
||||||
|
cursor: -webkit-grab;
|
||||||
|
cursor: -moz-grab;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-control {
|
||||||
|
position: absolute;
|
||||||
|
background-color: var(--ol-subtle-background-color);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-zoom {
|
||||||
|
top: .5em;
|
||||||
|
left: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-rotate {
|
||||||
|
top: .5em;
|
||||||
|
right: .5em;
|
||||||
|
transition: opacity .25s linear, visibility 0s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-rotate.ol-hidden {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity .25s linear, visibility 0s linear .25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-zoom-extent {
|
||||||
|
top: 4.643em;
|
||||||
|
left: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-full-screen {
|
||||||
|
right: .5em;
|
||||||
|
top: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-control button {
|
||||||
|
display: block;
|
||||||
|
margin: 1px;
|
||||||
|
padding: 0;
|
||||||
|
color: var(--ol-subtle-foreground-color);
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: inherit;
|
||||||
|
text-align: center;
|
||||||
|
height: 1.375em;
|
||||||
|
width: 1.375em;
|
||||||
|
line-height: .4em;
|
||||||
|
background-color: var(--ol-background-color);
|
||||||
|
border: none;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-control button::-moz-focus-inner {
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-zoom-extent button {
|
||||||
|
line-height: 1.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-compass {
|
||||||
|
display: block;
|
||||||
|
font-weight: normal;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-touch .ol-control button {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-touch .ol-zoom-extent {
|
||||||
|
top: 5.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-control button:hover,
|
||||||
|
.ol-control button:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
outline: 1px solid var(--ol-subtle-foreground-color);
|
||||||
|
color: var(--ol-foreground-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-zoom .ol-zoom-in {
|
||||||
|
border-radius: 2px 2px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-zoom .ol-zoom-out {
|
||||||
|
border-radius: 0 0 2px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-attribution {
|
||||||
|
text-align: right;
|
||||||
|
bottom: .5em;
|
||||||
|
right: .5em;
|
||||||
|
max-width: calc(100% - 1.3em);
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row-reverse;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-attribution a {
|
||||||
|
color: var(--ol-subtle-foreground-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-attribution ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 1px .5em;
|
||||||
|
color: var(--ol-foreground-color);
|
||||||
|
text-shadow: 0 0 2px var(--ol-background-color);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-attribution li {
|
||||||
|
display: inline;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-attribution li:not(:last-child):after {
|
||||||
|
content: " ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-attribution img {
|
||||||
|
max-height: 2em;
|
||||||
|
max-width: inherit;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-attribution button {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-attribution.ol-collapsed ul {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-attribution:not(.ol-collapsed) {
|
||||||
|
background: var(--ol-partial-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-attribution.ol-uncollapsible {
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
border-radius: 4px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-attribution.ol-uncollapsible img {
|
||||||
|
margin-top: -.2em;
|
||||||
|
max-height: 1.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-attribution.ol-uncollapsible button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-zoomslider {
|
||||||
|
top: 4.5em;
|
||||||
|
left: .5em;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-zoomslider button {
|
||||||
|
position: relative;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-touch .ol-zoomslider {
|
||||||
|
top: 5.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-overviewmap {
|
||||||
|
left: 0.5em;
|
||||||
|
bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-overviewmap.ol-uncollapsible {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
border-radius: 0 4px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-overviewmap .ol-overviewmap-map,
|
||||||
|
.ol-overviewmap button {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-overviewmap .ol-overviewmap-map {
|
||||||
|
border: 1px solid var(--ol-subtle-foreground-color);
|
||||||
|
height: 150px;
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-overviewmap:not(.ol-collapsed) button {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
|
||||||
|
.ol-overviewmap.ol-uncollapsible button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-overviewmap:not(.ol-collapsed) {
|
||||||
|
background: var(--ol-subtle-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-overviewmap-box {
|
||||||
|
border: 1.5px dotted var(--ol-subtle-foreground-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-overviewmap .ol-overviewmap-box:hover {
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
531
map/test/theme/site.css
Normal file
531
map/test/theme/site.css
Normal file
@ -0,0 +1,531 @@
|
|||||||
|
@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700);
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Quattrocento Sans', sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--ol-foreground-color);
|
||||||
|
padding-top: 54px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
.h1,
|
||||||
|
.h2,
|
||||||
|
.h3,
|
||||||
|
.h4,
|
||||||
|
.h5,
|
||||||
|
.h6 {
|
||||||
|
font-weight: 700
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
.row h1 {
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1.topic {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--ol-subtle-foreground-color);
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
color: var(--ol-foreground-color);
|
||||||
|
background-color: var(--ol-accent-background-color);
|
||||||
|
padding: 0.2em 0.4em;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a>code,
|
||||||
|
pre>code {
|
||||||
|
color: inherit;
|
||||||
|
background-color: initial;
|
||||||
|
padding: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--ol-brand-color);
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
a :not(:first-child) {
|
||||||
|
color: var(--ol-foreground-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover,
|
||||||
|
a:focus {
|
||||||
|
color: var(--ol-brand-color);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
background-color: var(--ol-foreground-color);
|
||||||
|
color: var(--ol-background-color);
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
color: var(--ol-background-color);
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 160%;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand img {
|
||||||
|
height: 35px;
|
||||||
|
width: 35px;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 5px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-dark .navbar-nav .nav-link {
|
||||||
|
color: var(--ol-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-dark .navbar-nav .nav-link:hover {
|
||||||
|
color: var(--ol-brand-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand:focus,
|
||||||
|
.navbar-brand:hover,
|
||||||
|
.nav-link:focus,
|
||||||
|
.nav-link:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--ol-brand-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: var(--ol-foreground-color);
|
||||||
|
color: var(--ol-background-color);
|
||||||
|
margin-top: 40px;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.dropdown-item {
|
||||||
|
color: var(--ol-foreground-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-item.active,
|
||||||
|
.dropdown-item:hover {
|
||||||
|
color: var(--ol-brand-color);
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: var(--ol-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav>li>a {
|
||||||
|
color: var(--ol-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-table {
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-link {
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--ol-subtle-foreground-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-link:hover {
|
||||||
|
color: var(--ol-brand-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-form,
|
||||||
|
.navbar-form {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-form {
|
||||||
|
color: var(--ol-foreground-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-group {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-group>.badge:not(:last-child) {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-group>.badge:not(:first-child) {
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-info {
|
||||||
|
background-color: var(--ol-subtle-foreground-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
a.badge-info:focus,
|
||||||
|
a.badge-info:hover {
|
||||||
|
background-color: var(--ol-foreground-color);
|
||||||
|
color: var(--ol-brand-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-modal-toggle {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-tag-example .modal-body {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-tag-example .list-group-item:focus,
|
||||||
|
.modal-tag-example .list-group-item:hover,
|
||||||
|
.modal-tag-example .list-group-item:active {
|
||||||
|
background-color: var(--ol-background-color);
|
||||||
|
color: var(--ol-brand-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-tag-example .list-group-item.active {
|
||||||
|
background-color: var(--ol-subtle-foreground-color);
|
||||||
|
color: var(--ol-background-color);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#docs {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.inline,
|
||||||
|
ol.inline {
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.inline>li,
|
||||||
|
ol.inline>li {
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
|
height: 400px;
|
||||||
|
width: 100%;
|
||||||
|
background: var(--ol-background-color);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-control {
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-attribution.ol-logo-only,
|
||||||
|
.ol-attribution.ol-uncollapsible {
|
||||||
|
max-width: calc(100% - 3em);
|
||||||
|
}
|
||||||
|
|
||||||
|
.iframe-info iframe {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source-heading {
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-left: .6em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tags,
|
||||||
|
#shortdesc,
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#api-links ul {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#latest-check {
|
||||||
|
margin-top: -10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* START PRISM THEME */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* VS theme by Andrew Lock (https://andrewlock.net)
|
||||||
|
* Inspired by Visual Studio syntax coloring
|
||||||
|
*/
|
||||||
|
|
||||||
|
code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
color: #393A34;
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||||
|
direction: ltr;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre;
|
||||||
|
word-spacing: normal;
|
||||||
|
word-break: normal;
|
||||||
|
font-size: .9em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
|
|
||||||
|
-webkit-hyphens: none;
|
||||||
|
-moz-hyphens: none;
|
||||||
|
-ms-hyphens: none;
|
||||||
|
hyphens: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre>code[class*="language-"] {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[class*="language-"]::-moz-selection,
|
||||||
|
pre[class*="language-"] ::-moz-selection,
|
||||||
|
code[class*="language-"]::-moz-selection,
|
||||||
|
code[class*="language-"] ::-moz-selection {
|
||||||
|
background: #C1DEF1;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[class*="language-"]::selection,
|
||||||
|
pre[class*="language-"] ::selection,
|
||||||
|
code[class*="language-"]::selection,
|
||||||
|
code[class*="language-"] ::selection {
|
||||||
|
background: #C1DEF1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code blocks */
|
||||||
|
pre[class*="language-"] {
|
||||||
|
padding: 1em;
|
||||||
|
margin: .5em 0;
|
||||||
|
overflow: auto;
|
||||||
|
border: 1px solid #dddddd;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inline code */
|
||||||
|
:not(pre)>code[class*="language-"] {
|
||||||
|
padding: .2em;
|
||||||
|
padding-top: 1px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
background: #f8f8f8;
|
||||||
|
border: 1px solid #dddddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.comment,
|
||||||
|
.token.prolog,
|
||||||
|
.token.doctype,
|
||||||
|
.token.cdata {
|
||||||
|
color: #008000;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.namespace {
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.string {
|
||||||
|
color: #A31515;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.punctuation,
|
||||||
|
.token.operator {
|
||||||
|
color: #393A34;
|
||||||
|
/* no highlight */
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.url,
|
||||||
|
.token.symbol,
|
||||||
|
.token.number,
|
||||||
|
.token.boolean,
|
||||||
|
.token.variable,
|
||||||
|
.token.constant,
|
||||||
|
.token.inserted {
|
||||||
|
color: #36acaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.atrule,
|
||||||
|
.token.keyword,
|
||||||
|
.token.attr-value,
|
||||||
|
.language-autohotkey .token.selector,
|
||||||
|
.language-json .token.boolean,
|
||||||
|
.language-json .token.number,
|
||||||
|
code[class*="language-css"] {
|
||||||
|
color: #0000ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.function {
|
||||||
|
color: #393A34;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.deleted,
|
||||||
|
.language-autohotkey .token.tag {
|
||||||
|
color: #9a050f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.selector,
|
||||||
|
.language-autohotkey .token.keyword {
|
||||||
|
color: #00009f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.important {
|
||||||
|
color: #e90;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.important,
|
||||||
|
.token.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.class-name,
|
||||||
|
.language-json .token.property {
|
||||||
|
color: #2B91AF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.tag,
|
||||||
|
.token.selector {
|
||||||
|
color: #800000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.attr-name,
|
||||||
|
.token.property,
|
||||||
|
.token.regex,
|
||||||
|
.token.entity {
|
||||||
|
color: #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.directive.tag .tag {
|
||||||
|
background: #ffff00;
|
||||||
|
color: #393A34;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* overrides color-values for the Line Numbers plugin
|
||||||
|
* http://prismjs.com/plugins/line-numbers/
|
||||||
|
*/
|
||||||
|
.line-numbers.line-numbers .line-numbers-rows {
|
||||||
|
border-right-color: #a5a5a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-numbers .line-numbers-rows>span:before {
|
||||||
|
color: #2B91AF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* overrides color-values for the Line Highlight plugin
|
||||||
|
* http://prismjs.com/plugins/line-highlight/
|
||||||
|
*/
|
||||||
|
.line-highlight.line-highlight {
|
||||||
|
background: rgba(193, 222, 241, 0.2);
|
||||||
|
background: -webkit-linear-gradient(left, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
|
||||||
|
background: linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* END PRISM THEME */
|
||||||
|
|
||||||
|
/* restyle prism copy button */
|
||||||
|
div.code-toolbar {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.code-toolbar>.toolbar {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
transition: opacity .2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.code-toolbar:hover>.toolbar,
|
||||||
|
div.code-toolbar:focus-within>.toolbar {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.code-toolbar>.toolbar button {
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--ol-subtle-foreground-color);
|
||||||
|
background-color: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
padding: .615rem .75rem;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.code-toolbar>.toolbar button:hover,
|
||||||
|
div.code-toolbar>.toolbar button:focus {
|
||||||
|
color: var(--ol-brand-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.code-toolbar>.toolbar button:focus {
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
|
||||||
|
}
|
||||||
|
|
||||||
|
div.code-toolbar>.toolbar button {
|
||||||
|
background-color: rgba(255, 255, 255, .625);
|
||||||
|
border-radius: 0 0 0 10px;
|
||||||
|
margin: 1px;
|
||||||
|
}
|
||||||
|
div.code-toolbar>.toolbar button:before {
|
||||||
|
font: var(--fa-font-solid);
|
||||||
|
font-size: 1.33333333em;
|
||||||
|
line-height: .75em;
|
||||||
|
content: "\f0ea";
|
||||||
|
text-rendering: auto;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
margin-right: .184em;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* jarguar overrides for jsdoc */
|
||||||
|
.navigation {
|
||||||
|
background-color: var(--ol-foreground-color);
|
||||||
|
color: var(--ol-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation li.item .subtitle {
|
||||||
|
color: var(--ol-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation li.item a:hover,
|
||||||
|
.navigation li.item .title a:hover {
|
||||||
|
color: var(--ol-brand-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .subsection-title {
|
||||||
|
color: var(--ol-foreground-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .nameContainer,
|
||||||
|
.main .nameContainer.inherited {
|
||||||
|
border-top-color: var(--ol-subtle-foreground-color);
|
||||||
|
color: var(--ol-foreground-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nameContainer .anchor:target+h4 {
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1400px) {
|
||||||
|
.container {
|
||||||
|
max-width: 1140px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table.featureInfo {
|
||||||
|
caption-side: initial;
|
||||||
|
}
|
||||||
1
map/test2/apikey
Normal file
1
map/test2/apikey
Normal file
@ -0,0 +1 @@
|
|||||||
|
yBwA37PS2BsXxx7WM9Rr
|
||||||
12
map/test2/index.html
Normal file
12
map/test2/index.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Quick Start</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="map"></div>
|
||||||
|
<script type="module" src="./main.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
18
map/test2/main.js
Normal file
18
map/test2/main.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import './style.css';
|
||||||
|
import Map from '/javascript/ol/Map.js';
|
||||||
|
import OSM from '/javascript/ol/source/OSM.js';
|
||||||
|
import TileLayer from '/javascript/ol/layer/Tile.js';
|
||||||
|
import View from '/javascript/ol/View.js';
|
||||||
|
|
||||||
|
const map = new Map({
|
||||||
|
target: 'map',
|
||||||
|
layers: [
|
||||||
|
new TileLayer({
|
||||||
|
source: new OSM(),
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
view: new View({
|
||||||
|
center: [0, 0],
|
||||||
|
zoom: 2,
|
||||||
|
}),
|
||||||
|
});
|
||||||
14
map/test2/style.css
Normal file
14
map/test2/style.css
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
@import "/javascript/ol/ol.css";
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#map {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user