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
doc/quickstart.hbs
+9 -5
View File
@@ -3,7 +3,7 @@ title: Quick Start
layout: doc.hbs layout: doc.hbs
--- ---
# OpenLayers 3 Quick Start # Quick Start
## Put a map on a page ## 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> <!doctype html>
<html lang="en"> <html lang="en">
<head> <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> <style>
.map { .map {
height: 400px; height: 400px;
width: 100%; width: 100%;
} }
</style> </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> <title>OpenLayers 3 example</title>
</head> </head>
<body> <body>
@@ -55,7 +55,7 @@ To include a map a web page you will need 3 things:
### Include OpenLayers ### Include OpenLayers
```xml ```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. 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: 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: [ layers: [
new ol.layer.Tile({ new ol.layer.Tile({
source: new ol.source.MapQuestOpenAerial() 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. 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({ view: new ol.View2D({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'), center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4 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. 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.