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.
141 lines
8.5 KiB
HTML
141 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>OpenLayers - Basic project setup using NPM and Vite</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://vitejs.dev/">Vite</a> as a development tool and to bundle our application for production. There are several other options, some of which are linked from the <a href="https://npmjs.com/package/ol">README</a>.</p>
|
|
<h2 id="application-setup">Application setup</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>npx create-ol-app</code></pre>
|
|
<p><em>You will need to have <code>git</code> installed for the above command to work. If you receive an error, make sure that <a href="https://github.com/git-guides/install-git">Git is installed</a> on your system.</em></p>
|
|
<p>This will install the <code>ol</code> package, set up a development environment with additional dependencies, and give you an <code>index.html</code> and <code>main.js</code> starting point for your application. By default, <a href="https://vitejs.dev/">Vite</a> will be used as a module loader and bundler. See the <a href="https://github.com/openlayers/create-ol-app"><code>create-ol-app</code></a> documentation for details on using another bundler.</p>
|
|
<p>To start the development server</p>
|
|
<pre><code>npm start</code></pre>
|
|
<p>You can now visit <a href="http://localhost:3000/">http://localhost:3000/</a> to view your application. Begin making changes to the <code>index.html</code> and <code>main.js</code> files to add additional functionality.</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>
|