UNPKG

4.25 kBtext/x-handlebars-templateView Raw
1---
2title: Quick Start
3layout: doc.hbs
4---
5
6# Quick Start
7
8## Put a map on a page
9
10Below you'll find a complete working example. Create a new file, copy in the contents below, and open in a browser:
11
12```xml
13<!doctype html>
14<html lang="en">
15 <head>
16 <link rel="stylesheet" href="https://openlayers.org/en/{{ latest }}/css/ol.css" type="text/css">
17 <style>
18 .map {
19 height: 400px;
20 width: 100%;
21 }
22 </style>
23 <script src="https://openlayers.org/en/{{ latest }}/build/ol.js" type="text/javascript"></script>
24 <title>OpenLayers example</title>
25 </head>
26 <body>
27 <h2>My Map</h2>
28 <div id="map" class="map"></div>
29 <script type="text/javascript">
30 var map = new ol.Map({
31 target: 'map',
32 layers: [
33 new ol.layer.Tile({
34 source: new ol.source.OSM()
35 })
36 ],
37 view: new ol.View({
38 center: ol.proj.fromLonLat([37.41, 8.82]),
39 zoom: 4
40 })
41 });
42 </script>
43 </body>
44</html>
45```
46
47## Understanding what is going on
48
49To include a map a web page you will need 3 things:
50
51 1. Include OpenLayers
52 2. `<div>` map container
53 3. JavaScript to create a simple map
54
55### Include OpenLayers
56
57```xml
58 <script src="https://openlayers.org/en/{{ latest }}/build/ol.js" type="text/javascript"></script>
59```
60
61The 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.
62
63**Optional:** 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:
64
65```xml
66 <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
67```
68
69
70### `<div>` to contain the map
71
72```xml
73 <div id="map" class="map"></div>
74```
75
76The 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.
77
78```xml
79 <style>
80 .map {
81 height: 400px;
82 width: 100%;
83 }
84 </style>
85```
86
87### JavaScript to create a simple map
88
89```js
90 var map = new ol.Map({
91 target: 'map',
92 layers: [
93 new ol.layer.Tile({
94 source: new ol.source.OSM()
95 })
96 ],
97 view: new ol.View({
98 center: ol.proj.fromLonLat([37.41, 8.82]),
99 zoom: 4
100 })
101 });
102```
103
104With this JavaScript code, a map object is created with an OSM layer zoomed on the African East coast. Let's break this down:
105
106The following line creates an OpenLayers `Map` object. Just by itself, this does nothing since there's no layers or interaction attached to it.
107
108```js
109 var map = new ol.Map({ ... });
110```
111
112To attach the map object to the `<div>`, the map object takes a `target` into arguments. The value is the `id` of the `<div>`:
113
114```js
115 target: 'map'
116```
117
118The `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
120```js
121 layers: [
122 new ol.layer.Tile({
123 source: new ol.source.OSM()
124 })
125 ]
126```
127
128Layers 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. You can consult the list of [available layer sources here](/en/{{ latest }}/apidoc/ol.source.html)
129
130The next part of the `Map` object is the `View`. 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.
131
132```js
133 view: new ol.View({
134 center: ol.proj.fromLonLat([37.41, 8.82]),
135 zoom: 4
136 })
137```
138
139You will notice that the `center` 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.
140
\No newline at end of file