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

Remove the '3' from OpenLayers

Browse Source
This commit is contained in:
Andreas Hocevar
2017-01-02 23:03:03 +01:00
parent ab3d97d6de
commit 7424ee91e3
80 changed files with 1888 additions and 1888 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
doc/tutorials/browserify.md
View File

@@ -7,12 +7,12 @@ layout: doc.hbs
When going beyond modifying existing examples you might be looking for a
way to setup your own code with dependency management together with external
dependencies like OpenLayers 3.
dependencies like OpenLayers.
This tutorial serves as a suggested project setup using NPM and Browserify
for the most basic needs. There are several other options and in particular
you might be interested in
[compiling your own code together with OpenLayers 3](closure.html).
[compiling your own code together with OpenLayers](closure.html).
## Initial steps
@@ -84,6 +84,6 @@ to the script section in `package.json`:
```
Note that `bundle.js` will contain your application code and all dependencies
used in your application, in this case the official full build of OpenLayers 3.
If you only need parts of OpenLayers 3 you can create
used in your application, in this case the official full build of OpenLayers.
If you only need parts of OpenLayers you can create
[custom builds](../../builder).

34
doc/tutorials/closure.md
View File

@@ -5,12 +5,12 @@ layout: doc.hbs
# Compiling Application with Closure Compiler
The OpenLayers 3 code uses the Closure Library, and it is compiled with the
Closure Compiler. Using OpenLayers 3 in an application does not require using
Closure. But using Closure in an OpenLayers 3 application is possible. And this
The OpenLayers code uses the Closure Library, and it is compiled with the
Closure Compiler. Using OpenLayers in an application does not require using
Closure. But using Closure in an OpenLayers application is possible. And this
is what this tutorial is about.
This tutorial will teach you how to set up an OpenLayers 3 application based on
This tutorial will teach you how to set up an OpenLayers application based on
the [`closure-util`](https://github.com/openlayers/closure-util) node package,
which provides utilities for working with Closure. Using `closure-util` is one
way to use Closure in a web application, but there are others. This tutorial
@@ -30,19 +30,19 @@ GitHub.
## Advantages of using Closure
This tutorial will show you how to use the Closure Compiler to compile an
application and OpenLayers 3 together. Compiling the application code together
with the OpenLayers 3 code has a number of advantages.
application and OpenLayers together. Compiling the application code together
with the OpenLayers code has a number of advantages.
First of all, it allows you to only "pay" for the OpenLayers 3 code your
application uses, as the compiler will exclude the OpenLayers 3 code that the
First of all, it allows you to only "pay" for the OpenLayers code your
application uses, as the compiler will exclude the OpenLayers code that the
application doesn't use. And there is no need to write and maintain a list of
"exports", which is necessary when creating custom builds of OpenLayers 3.
"exports", which is necessary when creating custom builds of OpenLayers.
Also, compiling the application and OpenLayers 3 together allows using
OpenLayers 3 functions and objects that are not part of the official OpenLayers
Also, compiling the application and OpenLayers together allows using
OpenLayers functions and objects that are not part of the official OpenLayers
3 API. Using non-API functions and objects may be risky, but it is mitigated by
the fact that the compiler will complain if you use functions or objects
that are not in OpenLayers 3 anymore.
that are not in OpenLayers anymore.
## Setting up the Application
@@ -70,7 +70,7 @@ Create the application's `package.json` file:
You can pretty much use the default answers to the questions `npm init` asks
you.
Now install OpenLayers 3 using:
Now install OpenLayers using:
$ npm install openlayers --save
@@ -99,9 +99,9 @@ been installed with `openlayers`. Use the following to verify that
-l LEVEL, --loglevel LEVEL Log level [info]
## Create an OpenLayers 3 map
## Create an OpenLayers map
You're now going to create a JavaScript file that creates an OpenLayers 3 map.
You're now going to create a JavaScript file that creates an OpenLayers map.
This is the file that we will define the application's entry point.
First of all create an `src` directory at the root of the application:
@@ -143,7 +143,7 @@ OpenLayers map as you would do in any OpenLayers application.
## Compiling the Application
We're now going to compile the application and OpenLayers 3 together, using the
We're now going to compile the application and OpenLayers together, using the
Closure Compiler and `closure-util`. For this we need to create a JSON config
file, that we will then pass as an input file to the `closure-util` command.
@@ -195,7 +195,7 @@ We can now use `closure-util` to compile the code:
The resulting `app.js` file, which you can view in your editor if you're
curious, includes a minified version of the application code (`main.js`), and
the OpenLayers 3 code that the application code uses.
the OpenLayers code that the application code uses.
Here is a version of `config.json` with more compilation checks enabled:

6
doc/tutorials/concepts.hbs
View File

@@ -6,7 +6,7 @@ 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()`.
The core component of OpenLayers 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
<div id="map" style="width: 100%, height: 400px"></div>
@@ -31,14 +31,14 @@ The `zoom` option is a convenient way to specify the map resolution. The availab
## 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.
To get remote data for a layer, OpenLayers 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`.
A layer is a visual representation of data from a `source`. OpenLayers 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.

34
doc/tutorials/custom-builds.md
View File

@@ -5,35 +5,35 @@ layout: doc.hbs
# Creating custom builds
OpenLayers 3 is a big library providing a lot of functionality. So it is unlikely that an application will need and use all the functionality OpenLayers 3 provides. This is why creating application-specific OpenLayers 3 builds, with just the functionality your application needs, is often a good idea.
OpenLayers is a big library providing a lot of functionality. So it is unlikely that an application will need and use all the functionality OpenLayers provides. This is why creating application-specific OpenLayers builds, with just the functionality your application needs, is often a good idea.
An alternative to creating custom builds is to compile your application code together with OpenLayers 3. See the [Compiling Application with Closure Compiler](closure.html) tutorial for more information.
An alternative to creating custom builds is to compile your application code together with OpenLayers. See the [Compiling Application with Closure Compiler](closure.html) tutorial for more information.
This particular tutorial explains how to create custom builds of OpenLayers 3.
This particular tutorial explains how to create custom builds of OpenLayers.
## Requirements
OpenLayers 3's build tools use Node and Java, so you need to have Node and Java installed on your machine. You can run `node --version` and `java -version` to test that Node and Java are installed, respectively. See [developing guide](https://github.com/openlayers/ol3/blob/master/DEVELOPING.md) for minimum version numbers required.
OpenLayers's build tools use Node and Java, so you need to have Node and Java installed on your machine. You can run `node --version` and `java -version` to test that Node and Java are installed, respectively. See [developing guide](https://github.com/openlayers/openlayers/blob/master/DEVELOPING.md) for minimum version numbers required.
## Download OpenLayers
Obviously, creating a custom build requires the OpenLayers 3 source and specific build scripts.
Obviously, creating a custom build requires the OpenLayers source and specific build scripts.
To get the OpenLayers 3 source and the build scripts you can clone the `ol3` [repository](https://github.com/openlayers/ol3), or you can download one of the release archives. You can also download the `openlayers` Node package from the Node package registry, using NPM (the Node Package Manager). This is the method we are going to use in this tutorial.
To get the OpenLayers source and the build scripts you can clone the openlayers [repository](https://github.com/openlayers/openlayers), or you can download one of the release archives. You can also download the `openlayers` Node package from the Node package registry, using NPM (the Node Package Manager). This is the method we are going to use in this tutorial.
Create a directory:
$ mkdir openlayers
Download the OpenLayers 3 distribution using NPM:
Download the OpenLayers distribution using NPM:
$ npm install openlayers
This will download the latest stable version of OpenLayers 3, and install it under `node_modules`. You can list the content of `node_modules` to verify that it effectively contains a directory named "openlayers".
This will download the latest stable version of OpenLayers, and install it under `node_modules`. You can list the content of `node_modules` to verify that it effectively contains a directory named "openlayers".
The Node packages onto which the `openlayers` package depends are installed under `node_modules/openlayers/node_modules`. That directory should, for example, include `closure-util`, which is the utility library OpenLayers 3 uses for Closure.
The Node packages onto which the `openlayers` package depends are installed under `node_modules/openlayers/node_modules`. That directory should, for example, include `closure-util`, which is the utility library OpenLayers uses for Closure.
You should now have everything you need to create custom builds of OpenLayers 3!
You should now have everything you need to create custom builds of OpenLayers!
## Create a build configuration file
@@ -92,9 +92,9 @@ var map = new ol.Map({
});
```
Note that this JavaScript code corresponds to OpenLayers 3's [`simple`](https://openlayers.org/en/master/examples/simple.html) example.
Note that this JavaScript code corresponds to OpenLayers's [`simple`](https://openlayers.org/en/master/examples/simple.html) example.
You are now ready to create your first OpenLayers 3 build. Use the following command to create the build:
You are now ready to create your first OpenLayers build. Use the following command to create the build:
$ cd node_modules/openlayers
$ node tasks/build.js build/ol-custom.json build/ol-custom.js
@@ -113,7 +113,7 @@ As a test, you can use the following HTML file to verify that your custom build
<html>
<head>
<meta charset="utf-8" />
<title>OpenLayers 3 example</title>
<title>OpenLayers example</title>
<link rel="stylesheet" href="node_modules/openlayers/css/ol.css" />
<style>
#map {
@@ -147,7 +147,7 @@ As a test, you can use the following HTML file to verify that your custom build
### `define`'s
Closure allows you to define constants that can be set at compile time. The `define` config property above sets four `goog` properties for the Closure library. The OpenLayers 3 code also has defined values you can set.
Closure allows you to define constants that can be set at compile time. The `define` config property above sets four `goog` properties for the Closure library. The OpenLayers code also has defined values you can set.
Setting some of these to `false` means that the portions of the code relating to this setting become "dead", i.e. are never executed. As Closure Compiler's `ADVANCED` mode removes dead code, this makes the size of the advanced compiled file smaller.
@@ -161,9 +161,9 @@ and re-run the build script. The build size should now be smaller.
### Externs
The Closure documentation explains that "externs" are for external names used in the code being compiled. The compiler includes externs for built-ins such as `document`. The `externs` directory of the OpenLayers 3 code includes files for all those used in some part of the library. For example, if you use Bing Maps, you should include the Bing externs file in the `externs` section of the config file.
The Closure documentation explains that "externs" are for external names used in the code being compiled. The compiler includes externs for built-ins such as `document`. The `externs` directory of the OpenLayers code includes files for all those used in some part of the library. For example, if you use Bing Maps, you should include the Bing externs file in the `externs` section of the config file.
`oli.js` and `olx.js` are externs files for the OpenLayers 3 API. For examples `olx.js` includes extern definitions for OpenLayers 3's constructor options. You should always use these two files as externs when creating custom builds.
`oli.js` and `olx.js` are externs files for the OpenLayers API. For examples `olx.js` includes extern definitions for OpenLayers's constructor options. You should always use these two files as externs when creating custom builds.
### Other compiler options
@@ -220,4 +220,4 @@ If you installed OpenLayers from the Node package, you can use `npm` to upgrade
## Conclusion
This tutorial should have given you the information you need to create custom builds, i.e. builds tailored to your application. See the [tasks readme](https://github.com/openlayers/ol3/tree/master/tasks/readme.md) for more information on the build scripts and the properties you can use in the build configuration file.
This tutorial should have given you the information you need to create custom builds, i.e. builds tailored to your application. See the [tasks readme](https://github.com/openlayers/openlayers/tree/master/tasks/readme.md) for more information on the build scripts and the properties you can use in the build configuration file.

2
doc/tutorials/index.hbs
View File

@@ -5,7 +5,7 @@ layout: doc.hbs
# Tutorials
* [Introduction to OpenLayers 3](introduction.html)
* [Introduction to OpenLayers](introduction.html)
* [Basic Concepts](concepts.html)
* [Create Custom Builds](custom-builds.html)
* [Bundle Application and OpenLayers using Browserify](browserify.html)

2
doc/tutorials/raster-reprojection.md
View File

@@ -5,7 +5,7 @@ layout: doc.hbs
# Raster Reprojection
OpenLayers 3 has an ability to display raster data from WMS, WMTS, static images and many other sources in a different coordinate system than delivered from the server.
OpenLayers has an ability to display raster data from WMS, WMTS, static images and many other sources in a different coordinate system than delivered from the server.
Transformation of the map projections of the image happens directly in a web browser.
The view in any Proj4js supported coordinate reference system is possible and previously incompatible layers can now be combined and overlaid.