Adding YAML frontmatter
This will be parsed by the website build task
This commit is contained in:
Tim Schaub
@@ -1,45 +1,29 @@
|
||||
OpenLayers 3 Quick Start
|
||||
========================
|
||||
---
|
||||
title: Quick Start
|
||||
layout: doc.hbs
|
||||
---
|
||||
|
||||
Some text to introduce this document and the library...
|
||||
# OpenLayers 3 Quick Start
|
||||
|
||||
## Put a map on a page
|
||||
|
||||
Getting the library
|
||||
-------------------
|
||||
Below you'll find a complete working example. Create a new file, copy in the contents below, and open in a browser:
|
||||
|
||||
How to get the library
|
||||
|
||||
|
||||
First steps
|
||||
-----------
|
||||
|
||||
To include a map a web page you will need 3 things:
|
||||
|
||||
1. Include OpenLayers
|
||||
2. `<div>` map container
|
||||
3. JavaScript to create a simple map
|
||||
|
||||
|
||||
Here is a really simple example:
|
||||
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
```xml
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<style>
|
||||
.map {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
height: 400px; width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script src="http://ol3js.org/en/master/build/ol.js" type="text/javascript"></script>
|
||||
|
||||
<title>OpenLayers 3 example</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2>My Map</h2>
|
||||
<div id="map" class="map"></div>
|
||||
<h4 id="title">OpenLayers example</h4>
|
||||
|
||||
<script type="text/javascript">
|
||||
var map = new ol.Map({
|
||||
target: 'map',
|
||||
@@ -49,62 +33,78 @@ Here is a really simple example:
|
||||
})
|
||||
],
|
||||
view: new ol.View2D({
|
||||
center: ol.proj.transform([37.40570, 8.81566], 'EPSG:4326', 'EPSG:3857'),
|
||||
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Understanding what is going on
|
||||
|
||||
#### Include OpenLayers
|
||||
To include a map a web page you will need 3 things:
|
||||
|
||||
1. Include OpenLayers
|
||||
2. `<div>` map container
|
||||
3. JavaScript to create a simple map
|
||||
|
||||
### Include OpenLayers
|
||||
|
||||
```xml
|
||||
<script src="http://ol3js.org/en/master/build/ol.js" type="text/javascript"></script>
|
||||
```
|
||||
|
||||
The first part is to include the JavaScript library. For the purpose of this tutorial, here we simply point to the ol3js.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.
|
||||
|
||||
|
||||
#### `<div>` to contain the map
|
||||
### `<div>` to contain the map
|
||||
|
||||
```xml
|
||||
<div id="map" class="map"></div>
|
||||
```
|
||||
|
||||
The map in the application is contained in a [`<div>` HTML element](http://en.wikipedia.org/wiki/Span_and_div). Through this `<div>` 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.
|
||||
|
||||
```xml
|
||||
<style>
|
||||
.map {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
height: 400px; width: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### JavaScript to create a simple map
|
||||
|
||||
#### JavaScript to create a simple map
|
||||
|
||||
```js
|
||||
var map = new ol.Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.MapQuestOpenAerial()
|
||||
})
|
||||
],
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: ol.proj.transform([37.40570, 8.81566], 'EPSG:4326', 'EPSG:3857'),
|
||||
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
With this JavaScript code, a map object is created with a MapQuest Open Aerial layer zoomed on the African East coast. Let's break this down:
|
||||
|
||||
The following line creates an OpenLayers `Map` object. Just by itself, this does nothing since there's no layers or interaction attached to it.
|
||||
|
||||
```js
|
||||
var map = new ol.Map({ ... });
|
||||
```
|
||||
|
||||
To attach the map object to the `<div>`, the map object takes a `target` into arguments. The value is the `id` of the `<div>`:
|
||||
|
||||
target: 'map',
|
||||
|
||||
```js
|
||||
target: 'map'
|
||||
```
|
||||
|
||||
The `layers: [ ... ]` array is used to define the list of layers available in the map. The first and only layer right now is a tiled layer:
|
||||
|
||||
@@ -119,7 +119,7 @@ Layers in OpenLayers 3 are defined with a type (Image, Tile or Vector) which con
|
||||
The next part of the `Map` object is the `View`. The view allow to specify the center, resolution, and rotation of the map. Right now, only `View2D` is supported, but other views should be available at some point. 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.
|
||||
|
||||
view: new ol.View2D({
|
||||
center: ol.proj.transform([37.40570, 8.81566], 'EPSG:4326', 'EPSG:3857'),
|
||||
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 4
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user