From 3b7db642f1d592cf421fda716561c867ac200222 Mon Sep 17 00:00:00 2001 From: Julien-Samuel Lacroix Date: Wed, 18 Sep 2013 10:31:34 -0400 Subject: [PATCH 01/14] QuickStart first draft --- QUICKSTART.md | 126 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100644 QUICKSTART.md diff --git a/QUICKSTART.md b/QUICKSTART.md new file mode 100644 index 0000000000..409f554333 --- /dev/null +++ b/QUICKSTART.md @@ -0,0 +1,126 @@ +OpenLayers 3 Quick Start +======================== + +Some text to introduce this document and the library... + + +Getting the library +------------------- + +How to get the library + + +First steps +----------- + +To include a map a web page you will need 3 things: + + 1. Include OpenLayers + 2. `
` map container + 3. JavaScript to create a simple map + + +Here is a really simple example: + + + + + + + + + OpenLayers 3 example + + +
+

OpenLayers example

+ + + + + + + +#### Include OpenLayers + + + +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. + + +#### `
` to contain the map + +
+ +The map in the application is contained in a [`
` HTML element](http://en.wikipedia.org/wiki/Span_and_div). Through this `
` 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. + + + + +#### JavaScript to create a simple map + + var map = new ol.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'), + 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. + + var map = new ol.Map({ ... }); + +To attach the map object to the `
`, the map object takes a `target` into arguments. The value is the `id` of the `
`: + + 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: + + 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) + +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'), + 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. \ No newline at end of file From 2f2ee228319ac570ac9a66b536c58c33d1df0120 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Tue, 24 Sep 2013 10:37:43 +0200 Subject: [PATCH 02/14] Moving quickstart to doc directory --- QUICKSTART.md => doc/quickstart.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename QUICKSTART.md => doc/quickstart.md (100%) diff --git a/QUICKSTART.md b/doc/quickstart.md similarity index 100% rename from QUICKSTART.md rename to doc/quickstart.md From aec0c0d9af20e992f44c03c354a6727a797b931d Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Tue, 24 Sep 2013 10:39:34 +0200 Subject: [PATCH 03/14] Adding YAML frontmatter This will be parsed by the website build task --- doc/{quickstart.md => quickstart.hbs} | 170 +++++++++++++------------- 1 file changed, 85 insertions(+), 85 deletions(-) rename doc/{quickstart.md => quickstart.hbs} (54%) diff --git a/doc/quickstart.md b/doc/quickstart.hbs similarity index 54% rename from doc/quickstart.md rename to doc/quickstart.hbs index 409f554333..f6d8cfa915 100644 --- a/doc/quickstart.md +++ b/doc/quickstart.hbs @@ -1,17 +1,48 @@ -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 +```xml + + + + + + OpenLayers 3 example + + +

My Map

+
+ + + +``` - -First steps ------------ +## Understanding what is going on To include a map a web page you will need 3 things: @@ -19,108 +50,77 @@ To include a map a web page you will need 3 things: 2. `
` map container 3. JavaScript to create a simple map +### Include OpenLayers -Here is a really simple example: - - - - - - - - - OpenLayers 3 example - - -
-

OpenLayers example

- - - - - - - -#### Include OpenLayers - - +```xml + +``` 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. -#### `
` to contain the map +### `
` to contain the map -
+```xml +
+``` The map in the application is contained in a [`
` HTML element](http://en.wikipedia.org/wiki/Span_and_div). Through this `
` 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 + +``` +### JavaScript to create a simple map -#### JavaScript to create a simple map - - var map = new ol.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'), - zoom: 4 +```js + var map = new ol.Map({ + target: 'map', + layers: [ + new ol.layer.Tile({ + source: new ol.source.MapQuestOpenAerial() }) - }); + ], + view: new ol.View2D({ + 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. - var map = new ol.Map({ ... }); +```js + var map = new ol.Map({ ... }); +``` To attach the map object to the `
`, the map object takes a `target` into arguments. The value is the `id` of the `
`: - 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: - layers: [ - new ol.layer.Tile({ - source: new ol.source.MapQuestOpenAerial() - }) - ] + 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) 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'), - zoom: 4 - }) + 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. \ No newline at end of file +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. From 5ab78034029838bfe9353e26a67c8b4f4c067759 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Tue, 24 Sep 2013 09:36:53 +0200 Subject: [PATCH 04/14] New font and header background color With this change, API docs and examples match the website design of the new-build branch of openlayers.github.io better. --- resources/layout.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/resources/layout.css b/resources/layout.css index d6ed91dfc2..59f8d70738 100644 --- a/resources/layout.css +++ b/resources/layout.css @@ -1,4 +1,5 @@ @import url(font-awesome/css/font-awesome.min.css); +@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700); body { padding-top: 60px; @@ -15,7 +16,13 @@ body { display: none; } -/* padding for social links to match bootstrap nav links */ -.nav>li>.twitter-share-button, .nav>li>.g-plusone-wrapper, .nav>li>.github-watch-button { - padding: 10px 10px 0px; +body, h1, h2, h3, h4, p, li, td, th { + font-family: Quattrocento Sans; } +.navbar-inverse .navbar-inner { + background: #1F6B75; +} +.navbar-inverse .brand { + color: white; +} + From f07294698a73f4267fb4cf6403494ae615aadd5b Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Tue, 24 Sep 2013 11:15:23 +0200 Subject: [PATCH 05/14] Include ol.css in doc/quickstart.hbs --- doc/quickstart.hbs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/doc/quickstart.hbs b/doc/quickstart.hbs index f6d8cfa915..39b0951677 100644 --- a/doc/quickstart.hbs +++ b/doc/quickstart.hbs @@ -13,9 +13,11 @@ Below you'll find a complete working example. Create a new file, copy in the co + From 3adc46ae4a3ebf7d8c3b0f3b9b0d16f6e0c64508 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Tue, 24 Sep 2013 13:28:42 +0200 Subject: [PATCH 06/14] Adding basic concepts tutorial --- doc/tutorials/concepts.hbs | 71 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 doc/tutorials/concepts.hbs diff --git a/doc/tutorials/concepts.hbs b/doc/tutorials/concepts.hbs new file mode 100644 index 0000000000..be9f0ebe12 --- /dev/null +++ b/doc/tutorials/concepts.hbs @@ -0,0 +1,71 @@ +--- +title: Basic Concepts +layout: doc.hbs +--- + +## Map +The core component of OpenLayers 3 is the map (`ol.Map`). It is rendered to a `target` container (e.g. a `div` element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. `setTarget()`. + +```xml +
+ +``` + +## View +`ol.Map` is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of an `ol.View` instance - typically an `ol.View2D` for 2D maps. The reason for this abstraction is the idea of instantly switching e.g. between a 2D and a tilted 3D view, without the need to maintain two copies of the `layers`. + +```js + map.setView(new ol.View2D({ + center: [0, 0], + zoom: 2 + })); +``` + +An `ol.View2D` also has a `projection`. The projection determines the coordinate system of the `center` and the units for map resolution calculations. If not specified (like in the above snippet), the default projection is Spherical Mercator (EPSG:3857), with meters as map units. + +The `zoom` option is a convenient way to specify the map resolution. The available zoom levels are determined by `maxZoom` (default: 28), `zoomFactor` (default: 2) and `maxResolution` (default is calculated in such a way that the projection's validity extent fits in a 256x256 pixel tile). Starting at zoom level 0 with a resolution of `maxResolution` units per pixel, subsequent zoom levels are calculated by dividing the previous zoom level's resolution by `zoomFactor`, until zoom level `maxZoom` is reached. + + +## Source +To get remote data for a layer, OpenLayers 3 uses `ol.source.Source` subclasses. These are available for free and commercial map tile services like OpenStreetMap or Bing, for OGC sources like WMS or WMTS, and for vector data in formats like GeoJSON or KML. + +```js + var osmSource = new ol.source.OSM(); +``` + +## Layer +A layer is a visual representation of data from a `source`. OpenLayers 3 has three basic types of layers: `ol.layer.Tile`, `ol.layer.Image` and `ol.layer.Vector`. + +`ol.layer.Tile` is for layer sources that provide pre-rendered, tiled images in grids that are organized by zoom levels for specific resolutions. + +`ol.layer.Image` is for server rendered images that are available for arbitrary extents and resolutions. + +`ol.layer.Vector` is for vector data that is rendered client-side. + +```js + var osmLayer = new ol.layer.Tile({source: osmSource}); + map.addLayer(osmLayer); +``` + +## Putting it all together + + +The above snippets can be conflated to a self contained map configuration with view and layers: + +```xml +
+ +``` From d1c0665926ea417cf8ef8884595590fe1f78d158 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Tue, 24 Sep 2013 13:46:14 +0200 Subject: [PATCH 07/14] Adding heading --- doc/tutorials/concepts.hbs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/doc/tutorials/concepts.hbs b/doc/tutorials/concepts.hbs index be9f0ebe12..1f9da922b3 100644 --- a/doc/tutorials/concepts.hbs +++ b/doc/tutorials/concepts.hbs @@ -3,6 +3,8 @@ title: Basic Concepts layout: doc.hbs --- +# Basic Concepts + ## Map The core component of OpenLayers 3 is the map (`ol.Map`). It is rendered to a `target` container (e.g. a `div` element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. `setTarget()`. From b80022036f3784a97ecdbd4a7b149efa0df4f9e6 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Tue, 24 Sep 2013 14:42:04 +0200 Subject: [PATCH 08/14] ol3 logo for examples and apidoc header --- apidoc/template/tmpl/layout.tmpl | 2 +- examples/accessible.html | 2 +- examples/animation.html | 2 +- examples/bind-input.html | 2 +- examples/bing-maps.html | 2 +- examples/brightness-contrast.html | 2 +- examples/canvas-tiles.html | 2 +- examples/custom-controls.html | 2 +- examples/device-orientation.html | 2 +- examples/drag-rotate-and-zoom.html | 2 +- examples/epsg-4326.html | 2 +- examples/export-map.html | 2 +- examples/full-screen-drag-rotate-and-zoom.html | 2 +- examples/full-screen.html | 2 +- examples/geolocation.html | 2 +- examples/getfeatureinfo.html | 2 +- examples/gml.html | 2 +- examples/gpx.html | 2 +- examples/hue-saturation.html | 2 +- examples/icon.html | 2 +- examples/index.html | 2 +- examples/kml-earthquakes.html | 2 +- examples/kml-timezones.html | 2 +- examples/kml.html | 2 +- examples/layer-group.html | 2 +- examples/localized-openstreetmap.html | 2 +- examples/mapquest.html | 2 +- examples/min-max-resolution.html | 2 +- examples/mouse-position.html | 2 +- examples/moveend.html | 2 +- examples/navigation-controls.html | 2 +- examples/overlay.html | 2 +- examples/popup.html | 2 +- examples/preload.html | 2 +- examples/rotation.html | 2 +- examples/scale-line.html | 2 +- examples/select-features.html | 2 +- examples/semi-transparent-layer.html | 2 +- examples/side-by-side.html | 2 +- examples/simple.html | 2 +- examples/stamen.html | 2 +- examples/style-rules.html | 2 +- examples/teleport.html | 2 +- examples/tilejson.html | 2 +- examples/topojson.html | 2 +- examples/vector-layer.html | 2 +- examples/wms-capabilities.html | 2 +- examples/wms-custom-proj.html | 2 +- examples/wms-image-custom-proj.html | 2 +- examples/wms-image.html | 2 +- examples/wms-no-proj.html | 2 +- examples/wms-tiled.html | 2 +- examples/wmts-capabilities.html | 2 +- examples/wmts-from-capabilities.html | 2 +- examples/wmts-ign.html | 2 +- examples/wmts.html | 2 +- examples/xyz-esri.html | 2 +- examples/zoomslider.html | 2 +- resources/layout.css | 1 + resources/logo.png | Bin 0 -> 1365 bytes 60 files changed, 59 insertions(+), 58 deletions(-) create mode 100644 resources/logo.png diff --git a/apidoc/template/tmpl/layout.tmpl b/apidoc/template/tmpl/layout.tmpl index 6fab32deef..10805e2676 100644 --- a/apidoc/template/tmpl/layout.tmpl +++ b/apidoc/template/tmpl/layout.tmpl @@ -21,7 +21,7 @@
- OpenLayers 3 API Documentation - + OpenLayers 3 API Documentation -
diff --git a/examples/accessible.html b/examples/accessible.html index 2f54c51911..94339ed9ac 100644 --- a/examples/accessible.html +++ b/examples/accessible.html @@ -20,7 +20,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/animation.html b/examples/animation.html index 60d6f937fd..f8f7d2c1ff 100644 --- a/examples/animation.html +++ b/examples/animation.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/bind-input.html b/examples/bind-input.html index c5015ddc7f..3418fbf246 100644 --- a/examples/bind-input.html +++ b/examples/bind-input.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/bing-maps.html b/examples/bing-maps.html index 0b11b7e66c..c038972c4c 100644 --- a/examples/bing-maps.html +++ b/examples/bing-maps.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/brightness-contrast.html b/examples/brightness-contrast.html index 07b42173a5..80dc70f757 100644 --- a/examples/brightness-contrast.html +++ b/examples/brightness-contrast.html @@ -23,7 +23,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/canvas-tiles.html b/examples/canvas-tiles.html index e896536fc8..51f97905f9 100644 --- a/examples/canvas-tiles.html +++ b/examples/canvas-tiles.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/custom-controls.html b/examples/custom-controls.html index 766941a871..9cf24d173b 100644 --- a/examples/custom-controls.html +++ b/examples/custom-controls.html @@ -51,7 +51,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/device-orientation.html b/examples/device-orientation.html index 0fb7ba701a..470b06839d 100644 --- a/examples/device-orientation.html +++ b/examples/device-orientation.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/drag-rotate-and-zoom.html b/examples/drag-rotate-and-zoom.html index e3c2df70d8..3111e8ef8f 100644 --- a/examples/drag-rotate-and-zoom.html +++ b/examples/drag-rotate-and-zoom.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/epsg-4326.html b/examples/epsg-4326.html index 9e55b944cb..91439320e5 100644 --- a/examples/epsg-4326.html +++ b/examples/epsg-4326.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/export-map.html b/examples/export-map.html index 334b02238f..14076fe011 100644 --- a/examples/export-map.html +++ b/examples/export-map.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/full-screen-drag-rotate-and-zoom.html b/examples/full-screen-drag-rotate-and-zoom.html index 84eb71902c..8ef61c96ba 100644 --- a/examples/full-screen-drag-rotate-and-zoom.html +++ b/examples/full-screen-drag-rotate-and-zoom.html @@ -26,7 +26,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/full-screen.html b/examples/full-screen.html index 89af0abe72..d641ce5938 100644 --- a/examples/full-screen.html +++ b/examples/full-screen.html @@ -26,7 +26,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/geolocation.html b/examples/geolocation.html index 34553bbe60..44e31c630b 100644 --- a/examples/geolocation.html +++ b/examples/geolocation.html @@ -24,7 +24,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/getfeatureinfo.html b/examples/getfeatureinfo.html index 1997d916b8..16446f0cfd 100644 --- a/examples/getfeatureinfo.html +++ b/examples/getfeatureinfo.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/gml.html b/examples/gml.html index beacda13e4..9f43183b3e 100644 --- a/examples/gml.html +++ b/examples/gml.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/gpx.html b/examples/gpx.html index cc3f23738d..f0997c44fb 100644 --- a/examples/gpx.html +++ b/examples/gpx.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/hue-saturation.html b/examples/hue-saturation.html index c1c1967025..9c90d64c9a 100644 --- a/examples/hue-saturation.html +++ b/examples/hue-saturation.html @@ -23,7 +23,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/icon.html b/examples/icon.html index de344d6861..0471245a5d 100644 --- a/examples/icon.html +++ b/examples/icon.html @@ -23,7 +23,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/index.html b/examples/index.html index 191dd2fa3f..9a75fd2e2a 100644 --- a/examples/index.html +++ b/examples/index.html @@ -175,7 +175,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/kml-earthquakes.html b/examples/kml-earthquakes.html index 0b0f2696fa..f57958c012 100644 --- a/examples/kml-earthquakes.html +++ b/examples/kml-earthquakes.html @@ -36,7 +36,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/kml-timezones.html b/examples/kml-timezones.html index 39f134ac00..e8c6c57446 100644 --- a/examples/kml-timezones.html +++ b/examples/kml-timezones.html @@ -26,7 +26,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/kml.html b/examples/kml.html index 6bca94260b..c3d95e7119 100644 --- a/examples/kml.html +++ b/examples/kml.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/layer-group.html b/examples/layer-group.html index 867adcfe45..121197f838 100644 --- a/examples/layer-group.html +++ b/examples/layer-group.html @@ -19,7 +19,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/localized-openstreetmap.html b/examples/localized-openstreetmap.html index a3ad06d944..4cbfa2c000 100644 --- a/examples/localized-openstreetmap.html +++ b/examples/localized-openstreetmap.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/mapquest.html b/examples/mapquest.html index 3fbfe48a25..a47e4442c5 100644 --- a/examples/mapquest.html +++ b/examples/mapquest.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/min-max-resolution.html b/examples/min-max-resolution.html index 02d7ce1b8c..1a452f05e3 100644 --- a/examples/min-max-resolution.html +++ b/examples/min-max-resolution.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/mouse-position.html b/examples/mouse-position.html index 592993e894..b6bfb34ea3 100644 --- a/examples/mouse-position.html +++ b/examples/mouse-position.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/moveend.html b/examples/moveend.html index 4f4aa41283..295ab02df3 100644 --- a/examples/moveend.html +++ b/examples/moveend.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/navigation-controls.html b/examples/navigation-controls.html index feb153769f..a6303758d4 100644 --- a/examples/navigation-controls.html +++ b/examples/navigation-controls.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/overlay.html b/examples/overlay.html index 9926ee14d2..c5f6c7c515 100644 --- a/examples/overlay.html +++ b/examples/overlay.html @@ -27,7 +27,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/popup.html b/examples/popup.html index 1ba3e11cfa..c820c9e40c 100644 --- a/examples/popup.html +++ b/examples/popup.html @@ -60,7 +60,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/preload.html b/examples/preload.html index 21d4635836..ae32d8dd72 100644 --- a/examples/preload.html +++ b/examples/preload.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/rotation.html b/examples/rotation.html index bc60f6ab97..e465956111 100644 --- a/examples/rotation.html +++ b/examples/rotation.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/scale-line.html b/examples/scale-line.html index ecd7f02139..023d806f4c 100644 --- a/examples/scale-line.html +++ b/examples/scale-line.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/select-features.html b/examples/select-features.html index 1043e1097d..a764084d44 100644 --- a/examples/select-features.html +++ b/examples/select-features.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/semi-transparent-layer.html b/examples/semi-transparent-layer.html index 758049c493..0a1b1594b9 100644 --- a/examples/semi-transparent-layer.html +++ b/examples/semi-transparent-layer.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/side-by-side.html b/examples/side-by-side.html index 87eb439c87..aaf627e073 100644 --- a/examples/side-by-side.html +++ b/examples/side-by-side.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/simple.html b/examples/simple.html index f6c42a8e41..13b2a7d56e 100644 --- a/examples/simple.html +++ b/examples/simple.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/stamen.html b/examples/stamen.html index 9ccd3967e8..d259a40893 100644 --- a/examples/stamen.html +++ b/examples/stamen.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/style-rules.html b/examples/style-rules.html index 88f05e077c..1837ab41ce 100644 --- a/examples/style-rules.html +++ b/examples/style-rules.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/teleport.html b/examples/teleport.html index 94942df3f2..dd1f93e128 100644 --- a/examples/teleport.html +++ b/examples/teleport.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/tilejson.html b/examples/tilejson.html index e332722538..fca30e7d80 100644 --- a/examples/tilejson.html +++ b/examples/tilejson.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/topojson.html b/examples/topojson.html index d71a38c331..9bf116555d 100644 --- a/examples/topojson.html +++ b/examples/topojson.html @@ -14,7 +14,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/vector-layer.html b/examples/vector-layer.html index 4695f80f48..e9ecdd5aea 100644 --- a/examples/vector-layer.html +++ b/examples/vector-layer.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wms-capabilities.html b/examples/wms-capabilities.html index 1636862845..b45b69ac2d 100644 --- a/examples/wms-capabilities.html +++ b/examples/wms-capabilities.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wms-custom-proj.html b/examples/wms-custom-proj.html index 96ff5ba530..5ca2ceb206 100644 --- a/examples/wms-custom-proj.html +++ b/examples/wms-custom-proj.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wms-image-custom-proj.html b/examples/wms-image-custom-proj.html index 86d46b7df4..14b877d3c4 100644 --- a/examples/wms-image-custom-proj.html +++ b/examples/wms-image-custom-proj.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wms-image.html b/examples/wms-image.html index b6e6f327a2..067c09863b 100644 --- a/examples/wms-image.html +++ b/examples/wms-image.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wms-no-proj.html b/examples/wms-no-proj.html index e76dcdfd16..bda0c340f3 100644 --- a/examples/wms-no-proj.html +++ b/examples/wms-no-proj.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wms-tiled.html b/examples/wms-tiled.html index 35da401567..2f83ac7fe5 100644 --- a/examples/wms-tiled.html +++ b/examples/wms-tiled.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wmts-capabilities.html b/examples/wmts-capabilities.html index 0d379cb167..7e318da573 100644 --- a/examples/wmts-capabilities.html +++ b/examples/wmts-capabilities.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wmts-from-capabilities.html b/examples/wmts-from-capabilities.html index bd7b62b13a..caf9292e1a 100644 --- a/examples/wmts-from-capabilities.html +++ b/examples/wmts-from-capabilities.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wmts-ign.html b/examples/wmts-ign.html index 34b47828e6..5fb49cbfb9 100644 --- a/examples/wmts-ign.html +++ b/examples/wmts-ign.html @@ -20,7 +20,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/wmts.html b/examples/wmts.html index 1f67aba491..4419968a8f 100644 --- a/examples/wmts.html +++ b/examples/wmts.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/xyz-esri.html b/examples/xyz-esri.html index f7bedfb982..13fa73fe5f 100644 --- a/examples/xyz-esri.html +++ b/examples/xyz-esri.html @@ -15,7 +15,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/examples/zoomslider.html b/examples/zoomslider.html index 77c47723d8..7cf1cb941e 100644 --- a/examples/zoomslider.html +++ b/examples/zoomslider.html @@ -67,7 +67,7 @@
- OpenLayers 3 Examples + OpenLayers 3 Examples
diff --git a/resources/layout.css b/resources/layout.css index 59f8d70738..d870e4a7c5 100644 --- a/resources/layout.css +++ b/resources/layout.css @@ -24,5 +24,6 @@ body, h1, h2, h3, h4, p, li, td, th { } .navbar-inverse .brand { color: white; + padding: 5px; } diff --git a/resources/logo.png b/resources/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..3d9702eb3c2ab40a8613e934624cd7398ca2eaf2 GIT binary patch literal 1365 zcmV-b1*-aqP)!P^+d` zwLwE4(5ftoWx?+9D34_+y9>KJ<2lnAI<5=Mva^dPxw&&^?w$GN-2eaHnPDK#;5g2J zl?97&e`jC0c>d*;x17bwhsDb$em0e!nHeZ|DR(-e3q(8p< zPWuUL4j^bKDS!x<(l+9~qv5aqwpVhw69R~E8J~5#%YPX1G;%j|7wdF+@6EP8joEBP$ZK-O zXkyS?);k?nw)aj3b}s~uzYmT(GvsN;d(_}P8wFjmab-||%YXI!pRWy11z!S%!m86W z99VnX+j!`n%RG#dW{5T9n1@l?46(+1=3x?H1|`j-NrV}cG!K&~GlV$~{8*;(>C;$8 zh8l}O#bC|wbrkaqk}esg%s@cnEC<(F77GVKF1GO|gft5!TdTQg9wBoD&;R21B-(yD zUl7o>5DQ+GQ*6o!C{3;EY^f-zAixaN+%wL}!27Y>WHijeKqwq@recikWD=9hH?>Xf z2tQ`ZgHG^fsH1ZOY|EG$kuo?)~S;Mm=1`utp-=09+MBiv%eiWChzk!iB3XiH() zuxDq!6;>Fu{~NekyA8~06|X_K*wg3K;Y9AtvqG^+x2SL%)AaCRVFnL(srRarwnXT$ zE&ce(^<}i>L8(~>Ia)QePD~{o?ztQ@?8v!khngeDtURF4e)}HR=os8ra$`9x)N5gt zQO83Dli*(3himfE;C`EN=G>cK9Ea1tIrx_fFqEvR>~as-9qxW8FD`-iK zJkiWhcd7+yn@<8IMf~rCaBoQ8ydeUz10lZ`AoZ8}u7VQgnavD`fBaeO!utT>8X`Xp zAPQtJLVk^h>#!_|*E}-JK(qD$!kvlf!#(|}XVXX`SSqQVs@FsP3)M5ar1;k3ho%u< zR0C1gwq}`mlZioQAUKKMXg#S!xbX%5JVMZVdi@sLd$&9SRb_Yms}H$+P_jjmp-2wW zAT!i9os4RRxc_b;Bz+bf65CtvSqC*$56adcnW65R7U?N6!-4t6sbznQ%wnEZ1^K)# zXA9EXuER(9Wos@oDE0#rGr3yGWT|*=^V(7 Date: Tue, 24 Sep 2013 14:56:25 +0200 Subject: [PATCH 09/14] Nicer search box position --- examples/index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/examples/index.html b/examples/index.html index 9a75fd2e2a..41d41eb105 100644 --- a/examples/index.html +++ b/examples/index.html @@ -20,6 +20,9 @@ .example:hover { background-color: #ddd; } + .navbar-search.pull-left { + padding: 5px; + } ::-webkit-scrollbar { width: 8px; From a9b0e6239bfeb89e8b956ecf967f20ab19f006e2 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Tue, 24 Sep 2013 14:57:07 +0200 Subject: [PATCH 10/14] Link to latest, fenced code blocks --- doc/quickstart.hbs | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/doc/quickstart.hbs b/doc/quickstart.hbs index 39b0951677..dbc37808fe 100644 --- a/doc/quickstart.hbs +++ b/doc/quickstart.hbs @@ -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 - + - + OpenLayers 3 example @@ -55,7 +55,7 @@ To include a map a web page you will need 3 things: ### Include OpenLayers ```xml - + ``` 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 `
`, 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. From 5c98a47581747a3690827feefa333b36145ac8c2 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Tue, 24 Sep 2013 14:57:28 +0200 Subject: [PATCH 11/14] Bare bones index pages --- doc/index.hbs | 10 ++++++++++ doc/tutorials/index.hbs | 8 ++++++++ 2 files changed, 18 insertions(+) create mode 100644 doc/index.hbs create mode 100644 doc/tutorials/index.hbs diff --git a/doc/index.hbs b/doc/index.hbs new file mode 100644 index 0000000000..5825bb1998 --- /dev/null +++ b/doc/index.hbs @@ -0,0 +1,10 @@ +--- +title: Documentation +layout: doc.hbs +--- + +# Documentation + +If you're eager to get your first OpenLayers 3 map on a page, dive into the [quick start](quickstart.html). + +For a more in-depth overview of OpenLayers 3 core concepts, check out the [tutorials](tutorials/). diff --git a/doc/tutorials/index.hbs b/doc/tutorials/index.hbs new file mode 100644 index 0000000000..2ac1298a88 --- /dev/null +++ b/doc/tutorials/index.hbs @@ -0,0 +1,8 @@ +--- +title: Tutorials +layout: doc.hbs +--- + +# Tutorials + +We'll be putting together a more comprehensive set of tutorials here. For now, you can take a look at the [basic concepts](concepts.html) tutorial. Stay tuned for more! From 9e274a61dbeefe2b29af441b0c81caba4c9c59a7 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Tue, 24 Sep 2013 15:06:22 +0200 Subject: [PATCH 12/14] Fixing typo --- doc/tutorials/concepts.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/tutorials/concepts.hbs b/doc/tutorials/concepts.hbs index 1f9da922b3..09110938c5 100644 --- a/doc/tutorials/concepts.hbs +++ b/doc/tutorials/concepts.hbs @@ -67,7 +67,7 @@ The above snippets can be conflated to a self contained map configuration with v center: [0, 0], zoom: 2 }), - target: 'div' + target: 'map' }); ``` From c4dba8e8282405eda7d624a4d6815970e216fd70 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Tue, 24 Sep 2013 15:10:42 +0200 Subject: [PATCH 13/14] Link to website root --- apidoc/template/tmpl/layout.tmpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apidoc/template/tmpl/layout.tmpl b/apidoc/template/tmpl/layout.tmpl index 10805e2676..dbecd6f857 100644 --- a/apidoc/template/tmpl/layout.tmpl +++ b/apidoc/template/tmpl/layout.tmpl @@ -21,7 +21,7 @@
- OpenLayers 3 API Documentation - + OpenLayers 3
From 394dfa297a488b107f74670969dfe492b4e098a6 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Tue, 24 Sep 2013 15:14:34 +0200 Subject: [PATCH 14/14] Link to API docs --- doc/index.hbs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/doc/index.hbs b/doc/index.hbs index 5825bb1998..ee1051ae3d 100644 --- a/doc/index.hbs +++ b/doc/index.hbs @@ -8,3 +8,5 @@ layout: doc.hbs If you're eager to get your first OpenLayers 3 map on a page, dive into the [quick start](quickstart.html). For a more in-depth overview of OpenLayers 3 core concepts, check out the [tutorials](tutorials/). + +Find additional reference material in the [API docs](../apidoc).