ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Link to latest, fenced code blocks

Browse Source
This commit is contained in:
Tim Schaub
2013-09-24 14:57:07 +02:00
parent 860735d7e4
commit a9b0e6239b
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
doc/quickstart.hbs
View File

@@ -3,7 +3,7 @@ title: Quick Start
layout: doc.hbs
---
# OpenLayers 3 Quick Start
# Quick Start
## Put a map on a page
@@ -13,14 +13,14 @@ Below you'll find a complete working example. Create a new file, copy in the co
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://ol3js.org/en/master/build/ol.css" type="text/css">
<link rel="stylesheet" href="http://ol3js.org/en/{{ latest }}/build/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="http://ol3js.org/en/master/build/ol.js" type="text/javascript"></script>
<script src="http://ol3js.org/en/{{ latest }}/build/ol.js" type="text/javascript"></script>
<title>OpenLayers 3 example</title>
</head>
<body>
@@ -55,7 +55,7 @@ To include a map a web page you will need 3 things:
### Include OpenLayers
```xml
<script src="http://ol3js.org/en/master/build/ol.js" type="text/javascript"></script>
<script src="http://ol3js.org/en/{{ latest }}/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.
@@ -110,19 +110,23 @@ To attach the map object to the `<div>`, the map object takes a `target` into ar
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:
```js
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuestOpenAerial()
})
]
```
Layers in OpenLayers 3 are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles. You can consult the list of [available layer sources here](http://ol3js.org/en/master/apidoc/ol.source.html)
Layers in OpenLayers 3 are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles. You can consult the list of [available layer sources here](/en/{{ latest }}/apidoc/ol.source.html)
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.
```js
view: new ol.View2D({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
```
You will notice that the `center` specified is in lat/lon 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.