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.
217 lines
16 KiB
HTML
217 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>OpenLayers - Quick Start</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="quick-start">Quick Start</h1>
|
|
<p>This primer shows you how to put a simple map on a web page.</p>
|
|
<p><strong>For production, we strongly recommend bundling the application together with its dependencies, as explained in the <a href="./tutorials/bundle.html">Building an OpenLayers Application</a> tutorial.</strong></p>
|
|
<h2 id="put-a-map-on-a-page">Put a map on a page</h2>
|
|
<p>Below you'll find a complete working example. Create a new file, copy in the contents below, and open in a browser:</p>
|
|
<pre><code class="language-xml"><span class="doctype"><!doctype html></span>
|
|
<span class="tag"><<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>></span>
|
|
<span class="tag"><<span class="title">head</span>></span>
|
|
<span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>></span>
|
|
<span class="tag"><<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/css/ol.css"</span> <span class="attribute">type</span>=<span class="value">"text/css"</span>></span>
|
|
<span class="tag"><<span class="title">style</span>></span><span class="css">
|
|
<span class="class">.map</span> <span class="rules">{
|
|
<span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">400</span>px</span></span>;
|
|
<span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">100</span>%</span></span>;
|
|
<span class="rule">}</span></span>
|
|
</span><span class="tag"></<span class="title">style</span>></span>
|
|
<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/build/ol.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span>
|
|
<span class="tag"><<span class="title">title</span>></span>OpenLayers example<span class="tag"></<span class="title">title</span>></span>
|
|
<span class="tag"></<span class="title">head</span>></span>
|
|
<span class="tag"><<span class="title">body</span>></span>
|
|
<span class="tag"><<span class="title">h2</span>></span>My Map<span class="tag"></<span class="title">h2</span>></span>
|
|
<span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"map"</span> <span class="attribute">class</span>=<span class="value">"map"</span>></span><span class="tag"></<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span>></span><span class="javascript">
|
|
<span class="keyword">var</span> map = <span class="keyword">new</span> ol.Map({
|
|
target: <span class="string">'map'</span>,
|
|
layers: [
|
|
<span class="keyword">new</span> ol.layer.Tile({
|
|
source: <span class="keyword">new</span> ol.source.OSM()
|
|
})
|
|
],
|
|
view: <span class="keyword">new</span> ol.View({
|
|
center: ol.proj.fromLonLat([<span class="number">37.41</span>, <span class="number">8.82</span>]),
|
|
zoom: <span class="number">4</span>
|
|
})
|
|
});
|
|
</span><span class="tag"></<span class="title">script</span>></span>
|
|
<span class="tag"></<span class="title">body</span>></span>
|
|
<span class="tag"></<span class="title">html</span>></span></code></pre>
|
|
<h2 id="understanding-what-is-going-on">Understanding what is going on</h2>
|
|
<p>To include a map a web page you will need 3 things:</p>
|
|
<ol>
|
|
<li>Include OpenLayers</li>
|
|
<li><code><div></code> map container</li>
|
|
<li>JavaScript to create a simple map</li>
|
|
</ol>
|
|
<h3 id="include-openlayers">Include OpenLayers</h3>
|
|
<pre><code class="language-xml"> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/build/ol.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></pre>
|
|
<p>The first part is to include the JavaScript library. For the purpose of this tutorial, here we simply point to the openlayers.org website to get the whole library. In a production environment, we would build a custom version of the library including only the module needed for our application.</p>
|
|
<p><strong>Optional:</strong> If the application is intended to run on old platforms like Internet Explorer or Android 4.x, another script needs to be included before OpenLayers:</p>
|
|
<pre><code class="language-xml"> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></pre>
|
|
<h3 id="-div-to-contain-the-map"><code><div></code> to contain the map</h3>
|
|
<pre><code class="language-xml"> <span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"map"</span> <span class="attribute">class</span>=<span class="value">"map"</span>></span><span class="tag"></<span class="title">div</span>></span></code></pre>
|
|
<p>The map in the application is contained in a <a href="https://en.wikipedia.org/wiki/Span_and_div"><code><div></code> HTML element</a>. Through this <code><div></code> the map properties like width, height and border can be controlled through CSS. Here's the CSS element used to make the map 400 pixels high and as wide as the browser window.</p>
|
|
<pre><code class="language-xml"> <span class="tag"><<span class="title">style</span>></span><span class="css">
|
|
<span class="class">.map</span> <span class="rules">{
|
|
<span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">400</span>px</span></span>;
|
|
<span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">100</span>%</span></span>;
|
|
<span class="rule">}</span></span>
|
|
</span><span class="tag"></<span class="title">style</span>></span></code></pre>
|
|
<h3 id="javascript-to-create-a-simple-map">JavaScript to create a simple map</h3>
|
|
<pre><code class="language-js"> <span class="keyword">var</span> map = <span class="keyword">new</span> ol.Map({
|
|
target: <span class="string">'map'</span>,
|
|
layers: [
|
|
<span class="keyword">new</span> ol.layer.Tile({
|
|
source: <span class="keyword">new</span> ol.source.OSM()
|
|
})
|
|
],
|
|
view: <span class="keyword">new</span> ol.View({
|
|
center: ol.proj.fromLonLat([<span class="number">37.41</span>, <span class="number">8.82</span>]),
|
|
zoom: <span class="number">4</span>
|
|
})
|
|
});</code></pre>
|
|
<p>With this JavaScript code, a map object is created with an OSM layer zoomed on the African East coast. Let's break this down:</p>
|
|
<p>The following line creates an OpenLayers <code>Map</code> object. Just by itself, this does nothing since there's no layers or interaction attached to it.</p>
|
|
<pre><code class="language-js"> <span class="keyword">var</span> map = <span class="keyword">new</span> ol.Map({ ... });</code></pre>
|
|
<p>To attach the map object to the <code><div></code>, the map object takes a <code>target</code> into arguments. The value is the <code>id</code> of the <code><div></code>:</p>
|
|
<pre><code class="language-js"> target: <span class="string">'map'</span></code></pre>
|
|
<p>The <code>layers: [ ... ]</code> array is used to define the list of layers available in the map. The first and only layer right now is a tiled layer:</p>
|
|
<pre><code class="language-js"> layers: [
|
|
<span class="keyword">new</span> ol.layer.Tile({
|
|
source: <span class="keyword">new</span> ol.source.OSM()
|
|
})
|
|
]</code></pre>
|
|
<p>Layers in OpenLayers are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles.</p>
|
|
<p>The next part of the <code>Map</code> object is the <code>View</code>. The view allows to specify the center, resolution, and rotation of the map. The simplest way to define a view is to define a center point and a zoom level. Note that zoom level 0 is zoomed out.</p>
|
|
<pre><code class="language-js"> view: <span class="keyword">new</span> ol.View({
|
|
center: ol.proj.fromLonLat([<span class="number">37.41</span>, <span class="number">8.82</span>]),
|
|
zoom: <span class="number">4</span>
|
|
})</code></pre>
|
|
<p>You will notice that the <code>center</code> specified is in lon/lat coordinates (EPSG:4326). Since the only layer we use is in Spherical Mercator projection (EPSG:3857), we can reproject them on the fly to be able to zoom the map on the right coordinates.</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>
|