mirror of
https://expo.survex.com/repositories/expoweb/.git/
synced 2024-12-21 07:52:20 +00:00
166 lines
12 KiB
HTML
166 lines
12 KiB
HTML
|
<!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>
|