You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
196 lines
11 KiB
HTML
196 lines
11 KiB
HTML
2 weeks ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>OpenLayers - Basic project setup using NPM and Parcel</title>
|
||
|
|
<script>
|
||
|
|
var gaProperty = 'UA-2577926-1';
|
||
|
|
// Disable tracking if the opt-out cookie exists.
|
||
|
|
var disableStr = 'ga-disable-' + gaProperty;
|
||
|
|
if (document.cookie.indexOf(disableStr + '=true') > -1) {
|
||
|
|
window[disableStr] = true;
|
||
|
|
}
|
||
|
|
function gaOptout() {
|
||
|
|
document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
|
||
|
|
window[disableStr] = true;
|
||
|
|
}
|
||
|
|
function gaOptoutRevoke() {
|
||
|
|
document.cookie = disableStr + '=false; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
|
||
|
|
window[disableStr] = false;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
|
||
|
|
<script>
|
||
|
|
window.dataLayer = window.dataLayer || [];
|
||
|
|
function gtag(){dataLayer.push(arguments);}
|
||
|
|
gtag('js', new Date());
|
||
|
|
gtag('config', 'UA-2577926-1', { 'anonymize_ip': true });
|
||
|
|
</script>
|
||
|
|
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
|
||
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
|
||
|
|
<script>
|
||
|
|
window.addEventListener("load", function() {
|
||
|
|
window.cookieconsent.initialise({
|
||
|
|
'palette': {
|
||
|
|
'popup': {
|
||
|
|
'background': '#eaf7f7',
|
||
|
|
'text': '#5c7291'
|
||
|
|
},
|
||
|
|
'button': {
|
||
|
|
'background': '#56cbdb',
|
||
|
|
'text': '#ffffff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'theme': 'edgeless',
|
||
|
|
'type': 'opt-out',
|
||
|
|
'onInitialise': function (status) {
|
||
|
|
if (!this.hasConsented()) {
|
||
|
|
gaOptout()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'onStatusChange': function(status, chosenBefore) {
|
||
|
|
if (!this.hasConsented()) {
|
||
|
|
gaOptout()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'onRevokeChoice': function() {
|
||
|
|
gaOptoutRevoke()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||
|
|
<link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
|
||
|
|
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/toolbar/prism-toolbar.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
|
||
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
||
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||
|
|
<link href='../../../../assets/theme/site.css' rel='stylesheet' type='text/css'>
|
||
|
|
<link rel="icon" type="image/x-icon" href="../../../../assets/theme/img/favicon.ico" />
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header class="navbar navbar-expand-md navbar-dark mb-3 py-0 fixed-top" role="navigation">
|
||
|
|
<a href='/' class='navbar-brand'><img src='../../../../assets/theme/img/logo70.png'> OpenLayers</a>
|
||
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto'>
|
||
|
|
<li class="nav-item dropdown">
|
||
|
|
<a class="nav-link dropdown-toggle active" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
|
||
|
|
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="docdropdown">
|
||
|
|
<a class="dropdown-item" href="/en/latest/doc/">Docs</a>
|
||
|
|
<div class="dropdown-divider"></div>
|
||
|
|
<a class="dropdown-item" href="/en/latest/doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
|
||
|
|
<a class="dropdown-item" href="/en/latest/doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
|
||
|
|
<a class="dropdown-item" href="/en/latest/doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
|
||
|
|
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
|
||
|
|
<div class="dropdown-divider"></div>
|
||
|
|
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-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"><a class="nav-link" href="/en/latest/apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
|
||
|
|
<li class="nav-item dropdown">
|
||
|
|
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
|
||
|
|
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="codedropdown">
|
||
|
|
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
|
||
|
|
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
|
||
|
|
<div class='container'>
|
||
|
|
<h1 id="introduction">Introduction</h1>
|
||
|
|
<p>Modern JavaScript works best when using and authoring modules. The recommended way of using OpenLayers is installing the <a href="https://npmjs.com/package/ol"><code>ol</code></a> package. This tutorial walks you through setting up a simple dev environment, which requires <a href="https://nodejs.org">node</a> for everything to work.</p>
|
||
|
|
<p>In this tutorial, we will be using <a href="https://parceljs.org">Parcel</a> to bundle our application. There are several other options, some of which are linked from the <a href="https://npmjs.com/package/ol">README</a>.</p>
|
||
|
|
<h2 id="initial-steps">Initial steps</h2>
|
||
|
|
<p>Create a new empty directory for your project and navigate to it by running <code>mkdir new-project && cd new-project</code>. Initialize your project with</p>
|
||
|
|
<pre><code>npm init</code></pre>
|
||
|
|
<p>This will create a <code>package.json</code> file in your working directory. Add OpenLayers as dependency to your application with</p>
|
||
|
|
<pre><code>npm install ol</code></pre>
|
||
|
|
<p>At this point you can ask NPM to add required development dependencies by running</p>
|
||
|
|
<pre><code>npm install --save-dev parcel-bundler</code></pre>
|
||
|
|
<h2 id="application-code-and-index-html">Application code and index.html</h2>
|
||
|
|
<p>Place your application code in <code>index.js</code>. Here is a simple starting point:</p>
|
||
|
|
<pre><code class="language-js">import <span class="string">'ol/ol.css'</span>;
|
||
|
|
import {Map, View} from <span class="string">'ol'</span>;
|
||
|
|
import TileLayer from <span class="string">'ol/layer/Tile'</span>;
|
||
|
|
import OSM from <span class="string">'ol/source/OSM'</span>;
|
||
|
|
|
||
|
|
<span class="keyword">const</span> map = <span class="keyword">new</span> Map({
|
||
|
|
target: <span class="string">'map'</span>,
|
||
|
|
layers: [
|
||
|
|
<span class="keyword">new</span> TileLayer({
|
||
|
|
source: <span class="keyword">new</span> OSM()
|
||
|
|
})
|
||
|
|
],
|
||
|
|
view: <span class="keyword">new</span> View({
|
||
|
|
center: [<span class="number">0</span>, <span class="number">0</span>],
|
||
|
|
zoom: <span class="number">0</span>
|
||
|
|
})
|
||
|
|
});</code></pre>
|
||
|
|
<p>You will also need an <code>index.html</code> file that will use your bundle. Here is a simple example:</p>
|
||
|
|
<pre><code class="language-html"><!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Using Parcel with OpenLayers</title>
|
||
|
|
<style>
|
||
|
|
#map {
|
||
|
|
width: 400px;
|
||
|
|
height: 250px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="map"></div>
|
||
|
|
<script src="./index.js"></script>
|
||
|
|
</body>
|
||
|
|
</html></code></pre>
|
||
|
|
<h2 id="creating-a-bundle">Creating a bundle</h2>
|
||
|
|
<p>With two additional lines in <code>package.json</code> you can introduce the commands <code>npm run build</code> and <code>npm start</code> to manually build your bundle and watch for changes, respectively. The final <code>package.json</code> with the two additional commands <code>"start"</code> and <code>"build"</code> should look like this:</p>
|
||
|
|
<pre><code class="language-json">{
|
||
|
|
"<span class="attribute">name</span>": <span class="value"><span class="string">"test"</span></span>,
|
||
|
|
"<span class="attribute">version</span>": <span class="value"><span class="string">"1.0.0"</span></span>,
|
||
|
|
"<span class="attribute">description</span>": <span class="value"><span class="string">""</span></span>,
|
||
|
|
"<span class="attribute">main</span>": <span class="value"><span class="string">"index.js"</span></span>,
|
||
|
|
"<span class="attribute">scripts</span>": <span class="value">{
|
||
|
|
"<span class="attribute">test</span>": <span class="value"><span class="string">"echo \"Error: no test specified\" && exit 1"</span></span>,
|
||
|
|
"<span class="attribute">start</span>": <span class="value"><span class="string">"parcel index.html"</span></span>,
|
||
|
|
"<span class="attribute">build</span>": <span class="value"><span class="string">"parcel build --public-url . index.html"</span>
|
||
|
|
</span>}</span>,
|
||
|
|
"<span class="attribute">author</span>": <span class="value"><span class="string">""</span></span>,
|
||
|
|
"<span class="attribute">license</span>": <span class="value"><span class="string">"ISC"</span>
|
||
|
|
</span>}</code></pre>
|
||
|
|
<p>That's it. Now to run your application, enter</p>
|
||
|
|
<pre><code>npm start</code></pre>
|
||
|
|
<p>in your console. To test your application, open <a href="http://localhost:1234/">http://localhost:1234/</a> in your browser. Whenever you change something, the page will reload automatically to show the result of your changes.</p>
|
||
|
|
<p>Note that a single JavaScript file with all your application code and all dependencies used in your application has been created. From the OpenLayers package, it only contains the required components.</p>
|
||
|
|
<p>To create a production bundle of your application, simply type</p>
|
||
|
|
<pre><code>npm run build</code></pre>
|
||
|
|
<p>and copy the <code>dist/</code> folder to your production server.</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='/sponsors.html'>sponsors</a>.
|
||
|
|
<br>
|
||
|
|
<a href="https://www.netlify.com">
|
||
|
|
This site is powered by Netlify.
|
||
|
|
</a>
|
||
|
|
</footer>
|
||
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|