The worker currently works by receiving GENERATE_BUFFERS messages and
will send back the same kind of message, with the generated buffers
attached. All properties of the original message are kept, so that
when a GENERATE_BUFFERS message comes back to the main thread it
is possible to know what and how the buffers where generated.
This is typically used for the `projectionTransform` matrix, and
will also be necessary when working with tiles.
The worker receives a transferable array of instructions
and sends back two transferable arrays (vertex and index buffer).
The projection transform is also sent so that when the main thread
receives the buffers from the worker it also knows which projection to
apply when rendering the geometries.
The base webgl renderer module now has two types of utilities:
* `writeXFeatureInstructions` will write a series of values in a given
typed array, which represent how a given feature will be rendered; for points,
this means position, size, color, etc.
* `writeXFeatureToBuffers` will fill up the given index & vertex buffers
with values based on the provided render instructions
As such, the logic for rendering features is:
user-input style > instructions array >(*) index/vertex buffers > draw
(*) this transformation is intended to be done on a worker.
Add a filter function to the translate interaction. This filter is similar to the one present in the select interaction options and provides the ability to dynamically filter which features to include in the translate interaction. Adding the existing "features" options allows further filtering to take place. In this case the filter is first applied, and features that are passing the filtering need to be present in the "features" options to be further kept. The default filter function always return true (no filtering).
...in the collection.
Previously two features with the same id could be pushed manually in the
features collection and stay there.
This would cause an error when clearing the source.
Fixes#6183.
The recent addition of tilePixelRatio to the Zoomify.js/CustomTile constructor broke parameter binding in IIIF.js/IIIF.
The fix mirrors the change in the Zoomify.js/Zoomify constructor
The `WebGLHelper` class now provides a `makeProjectionTransform` method
that updates a transform to match the projection for a given frame state.
This also means that the WebGLHelper does not set the projection matrix
uniform anymore, this is the responsibility of the renderer as
the rendered coordinates will not be in world space from now on.
This uses an undocumented method to trigger a synchronous redraw
instead of using the standard schedule from Mapbox. The CSS previously used
to make the OL and MB views match is not necessary anymore.
Reference: https://github.com/mapbox/mapbox-gl-js/issues/7893#issue-408992184
IIIF Image API 3 allows context extensions that should be added to the
info.json's @context property. Therefore, '@context' might be an array
instead of a string.
60: "Missing or invalid `size`."
Without at least a size, no IIIF can be displayed.
61: "Cannot determine IIIF Image API version from provided image
information JSON."
Without finding out the version information, one could only guess how to
use the image info JSON.
src/ol/source/IIIF.js contains a tile source for IIIF Image API services.
It supports Image API version 1 and 2 on compliance levels 0, 1 and 2.
To get working constructor options for IIIF from an IIIF image info.json,
use src/ol/format/IIIFInfo.js.
An example is available in examples/iiif.html respectivly examples/iiif.js.
The transpiling step is done by babel instead of bublé now.
Bublé caused the istanbul instrumenter step to crash because of an
unexpected SourceMap object format.
Previously, an interaction could begin while target values
(center/resolution) were out of the allowed range, causing a
glitch where the view zoom/position would jump suddenly.
By default, alpha premultiplying should be done by the initial rendering
(eg quads) and not the final post processing pass.
The default post processing pass expects premultiplied color values and
will not do this operation itself.
This also makes it possible to call `solveConstraints_` with a duration of 0,
which means the target values are modified straight away without triggering
an animation or leaving the current flow.
The renderer now accesses the zDirection member directly if it exists.
This also has the advantage of not advertising any object methods that
hav no use for most tile sources.
The zDirection addition to the Zoomify tile source only takes effect through
the renderer, so these two renderer cases are added to test the behavior.
zoomify-no-zdirection expects the default behavior.
zoomify-zdirection expects the tiles for the next better resolution.
Via zDirection, the renderer's selection of a tile source's resolution can be
controlled if the view's resolution does not match any tile source resolution.
Currently the zDirection option is only available for Zoomify. The comment
https://github.com/openlayers/openlayers/issues/9343#issuecomment-474341033
describes why caution is advised when using zDirection for other sources.
ol/source/Tile~TileSource#getZDirection has been added to avoid having the
getZDirection method solely in the Zoomify source - just to document the
possibility.
Transforms the old rendering tests for the VectorImageLayer
to the new rendering test approach.
The declutter tests are kept in the old format for know.
- This sets ignore to false if a method tagged with
inheritdoc has a matching ancestor. It also stops iterating
when a match is found.
- Outdated TODO is removed, too.
this commit enhances the readability of
tile debug coordinates by adding a stroke
for better readability on aerial imagery
and a maxWidth for high zoom levels
The BSD 2-Clause License is a simplified version of the BSD 3-Clause License. This license was popularized by the FreeBSD project and is sometimes referred to as the "FreeBSD License" (see https://opensource.org/licenses/BSD-2-Clause and https://en.wikipedia.org/wiki/BSD_licenses#2-clause). To clarify that the OpenLayers License uses the BSD 2-Clause License template, this change adds "The 2-Clause BSD License" to the top of our license file. In addition, this change makes our license a verbatim copy of the template at https://opensource.org/licenses/BSD-2-Clause with only the copyright holders added. This change is not intended to change the project's license, only to clarify the template used for that license. See https://lists.osgeo.org/pipermail/openlayers-dev/2011-May/007555.html for the original motion to switch to the BSD 2-Clause License (also known as the FreeBSD License).
This downgrades puppeteer to version `~1.11.0`.
This will download the stable version of chromium
(72.0.3582.0). The current puppeteer version
(`^1.12.2`) downloads the beta version of
chromium (73.0.3679.0).
Previously the formula for the resolution constraint allowed going way past
the minimum zoom.
Also adjusted the center constraint to avoid a zigzag effect when going out
of resolution bounds.
The DragPan, KeyboardPan and DragZoom interactions now make sure to
animate to a valid center/resolution target to avoid
a chained "resolve" animation which looks weird.
The `View.fit` method was also fixed to use this.
API changes:
* (breaking) the `rotate` method is gone
* the `adjustRotation`, `adjustResolution` and `adjustZoom` methods are now
available and allow using an anchor.
This means interactions do not have to do the anchor computation themselves
and this also fix anchor computation when constraints must be applied.
This introduces a breaking change.
This options replaces the various `constrainResolution` options on interactions
and the `fit` method.
Since constraints are now the responsibility of the View, the fact that intermediary
zoom levels are allowed or not is now set in the view options.
By default, the view resolution is unconstrained.
This is done by applying the center constraint differently when we're in the
middle of an interaction/animation or not.
When the view is moving, the center constraint will restrain the given value
in an "elastic" way, using a logarithmic function.
This can be disabled using the `smoothCenterConstrain` view parameter.
This will help making sure that the view will come back to a "rested" state
once the interactions are over.
Interactions no longer need to handle the animation back to a rested state,
they simply call `endInteraction` with the desired duration and direction.
This commit aims to simplify the computation of zoom and resolution in the
View class.
Previously zoom levels and resolution computations were mixed in different places,
ie resolution constraints, initial values, etc.
Now the View class only has the `getZoomForResolution` and `getResolutionForZoom`
methods to convert from one system to another.
Other than that, most computations use the resolution system internally.
The `constrainResolution` method also does not exist anymore, and is replaced
by `getValidResolution` and `getValidZoomLevel` public methods.
This introduces a breaking change:
The `extent` view option now constrains the whole viewport and not just the
view center.
The option `constrainOnlyCenter` was added to keep the previous behaviour.
Constraining the whole viewport and not only the view center means
that the center and resolution constraints must be applied with a knowledge of
the viewport size.
The `getValidZoomLevel` apply the current resolution constraint to return
a value that is guaranteed valid.
This is used for interactions & controls which need a target value to work:
the +/- buttons, the zoom clider, the dragbox zoom and the mouse wheel zoom.
The view now has targetCenter, targetRotation and targetResolution members.
These hold the new values given by set* methods. The actual view parameters are then changed by
calling `applyParameters_`.
The TileJSON spec does not specify the tile size
and there is no TileJSON property specifying the value.
Many providers nowadays provide 512x512 with TileJSON.
- Rename linearRingIsOriented => linearRingsAreOriented
The function checks all linear rings of a Polygon, so
the plural "rings" is more appropriate
- Rename linearRingsAreOriented => linearRingssAreOriented
The double s is appropriate because the check is done for
all Polygons of a MultiPolygon
This commit restores the function names from OpenLayers v4,
they were changed (wrongly IMHO) in #7820.
Things done:
- stay closer to the original rendering in canvas
- get rid of the intermediary blur step
- use the new callbacks in the webgl points renderer
- premultiply alpha in the last postprocessing step
Now the shader and program caches are simply arrays of native WebGL created objects.
The WebGLHelper simply takes the sources of the frag and vert shader and produces a program.
This removes 2 classes & reduces the general verbosity of the API.
Also a `getShaderCompilationErrors` was added on `WebGLHelper` to help debug GLSL errors.
Executors are use to render instructions.
They do not contain cod for building instructions.
Signed-off-by: Guillaume Beraudo <guillaume.beraudo@camptocamp.com>
ol/renderer/vector was using the abstract ReplayGroup type while
referencing replayGroup.addDeclutter(), which was only defined
on the canvas and webgl implementations and was also defined
differently.
- Added JSDoc to getRenderer()
- Cast default options to types
- Cast event to MouseEvent to satisfy tsc. Non mouse/touch events
will simply produce [NaN, NaN]
- Cast to Layer before calling getSource(), as it does not exist
on Base
tsc considers everything in the else block to be of type 'never',
since it thinks that cosh is permanently defined for Math. Casting
back to Math in the else block fixes the error.
Remove 'extent' because the parent Source class does not contain
'extent' on its options or use options.extent in the constructor.
Also removed 'extent' from 'Options' for 'TileSource'.
Fixed constructor docs specifying optional options without a
default value. Fixed malformed @link tag in typedef description.
canvasFunction type was previously declared with the 'this' type
as ImageCanvas, but the 'this' ref was not passed on the scope when
calling the function.
The parent class does not accept an extent on its options. Also
check that the image is an img or video tag before setting the
source as Canvas does not have the src property.
If `VOID` is used, TypeScript is not able to figure out what the function parameters are.
Before:
```
$ npx tsc | wc -l
1188
```
After:
```
$ npx tsc | wc -l
1169
```
I'm not entirely sure that I like this pattern, but there does not
appear to be a better option since TypeScript would recommend:
function(this: SomeClass, ...)
tsdoc does not appear to support an associated annotation for the
function a la @this {SomeClass}.
Remove the following errors from the TypeScript checks:
```
src/ol/pointer/TouchSource.js(231,23): error TS2339: Property 'webkitRadiusX' does not exist on type 'Touch'.
src/ol/pointer/TouchSource.js(232,24): error TS2339: Property 'webkitRadiusY' does not exist on type 'Touch'.
src/ol/pointer/TouchSource.js(233,26): error TS2339: Property 'webkitForce' does not exist on type 'Touch'.
```
The only reference that I've found for these properties is a warning message from Google Chrome:
```
'Touch.webkitRadiusX' is deprecated and will be removed in M47, around November 2015. Please use 'Touch.radiusX' instead.
```
TypeScript doesn't like the current implementation:
```
src/ol/control/MousePosition.js(82,64): error TS2339: Property 'undefinedHTML' does not exist on type 'never'.
```
Some WMTS getCapabilities return <MatrixSet><TopLeftCorner> with more than one whitespace as delimiter between the coordinates. This leads to the layer not being displayed, because the origin_ property of ol.tilegrid.TileGrid is not set.
Error in ol.tilegrid.TileGrid.prototype.getTileCoordForXYAndZ_: JavaScript runtime error: Unable to get property '0' of undefined or null reference
It is often useful in application code to have a way to uniquely identify
and object.
Exposing the OpenLayers mechanism allows for best performance and avoid
unneccessary dirt.
TileWMS objects take a gutter option but do not have a public getter
for it. This makes it convoluted for user code to recreate the object
(ex: in the case of serialization/deserialization).
- the getGutterInternal() method is renamed to getGutter;
- the getGutter(projection) method is renamed to getGutterForProjection,
which is also more explicit.
The getGutter method was not API and is only used by the renderer.
Instead, only prevent default on handled pointerdown events. This makes
the `focus` condition work with interactions that involve dragging on
touch devices.
[OpenLayers](https://openlayers.org/) is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).
[OpenLayers](https://openlayers.org/) is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the [BSD 2-Clause License](https://opensource.org/licenses/BSD-2-Clause).
## Getting Started
@@ -39,6 +39,31 @@ See the following examples for more detail on bundling OpenLayers with your appl
* Using [Rollup](https://github.com/openlayers/ol-rollup)
* Using [Webpack](https://github.com/openlayers/ol-webpack)
* Using [Parcel](https://github.com/openlayers/ol-parcel)
* Using [Browserify](https://github.com/openlayers/ol-browserify)
## IntelliSense support and type checking for VS Code
The `ol` package contains a `src/` folder with JSDoc annotated sources. TypeScript can get type definitions from these sources with a `jsconfig.json` config file in the project root:
```js
{
"compilerOptions":{
"checkJs":true,
// Point to the JSDoc typed sources when using modules from the ol package
"baseUrl":"./",
"paths":{
"ol":["node_modules/ol/src"],
"ol/*":["node_modules/ol/src/*"]
}
},
"include":[
"**/*.js",
"node_modules/ol/**/*.js"
]
}
```
Project template with this configuration: https://gist.github.com/9a7253cb4712e8bf38d75d8ac898e36c.
Note that the above only works when authoring in plain JavaScript. For similar configurations with a `tsconfig.json` in TypeScript projects, your mileage may vary.
## Supported Browsers
@@ -61,4 +86,4 @@ Please see our guide on [contributing](CONTRIBUTING.md) if you're interested in
- Need help? Find it on [Stack Overflow using the tag 'openlayers'](http://stackoverflow.com/questions/tagged/openlayers)
- Follow [@openlayers](https://twitter.com/openlayers) on Twitter
##### The `setCenter`, `setZoom`, `setResolution` and `setRotation` methods on `ol/View` do not bypass constraints anymore
Previously, these methods allowed setting values that were inconsistent with the given view constraints.
This is no longer the case and all changes to the view state now follow the same logic:
target values are provided and constraints are applied on these to determine the actual values to be used.
##### Removal of the `constrainResolution` option on `View.fit`, `PinchZoom`, `MouseWheelZoom` and `ol/interaction.js`
The `constrainResolution` option is now only supported by the `View` class. A `View.setConstrainResolution` method was added as well.
Generally, the responsibility of applying center/rotation/resolutions constraints was moved from interactions and controls to the `View` class.
##### The view `extent` option now applies to the whole viewport
Previously, this options only constrained the view *center*. This behaviour can still be obtained by specifying `constrainCenterOnly` in the view options.
As a side effect, the view `rotate` method is gone and has been replaced with `adjustRotation` which takes a delta as input.
##### The view is constrained so only one world is visible
Previously, maps showed multiple worlds at low zoom levels. In addition, it used to be possible to pan off the north or south edge of the world. Now, the view is restricted to show only one world, and you cannot pan off the edge. To get the previous behavior, configure the `ol/View` with `multiWorld: true`.
##### Removal of deprecated methods
The `inherits` function that was used to inherit the prototype methods from one constructor into another has been removed.
The standard ECMAScript classes should be used instead.
The deprecated `getSnapToPixel` and `setSnapToPixel` functions from the `ImageStyle` class have been removed.
##### New internal tile coordinates
Previously, the internal tile coordinates used in the library had an unusual row order – the origin of the tile coordinate system was at the top left as expected, but the rows increased upwards. This meant that all tile coordinates within a tile grid's extent had negative `y` values.
Now, the internal tile coordinates used in the library have the same row order as standard (e.g. XYZ) tile coordinates. The origin is at the top left (as before), and rows or `y` values increase downward. So the top left tile of a tile grid is now `0, 0`, whereas it was `0, -1` before.
```
x, y values for tile coordinates
origin
*__________________________
| | | |
| 0, 0 | 1, 0 | 2, 0 |
|________|________|________|
| | | |
| 0, 1 | 1, 1 | 2, 1 |
|________|________|________|
| | | |
| 0, 2 | 1, 2 | 2, 2 |
|________|________|________|
```
This change should only affect you if you were using a custom `tileLoadFunction` or `tileUrlFunction`. For example, if you used to have a `tileUrlFunction` that looked like this:
```js
// before
functiontileUrlFunction(tileCoord){
constz=tileCoord[0];
constx=tileCoord[1];
consty=-tileCoord[2]-1;
// do something with z, x, y
}
```
You would now do something like this:
```js
// after
functiontileUrlFunction(tileCoord){
constz=tileCoord[0];
constx=tileCoord[1];
consty=tileCoord[2];
// do something with z, x, y
}
```
In addition (this should be exceedingly rare), if you previously created a `ol/tilegrid/WMTS` by hand and you were providing an array of `sizes`, you no longer have to provide a negative height if your tile origin is the top-left corner (the common case). On the other hand, if you are providing a custom array of `sizes` and your origin is the bottom of the grid (this is uncommon), your height values must now be negative.
##### Removal of the "vector" render mode for vector tile layers
If you were previously using `VectorTile` layers with `renderMode: 'vector'`, you have to remove this configuration option. That mode was removed. `'hybrid'` (default) and `'image'` are still available.
##### Removal of the "renderMode" option for vector layers
If you were previously using `Vector` layers with `renderMode: 'image'`, you have to remove this configuration option. Instead, use the new `ol/layer/VectorImage` layer with your `ol/source/Vector`.
##### New declutter behavior
If a map has more than one layer with `declutter` set to true, decluttering now considers all `Vector` and `VectorTile` layers, instead of decluttering each layer separately. Only `VectorImage` layers continue to be decluttered separately. The higher the z-index of a layer, the higher the priority of its decluttered items.
Within a layer, the declutter order has changed. Previously, styles with a lower `zIndex` were prioritized over those with a higher `zIndex`. Now the opposite order is used.
On vector layers, even if decluttered images or texts have a lower z-Index than polygons or lines, they will now be rendered on top of the polygons or lines. For vector tile layers, this was the case already in previous releases.
##### New `prerender` and `postrender` layer events replace old `precompose`, `render` and `postcompose` events
If you were previously registering for `precompose` and `postcompose` events, you should now register for `prerender` and `postrender` events on layers. Instead of the previous `render` event, you should now listen for `postrender`. Layers are no longer composed to a single Canvas element. Instead, they are added to the map viewport as individual elements.
##### New `getVectorContext` function provides access to the immediate vector rendering API
Previously, render events included a `vectorContext` property that allowed you to render features or geometries directly to the map. This is still possible, but you now have to explicitly create a vector context with the `getVectorContext` function. This change makes the immediate rendering API an explicit dependency if your application uses it. If you don't use this API, your application bundle will not include the vector rendering modules (as it did before).
Here is an abbreviated example of how to use the `getVectorContext` function:
```js
import{getVectorContext}from'ol/render';
// construct your map and layers as usual
layer.on('postrender',function(event){
constvectorContext=getVectorContext(event);
// use any of the drawing methods on the vector context
});
```
##### Layers can only be added to a single map
Previously, it was possible to render a single layer in two maps. Now, each layer can only belong to a single map (in the same way that a single DOM element can only have one parent).
##### The `OverviewMap` requires a list of layers.
Due to the constraint above (layers can only be added to a single map), the overview map needs to be constructed with a list of layers.
##### The `ol/Graticule` has been replaced by `ol/layer/Graticule`
Previously, a graticule was not a layer. Now it is. See the graticule example for details on how to add a graticule layer to your map.
##### `ol/format/Feature` API change
The `getLastExtent()` method, which was required for custom `tileLoadFunction`s in `ol/source/Vector`, has been removed because it is no longer needed (see below).
##### `ol/VectorTile` API changes
* Removal of the `getProjection()` and `setProjection()` methods. These were used in custom `tileLoadFunction`s on `ol/source/VectorTile`, which work differently now (see below).
* Removal of the `getExtent()` and `setExtent()` methods. These were used in custom `tileLoadFunction`s on `ol/source/VectorTile`, which work differently now (see below).
##### Custom tileLoadFunction on a VectorTile source needs changes
Previously, applications needed to call `setProjection()` and `setExtent()` on the tile in a custom `tileLoadFunction` on `ol/source/VectorTile`. The format's `getLastExtent()` method was used to get the extent. All this is no longer needed. Instead, the `extent` (first argument to the loader function) and `projection` (third argument to the loader function) are simply passed as `extent` and `featureProjection` options to the format's `readFeatures()` method.
Example for an old `tileLoadFunction`:
```js
function(tile,url){
tile.setLoader(function(){
fetch(url).then(function(response){
response.arrayBuffer().then(function(data){
varformat=tile.getFormat();
tile.setProjection(format.readProjection(data));
tile.setFeatures(format.readFeatures(data,{
// featureProjection is not required for ol/format/MVT
##### Drop of support for the experimental WebGL renderer
The WebGL map and layers renderers are gone, replaced by a `WebGLHelper` function that provides a lightweight,
low-level access to the WebGL API. This is implemented in a new `WebGLPointsLayer` which does simple rendering of large number
of points with custom shaders.
This is now used in the `Heatmap` layer.
The removed classes and components are:
*`WebGLMap` and `WebGLMapRenderer`
*`WebGLLayerRenderer`
*`WebGLImageLayer` and `WebGLImageLayerRenderer`
*`WebGLTileLayer` and `WebGLTileLayerRenderer`
*`WebGLVectorLayer` and `WebGLVectorLayerRenderer`
*`WebGLReplay` and derived classes, along with associated shaders
*`WebGLReplayGroup`
*`WebGLImmediateRenderer`
*`WebGLMap`
* The shader build process using `mustache` and the `Makefile` at the root
##### Removal of the AtlasManager
Following the removal of the experimental WebGL renderer, the AtlasManager has been removed as well. The atlas was only used by this renderer.
The non API `getChecksum` functions of the style is also removed.
##### Change of the behavior of the vector source's clear() and refresh() methods
The `ol/source/Vector#clear()` method no longer triggers a reload of the data from the server. If you were previously using `clear()` to refetch from the server, you now have to use `refresh()`.
The `ol/source/Vector#refresh()` method now removes all features from the source and triggers a reload of the data from the server. If you were previously using the `refresh()` method to re-render a vector layer, you should instead call `ol/layer/Vector#changed()`.
#### Other changes
##### Allow declutter in image render mode
It is now possible to configure vector tile layers with `declutter: true` and `renderMode: 'image'`. However, note that decluttering will be done per tile, resulting in labels and point symbols getting cut off at tile boundaries.
Until now, using both options forced the render mode to be `hybrid`.
##### Always load tiles while animating or interacting
`ol/PluggableMap` and subclasses no longer support the `loadTilesWhileAnimating` and `loadTilesWhileInteracting` options. These options were used to enable tile loading during animations and interactions. With the new DOM composition render strategy, it is no longer necessary to postpone tile loading until after animations or interactions.
### v5.3.0
#### The `getUid` function returns string
The `getUid` function from the `ol/util` module now returns a string instead of a number.
#### Attributions are not collapsible for `ol/source/OSM`
When a map contains a layer from a `ol/source/OSM` source, the `ol/control/Attribution` control will be shown with the `collapsible: false` behavior.
To get the previous behavior, configure the `ol/control/Attribution` control with `collapsible: true`.
### v5.2.0
#### Removal of the `snapToPixel` option for `ol/style/Image` subclasses
The `snapToPixel` option has been removed, and the `getSnapToPixel` and `setSnapToPixel` methods are deprecated.
The renderer now snaps to integer pixels when no interaction or animation is running to get crisp rendering. During interaction or animation, it does not snap to integer pixels to avoid jitter.
When rendering with the Immediate API, symbols will no longer be snapped to integer pixels. To get crisp images, set `context.imageSmoothingEnabled = false` before rendering with the Immediate API, and `context.imageSmoothingEnabled = true` afterwards.
### v5.1.0
#### Geometry constructor and `setCoordinates` no longer accept `null` coordinates
Geometries (`ol/geom/*`) now need to be constructed with valid coordinates (center for `ol/geom/Circle`) as first constructor argument. The same applies to the `setCoordinates()` (`setCenter() for `ol/geom/Circle`) method.
Geometries (`ol/geom/*`) now need to be constructed with valid coordinates (center for `ol/geom/Circle`) as first constructor argument. The same applies to the `setCoordinates()` (`setCenter()` for `ol/geom/Circle`) method.
The 5.1.3 release is a patch to fix the API docs and the legacy full build. See the [5.1.0 notes](https://github.com/openlayers/openlayers/releases/tag/v5.1.0) for detail on the 5.1 release.
* [#8417](https://github.com/openlayers/openlayers/pull/8417) - Minor doc updates ([@tschaub](https://github.com/tschaub))
* [#8418](https://github.com/openlayers/openlayers/pull/8418) - Set api annotation on classdesc, not constructor ([@ahocevar](https://github.com/ahocevar))
The 5.2 release adds a few new features a handful of fixes, including regressions that were reported after the 5.1 release. You should be able to upgrade without any additional work. See the one note below regarding `snapToPixel` on `ol/style/Image` and subclasses.
We're still working toward type checking with TypeScript. Until that is complete, we apologize for some flwas in the online API documentation. We're excited about the improved experience for application developers when the effort is finished, and will highlight some of the benefit in upcoming releases.
### Upgrade Notes
#### Removal of the `snapToPixel` option for `ol/style/Image` subclasses
The `snapToPixel` option has been removed, and the `getSnapToPixel` and `setSnapToPixel` methods are deprecated.
The renderer now snaps to integer pixels when no interaction or animation is running to get crisp rendering. During interaction or animation, it does not snap to integer pixels to avoid jitter.
When rendering with the Immediate API, symbols will no longer be snapped to integer pixels. To get crisp images, set `context.imageSmoothingEnabled = false` before rendering with the Immediate API, and `context.imageSmoothingEnabled = true` afterwards.
### New Features and Fixes
* [#8511](https://github.com/openlayers/openlayers/pull/8511) - Update IGN API key ([@openlayers](https://github.com/openlayers))
* [#8547](https://github.com/openlayers/openlayers/pull/8547) - Fix port number in developing doc ([@pgiraud](https://github.com/pgiraud))
* [#8546](https://github.com/openlayers/openlayers/pull/8546) - Update projection FAQ for v5 ([@ahocevar](https://github.com/ahocevar))
* [#8481](https://github.com/openlayers/openlayers/pull/8481) - Expose some internal functions ([@gberaudo](https://github.com/gberaudo))
* [#8510](https://github.com/openlayers/openlayers/pull/8510) - Fix WMTS URLs with dimensions ([@gberaudo](https://github.com/gberaudo))
* [#8524](https://github.com/openlayers/openlayers/pull/8524) - Fix compatiblity with XHTML content type ([@NeoRaider](https://github.com/NeoRaider))
* [#8529](https://github.com/openlayers/openlayers/pull/8529) - Update link to base class in docs ([@TDesjardins](https://github.com/TDesjardins))
* [#8528](https://github.com/openlayers/openlayers/pull/8528) - Update link to base class in docs ([@TDesjardins](https://github.com/TDesjardins))
* [#8525](https://github.com/openlayers/openlayers/pull/8525) - Re-export Projection from ol/proj for convenience ([@tschaub](https://github.com/tschaub))
* [#8499](https://github.com/openlayers/openlayers/pull/8499) - Round center in viewState to pixels ([@ahocevar](https://github.com/ahocevar))
* [#8520](https://github.com/openlayers/openlayers/pull/8520) - Remove redundant if block ([@openlayers](https://github.com/openlayers))
* [#8515](https://github.com/openlayers/openlayers/pull/8515) - More convenient select and sketch layer management ([@ahocevar](https://github.com/ahocevar))
* [#8490](https://github.com/openlayers/openlayers/pull/8490) - WMTS getCapabilities readCoodinates more than one whitespace delimiter ([@MarquesDeAzevedo](https://github.com/MarquesDeAzevedo))
* [#8489](https://github.com/openlayers/openlayers/pull/8489) - Use .prototype. only where necessary ([@ahocevar](https://github.com/ahocevar))
* [#8478](https://github.com/openlayers/openlayers/pull/8478) - Check font availability with multiple font weights ([@ahocevar](https://github.com/ahocevar))
* [#8483](https://github.com/openlayers/openlayers/pull/8483) - Don't create Polygon with null coordinates ([@fredj](https://github.com/fredj))
* [#8471](https://github.com/openlayers/openlayers/pull/8471) - Add getUrl and getImageExtent to ImageStatic API ([@samuel-girard](https://github.com/samuel-girard))
* [#8470](https://github.com/openlayers/openlayers/pull/8470) - Update Tile loading API docs ([@scroach](https://github.com/scroach))
* [#8477](https://github.com/openlayers/openlayers/pull/8477) - Expose original getGutter ([@gberaudo](https://github.com/gberaudo))
* [#8466](https://github.com/openlayers/openlayers/pull/8466) - Add onFocusOnly option to interaction defaults ([@ahocevar](https://github.com/ahocevar))
* [#8465](https://github.com/openlayers/openlayers/pull/8465) - Do not prevent default on pointermove ([@ahocevar](https://github.com/ahocevar))
* [#8452](https://github.com/openlayers/openlayers/pull/8452) - Remove extra translate function in Geometry, add missing api tag ([@fredj](https://github.com/fredj))
* [#8450](https://github.com/openlayers/openlayers/pull/8450) - Mark properties of ReadOptions and WriteOptions as optional ([@fredj](https://github.com/fredj))
* [#8439](https://github.com/openlayers/openlayers/pull/8439) - Fewer dots in types ([@tschaub](https://github.com/tschaub))
* [#8441](https://github.com/openlayers/openlayers/pull/8441) - Fix loaded script for the example-verbatim examples ([@fredj](https://github.com/fredj))
* [#8435](https://github.com/openlayers/openlayers/pull/8435) - Call setCoordinates on the point instance ([@fredj](https://github.com/fredj))
* [#8428](https://github.com/openlayers/openlayers/pull/8428) - Type name on same line as type ([@tschaub](https://github.com/tschaub))
* [#8422](https://github.com/openlayers/openlayers/pull/8422) - Improve JSDoc such that `ng build --prod` with angular/cli 6.0.8 succeeds again ([@jkoelewijn](https://github.com/jkoelewijn))
* [#8417](https://github.com/openlayers/openlayers/pull/8417) - Minor doc updates ([@tschaub](https://github.com/tschaub))
* [#8418](https://github.com/openlayers/openlayers/pull/8418) - Set api annotation on classdesc, not constructor ([@ahocevar](https://github.com/ahocevar))
* [#8414](https://github.com/openlayers/openlayers/pull/8414) - Updates for 5.1.2 ([@tschaub](https://github.com/tschaub))
* [#8413](https://github.com/openlayers/openlayers/pull/8413) - Remove extra curly in type ([@tschaub](https://github.com/tschaub))
* [#8412](https://github.com/openlayers/openlayers/pull/8412) - Changes for 5.1.1. ([@tschaub](https://github.com/tschaub))
<details>
<summary>Dependency Updates</summary>
* [#8543](https://github.com/openlayers/openlayers/pull/8543) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8541](https://github.com/openlayers/openlayers/pull/8541) - Update proj4 to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8542](https://github.com/openlayers/openlayers/pull/8542) - Update rollup-plugin-commonjs to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8533](https://github.com/openlayers/openlayers/pull/8533) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8530](https://github.com/openlayers/openlayers/pull/8530) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8522](https://github.com/openlayers/openlayers/pull/8522) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8505](https://github.com/openlayers/openlayers/pull/8505) - Update karma to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8501](https://github.com/openlayers/openlayers/pull/8501) - Update rollup-plugin-commonjs to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8495](https://github.com/openlayers/openlayers/pull/8495) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8493](https://github.com/openlayers/openlayers/pull/8493) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8491](https://github.com/openlayers/openlayers/pull/8491) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8486](https://github.com/openlayers/openlayers/pull/8486) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8476](https://github.com/openlayers/openlayers/pull/8476) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8475](https://github.com/openlayers/openlayers/pull/8475) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8469](https://github.com/openlayers/openlayers/pull/8469) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8453](https://github.com/openlayers/openlayers/pull/8453) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8447](https://github.com/openlayers/openlayers/pull/8447) - Update rollup-plugin-commonjs to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8426](https://github.com/openlayers/openlayers/pull/8426) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
We're continuing to work toward more complete type checking with TypeScript –based on JSDoc annotations in the source. The 5.3 release includes a number of bug fixes related to the type checking effort. In addition the release comes with a handful of new features and improved API reference docs.
### Upgrade Notes
#### The `getUid` function returns string
The `getUid` function from the `ol/util` module now returns a string instead of a number.
#### Attributions are not collapsible for `ol/source/OSM`
When a map contains a layer from a `ol/source/OSM` source, the `ol/control/Attribution` control will be shown with the `collapsible: false` behavior.
To get the previous behavior, configure the `ol/control/Attribution` control with `collapsible: true`.
### New Features and Fixes
* [#8642](https://github.com/openlayers/openlayers/pull/8642) - Fixes for optional key passing, issue #8067 for tile sources ([@dimin](https://github.com/dimin))
* [#8885](https://github.com/openlayers/openlayers/pull/8885) - Move GeolocationProperty into Geolocation ([@fredj](https://github.com/fredj))
* [#8881](https://github.com/openlayers/openlayers/pull/8881) - Remove custom styles in drag-and-drop examples ([@fredj](https://github.com/fredj))
* [#8858](https://github.com/openlayers/openlayers/pull/8858) - Add condition for viewParams and TypeScript related option ([@webgeodatavore](https://github.com/webgeodatavore))
* [#8879](https://github.com/openlayers/openlayers/pull/8879) - Build with CircleCI ([@openlayers](https://github.com/openlayers))
* [#8862](https://github.com/openlayers/openlayers/pull/8862) - Legacy build and apidoc improvements ([@ahocevar](https://github.com/ahocevar))
* [#8867](https://github.com/openlayers/openlayers/pull/8867) - Fix example builder ([@ahocevar](https://github.com/ahocevar))
* [#8852](https://github.com/openlayers/openlayers/pull/8852) - Improve link handling in API docs ([@ahocevar](https://github.com/ahocevar))
* [#8853](https://github.com/openlayers/openlayers/pull/8853) - Make rendercomplete work with vector sources without loader ([@ahocevar](https://github.com/ahocevar))
* [#8851](https://github.com/openlayers/openlayers/pull/8851) - Use typescript types for RBush ([@fredj](https://github.com/fredj))
* [#8850](https://github.com/openlayers/openlayers/pull/8850) - Remove old TODO in ol/Graticule ([@fredj](https://github.com/fredj))
* [#8847](https://github.com/openlayers/openlayers/pull/8847) - Fix API docs ([@ahocevar](https://github.com/ahocevar))
* [#8845](https://github.com/openlayers/openlayers/pull/8845) - Remove RenderType enum from vector layer ([@tschaub](https://github.com/tschaub))
* [#8843](https://github.com/openlayers/openlayers/pull/8843) - Fix ts typing for fullscreen button ([@tonio](https://github.com/tonio))
* [#8841](https://github.com/openlayers/openlayers/pull/8841) - Use super.method instead of prototype.method.call ([@fredj](https://github.com/fredj))
* [#8842](https://github.com/openlayers/openlayers/pull/8842) - Change target type from Element to HTMLElement ([@fredj](https://github.com/fredj))
* [#8840](https://github.com/openlayers/openlayers/pull/8840) - Remove unneeded code in VectorTile renderer ([@elemoine](https://github.com/elemoine))
* [#8844](https://github.com/openlayers/openlayers/pull/8844) - Set crossOrigin to anonymous in mapbox-streets-v6-style ([@elemoine](https://github.com/elemoine))
* [#8776](https://github.com/openlayers/openlayers/pull/8776) - Use setTimeout without the window namespace ([@ahocevar](https://github.com/ahocevar))
* [#8837](https://github.com/openlayers/openlayers/pull/8837) - Re-export MousePosition from ol/control ([@fredj](https://github.com/fredj))
* [#8832](https://github.com/openlayers/openlayers/pull/8832) - Remove source foreachfeatureatcoordinate from ol/renderer/webgl/ImageLayer ([@fredj](https://github.com/fredj))
* [#8833](https://github.com/openlayers/openlayers/pull/8833) - Fix wrong filename in type annotation ([@fredj](https://github.com/fredj))
* [#8827](https://github.com/openlayers/openlayers/pull/8827) - Removed unused forEachFeatureAtCoordinate from ol/source/Source ([@schmidtk](https://github.com/schmidtk))
* [#8830](https://github.com/openlayers/openlayers/pull/8830) - Type annotation fixes in ol/control/ ([@fredj](https://github.com/fredj))
* [#8829](https://github.com/openlayers/openlayers/pull/8829) - Change getUid return type from number to string ([@fredj](https://github.com/fredj))
* [#8828](https://github.com/openlayers/openlayers/pull/8828) - Re-export VectorTile from ol/source ([@elemoine](https://github.com/elemoine))
* [#8806](https://github.com/openlayers/openlayers/pull/8806) - Preserve button class name list in full screen control on toggle ([@notnotse](https://github.com/notnotse))
* [#8817](https://github.com/openlayers/openlayers/pull/8817) - Clarify format option for ol/source/WMTS ([@romanzoller](https://github.com/romanzoller))
* [#8824](https://github.com/openlayers/openlayers/pull/8824) - Fix TypeScript errors in ol/format/GML ([@schmidtk](https://github.com/schmidtk))
* [#8519](https://github.com/openlayers/openlayers/pull/8519) - GML Format Improvements #8516#8517#8518 ([@NielsCharlier](https://github.com/NielsCharlier))
* [#8711](https://github.com/openlayers/openlayers/pull/8711) - Fix TypeScript errors in ol/format/GML ([@schmidtk](https://github.com/schmidtk))
* [#8818](https://github.com/openlayers/openlayers/pull/8818) - Fix the way zoom comes from ([@cs09g](https://github.com/cs09g))
* [#8804](https://github.com/openlayers/openlayers/pull/8804) - Add possibility to disable collapsible attributions from Source ([@notnotse](https://github.com/notnotse))
* [#8787](https://github.com/openlayers/openlayers/pull/8787) - Replace instanceof checks with other logic ([@ahocevar](https://github.com/ahocevar))
* [#8808](https://github.com/openlayers/openlayers/pull/8808) - Fix format and version properties in ol/source/WMTS Options typedef ([@fredj](https://github.com/fredj))
* [#8798](https://github.com/openlayers/openlayers/pull/8798) - Use unpkg.com instead of rawgit.com ([@fredj](https://github.com/fredj))
* [#8805](https://github.com/openlayers/openlayers/pull/8805) - Do not draw image with width or height < 0.5 ([@notnotse](https://github.com/notnotse))
* [#8803](https://github.com/openlayers/openlayers/pull/8803) - Handle zoom slider position with floating point numbers ([@notnotse](https://github.com/notnotse))
* [#8789](https://github.com/openlayers/openlayers/pull/8789) - Spelling and indentation fixes ([@fredj](https://github.com/fredj))
* [#8781](https://github.com/openlayers/openlayers/pull/8781) - Fix type check errors ([@schmidtk](https://github.com/schmidtk))
* [#8779](https://github.com/openlayers/openlayers/pull/8779) - Fix additional type check errors ([@schmidtk](https://github.com/schmidtk))
* [#8753](https://github.com/openlayers/openlayers/pull/8753) - Fix type check in ol/PluggableMap.js ([@wallw-bits](https://github.com/wallw-bits))
* [#8762](https://github.com/openlayers/openlayers/pull/8762) - Fix type errors from interaction event handlers ([@schmidtk](https://github.com/schmidtk))
* [#8763](https://github.com/openlayers/openlayers/pull/8763) - Fix type check for ol/events ([@wallw-bits](https://github.com/wallw-bits))
* [#8774](https://github.com/openlayers/openlayers/pull/8774) - Fix type check errors in ol/renderer/webgl ([@schmidtk](https://github.com/schmidtk))
* [#8768](https://github.com/openlayers/openlayers/pull/8768) - Fix type check errors in ol/interaction/Select ([@schmidtk](https://github.com/schmidtk))
* [#8764](https://github.com/openlayers/openlayers/pull/8764) - Fix TypeScript errors in ol/interaction/Draw ([@schmidtk](https://github.com/schmidtk))
* [#8767](https://github.com/openlayers/openlayers/pull/8767) - Fix type check errors in ol/interaction/Modify ([@schmidtk](https://github.com/schmidtk))
* [#8773](https://github.com/openlayers/openlayers/pull/8773) - Fix type check errors in ol/renderer/canvas ([@schmidtk](https://github.com/schmidtk))
* [#8769](https://github.com/openlayers/openlayers/pull/8769) - Fix type check errors in ol/render/canvas ([@schmidtk](https://github.com/schmidtk))
* [#8770](https://github.com/openlayers/openlayers/pull/8770) - Fix type check errors in ol/render/webgl ([@schmidtk](https://github.com/schmidtk))
* [#8744](https://github.com/openlayers/openlayers/pull/8744) - Fix type checks in VectorTileSource ([@wallw-bits](https://github.com/wallw-bits))
* [#8740](https://github.com/openlayers/openlayers/pull/8740) - Increase linestring textalign test tolerance to be Firefox compliant. ([@benVigie](https://github.com/benVigie))
* [#8738](https://github.com/openlayers/openlayers/pull/8738) - Cast to parent type to fix TS errors ([@schmidtk](https://github.com/schmidtk))
* [#8737](https://github.com/openlayers/openlayers/pull/8737) - Flag optional param to fix TS error ([@schmidtk](https://github.com/schmidtk))
* [#8742](https://github.com/openlayers/openlayers/pull/8742) - Fix type checks in Vector source ([@wallw-bits](https://github.com/wallw-bits))
* [#8743](https://github.com/openlayers/openlayers/pull/8743) - Fix type check in Raster source ([@wallw-bits](https://github.com/wallw-bits))
* [#8733](https://github.com/openlayers/openlayers/pull/8733) - Fix TypeScript errors in ol/format/WFS ([@schmidtk](https://github.com/schmidtk))
* [#8735](https://github.com/openlayers/openlayers/pull/8735) - Fix TypeScript errors in ol/format/WKT ([@schmidtk](https://github.com/schmidtk))
* [#8730](https://github.com/openlayers/openlayers/pull/8730) - Fix TypeScript errors in ol/format/KML ([@schmidtk](https://github.com/schmidtk))
* [#8732](https://github.com/openlayers/openlayers/pull/8732) - Fix type check in ol/source/Tile ([@wallw-bits](https://github.com/wallw-bits))
* [#8731](https://github.com/openlayers/openlayers/pull/8731) - Dispatch a GeolocationError in Geolocation ([@fredj](https://github.com/fredj))
* [#8729](https://github.com/openlayers/openlayers/pull/8729) - Move functions out of the PointerEvent class ([@fredj](https://github.com/fredj))
* [#8717](https://github.com/openlayers/openlayers/pull/8717) - Fix type checks in TileArcGISRest ([@fredj](https://github.com/fredj))
* [#8718](https://github.com/openlayers/openlayers/pull/8718) - Fix TypeScript errors in ol/format/GPX ([@schmidtk](https://github.com/schmidtk))
* [#8706](https://github.com/openlayers/openlayers/pull/8706) - Use EsriJSON types from @types/arcgis-rest-api ([@schmidtk](https://github.com/schmidtk))
* [#8709](https://github.com/openlayers/openlayers/pull/8709) - Fix TypeScript errors in ol/format/GeoJSON ([@schmidtk](https://github.com/schmidtk))
* [#8708](https://github.com/openlayers/openlayers/pull/8708) - Fix type checks in ImageCanvas source ([@wallw-bits](https://github.com/wallw-bits))
* [#8710](https://github.com/openlayers/openlayers/pull/8710) - Fix type checks in ImageArcGISRest ([@wallw-bits](https://github.com/wallw-bits))
* [#8697](https://github.com/openlayers/openlayers/pull/8697) - Remove unused properties from Cluster and Image options ([@fredj](https://github.com/fredj))
* [#8688](https://github.com/openlayers/openlayers/pull/8688) - Fix PointerEventHandler event type ([@fredj](https://github.com/fredj))
* [#8686](https://github.com/openlayers/openlayers/pull/8686) - Remove extra imports in jsdoc ([@fredj](https://github.com/fredj))
* [#8681](https://github.com/openlayers/openlayers/pull/8681) - Check the type of the source before using it ([@wallw-bits](https://github.com/wallw-bits))
* [#8692](https://github.com/openlayers/openlayers/pull/8692) - Type check fixes for Cluster source ([@wallw-bits](https://github.com/wallw-bits))
* [#8677](https://github.com/openlayers/openlayers/pull/8677) - Type check fixes for VectorSource ([@wallw-bits](https://github.com/wallw-bits))
* [#8684](https://github.com/openlayers/openlayers/pull/8684) - Define BingMapsImageryMetadataResponse type ([@wallw-bits](https://github.com/wallw-bits))
* [#8690](https://github.com/openlayers/openlayers/pull/8690) - Fix type checks in CartoDB ([@wallw-bits](https://github.com/wallw-bits))
* [#8693](https://github.com/openlayers/openlayers/pull/8693) - Fix type check errors for Image source ([@wallw-bits](https://github.com/wallw-bits))
* [#8672](https://github.com/openlayers/openlayers/pull/8672) - Fix source type in Raster source ([@fredj](https://github.com/fredj))
* [#8665](https://github.com/openlayers/openlayers/pull/8665) - Fix type check errors in RBush ([@wallw-bits](https://github.com/wallw-bits))
* [#8680](https://github.com/openlayers/openlayers/pull/8680) - TypeScript fixes for ol/events ([@schmidtk](https://github.com/schmidtk))
* [#8678](https://github.com/openlayers/openlayers/pull/8678) - Ensure image is Image or Video before settings src ([@wallw-bits](https://github.com/wallw-bits))
* [#8676](https://github.com/openlayers/openlayers/pull/8676) - Cast tileGrid to WMTSTileGrid for type check ([@wallw-bits](https://github.com/wallw-bits))
* [#8679](https://github.com/openlayers/openlayers/pull/8679) - Type check fixes in Triangulation ([@wallw-bits](https://github.com/wallw-bits))
* [#8638](https://github.com/openlayers/openlayers/pull/8638) - Fix event type in hasListener check ([@ahocevar](https://github.com/ahocevar))
* [#8618](https://github.com/openlayers/openlayers/pull/8618) - Use TopoJSON types from @types/topojson ([@fredj](https://github.com/fredj))
* [#8619](https://github.com/openlayers/openlayers/pull/8619) - Remove wrong Geometry type in KML format ([@fredj](https://github.com/fredj))
* [#8627](https://github.com/openlayers/openlayers/pull/8627) - Fix several type imports ([@ahocevar](https://github.com/ahocevar))
* [#8629](https://github.com/openlayers/openlayers/pull/8629) - Enable circle primitive in draw-shapes example ([@megawac](https://github.com/megawac))
* [#8626](https://github.com/openlayers/openlayers/pull/8626) - Better type annotations / type casts ([@marcjansen](https://github.com/marcjansen))
* [#8610](https://github.com/openlayers/openlayers/pull/8610) - Sensible touch behavior of the MousePosition control ([@ahocevar](https://github.com/ahocevar))
* [#8607](https://github.com/openlayers/openlayers/pull/8607) - Listener return is boolean or void ([@tschaub](https://github.com/tschaub))
* [#8595](https://github.com/openlayers/openlayers/pull/8595) - Optional arguments and typedef properties ([@tschaub](https://github.com/tschaub))
* [#8594](https://github.com/openlayers/openlayers/pull/8594) - Remove extra imports in jsdoc ([@fredj](https://github.com/fredj))
* [#8596](https://github.com/openlayers/openlayers/pull/8596) - Add types for the UTFGrid and TileJSON JSON responses ([@tschaub](https://github.com/tschaub))
* [#8591](https://github.com/openlayers/openlayers/pull/8591) - Add missing properties in TextState typedef ([@fredj](https://github.com/fredj))
* [#8569](https://github.com/openlayers/openlayers/pull/8569) - Make proj~get simpler and faster ([@ahocevar](https://github.com/ahocevar))
* [#8567](https://github.com/openlayers/openlayers/pull/8567) - Use 'Element' type instead of 'Node' ([@fredj](https://github.com/fredj))
* [#8558](https://github.com/openlayers/openlayers/pull/8558) - Fix default zIndex value and documentation for layer options ([@fredj](https://github.com/fredj))
* [#8555](https://github.com/openlayers/openlayers/pull/8555) - Do not minify examples that inject code into workers ([@ahocevar](https://github.com/ahocevar))
* [#8557](https://github.com/openlayers/openlayers/pull/8557) - Fix typo in release notes ([@ahocevar](https://github.com/ahocevar))
<details>
<summary>Dependency Updates</summary>
* [#8884](https://github.com/openlayers/openlayers/pull/8884) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8880](https://github.com/openlayers/openlayers/pull/8880) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8872](https://github.com/openlayers/openlayers/pull/8872) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8860](https://github.com/openlayers/openlayers/pull/8860) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8855](https://github.com/openlayers/openlayers/pull/8855) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8838](https://github.com/openlayers/openlayers/pull/8838) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8834](https://github.com/openlayers/openlayers/pull/8834) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8799](https://github.com/openlayers/openlayers/pull/8799) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8796](https://github.com/openlayers/openlayers/pull/8796) - Update rollup-plugin-commonjs to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8793](https://github.com/openlayers/openlayers/pull/8793) - Update rollup-plugin-buble to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8794](https://github.com/openlayers/openlayers/pull/8794) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8788](https://github.com/openlayers/openlayers/pull/8788) - Update front-matter to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8785](https://github.com/openlayers/openlayers/pull/8785) - chore(package): update rollup to version 0.66.4 ([@openlayers](https://github.com/openlayers))
* [#8719](https://github.com/openlayers/openlayers/pull/8719) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8714](https://github.com/openlayers/openlayers/pull/8714) - chore(package): update webpack to version 4.20.2 ([@openlayers](https://github.com/openlayers))
* [#8703](https://github.com/openlayers/openlayers/pull/8703) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8646](https://github.com/openlayers/openlayers/pull/8646) - Update mustache to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8645](https://github.com/openlayers/openlayers/pull/8645) - Update rollup-plugin-uglify to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8685](https://github.com/openlayers/openlayers/pull/8685) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8683](https://github.com/openlayers/openlayers/pull/8683) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8656](https://github.com/openlayers/openlayers/pull/8656) - chore(package): update rollup-plugin-commonjs to version 9.1.8 ([@openlayers](https://github.com/openlayers))
* [#8667](https://github.com/openlayers/openlayers/pull/8667) - chore(package): update uglifyjs-webpack-plugin to version 2.0.1 ([@openlayers](https://github.com/openlayers))
* [#8661](https://github.com/openlayers/openlayers/pull/8661) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8644](https://github.com/openlayers/openlayers/pull/8644) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8631](https://github.com/openlayers/openlayers/pull/8631) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8630](https://github.com/openlayers/openlayers/pull/8630) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8617](https://github.com/openlayers/openlayers/pull/8617) - chore(package): update webpack to version 4.18.0 ([@openlayers](https://github.com/openlayers))
* [#8589](https://github.com/openlayers/openlayers/pull/8589) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8581](https://github.com/openlayers/openlayers/pull/8581) - Update rollup-plugin-node-resolve to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8585](https://github.com/openlayers/openlayers/pull/8585) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8578](https://github.com/openlayers/openlayers/pull/8578) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8563](https://github.com/openlayers/openlayers/pull/8563) - Update rollup-plugin-uglify to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
* [#8561](https://github.com/openlayers/openlayers/pull/8561) - Update rollup-plugin-uglify to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
<td><p>A [map](module-ol_Map-Map.html) is made of [layers](module-ol_layer_Base-BaseLayer.html), a [view](module-ol_View-View.html) to visualize them, [interactions](module-ol_interaction_Interaction-Interaction.html) to modify map content and [controls](module-ol_control_Control-Control.html) with UI components.</p>
<td><p>A <a href="module-ol_Map-Map.html">map</a> is made of <a href="module-ol_layer_Base-BaseLayer.html">layers</a>, a <a href="module-ol_View-View.html">view</a> to visualize them, <a href="module-ol_interaction_Interaction-Interaction.html">interactions</a> to modify map content and <a href="module-ol_control_Control-Control.html">controls</a> with UI components.</p>
<tr><td><p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform, use [proj.transform()](module-ol_proj.html#.transform) and [proj.transformExtent()](module-ol_proj.html#.transformExtent).</p>
[ol/proj](module-ol_proj.html)</td>
<td><p>Changes to all [ol/Object](module-ol_Object-BaseObject.html)s can be observed by calling the [object.on('propertychange')](module-ol_Object-BaseObject.html#on) method. Listeners receive an [ol/Object~ObjectEvent](module-ol_Object-ObjectEvent.html) with information on the changed property and old value.</p>
<tr><td><p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform, use <a href="module-ol_proj.html#.transform">ol/proj#transform()</a> and <a href="module-ol_proj.html#.transformExtent">ol/proj#transformExtent()</a>.</p>
<a href="module-ol_proj.html">ol/proj</a></td>
<td><p>Changes to all <a href="module-ol_Object-BaseObject.html">ol/Object</a>s can be observed by calling the <a href="module-ol_Object-BaseObject.html#on">object.on('propertychange')</a> method. Listeners receive an <a href="module-ol_Object-ObjectEvent.html">ol/Object.ObjectEvent</a> with information on the changed property and old value.</p>
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
// "typeRoots": [], /* List of folders to include type definitions from. */
// "types": [], /* Type declaration files to be included in compilation. */
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
console.log("Count right after construction: "+numFeatures);
```
@@ -285,9 +323,9 @@ been populated with features), you should use an event listener function on the
```javascript
vector.getSource().on('change',function(evt){
varsource=evt.target;
constsource=evt.target;
if(source.getState()==='ready'){
varnumFeatures=source.getFeatures().length;
constnumFeatures=source.getFeatures().length;
console.log("Count after change: "+numFeatures);
}
});
@@ -316,19 +354,47 @@ map.renderSync();
## Why are my features not found?
You are using `ol.Map#forEachFeatureAtPixel` or `ol.Map#hasFeatureAtPixel`, but
You are using `Map#forEachFeatureAtPixel` or `Map#hasFeatureAtPixel`, but
it sometimes does not work for large icons or labels? The *hit detection* only
checks features that are within a certain distance of the given position. For large
icons, the actual geometry of a feature might be too far away and is not considered.
In this case, set the `renderBuffer` property of `ol.layer.Vector` (the default
value is 100px):
In this case, set the `renderBuffer` property of `VectorLayer` (the default value is 100px):
```javascript
varvectorLayer=newol.layer.Vector({
importVectorLayerfrom'ol/layer/Vector';
constvectorLayer=newVectorLayer({
...
renderBuffer:200
});
```
The recommended value is the size of the largest symbol, line width or label.
## Why is zooming or clicking in the map off/inaccurate?
OpenLayers does not update the map when the container element is resized. This can be caused by progressive updates
to CSS styles or manually resizing the map. When that happens, any interaction will become inaccurate: the map would zoom in and out, and end up not being centered on the pointer. This makes it hard to do certain interactions, e.g. selecting the desired feature.
There is currently no built-in way to react to element's size changes, as [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) is only implemented in Chrome.
There is however an easy to use [polyfill](https://github.com/que-etc/resize-observer-polyfill):
The 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.
@@ -130,7 +130,7 @@ The `layers: [ ... ]` array is used to define the list of layers available in th
]
```
Layers 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)
Layers 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.
The 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.
@@ -17,7 +17,7 @@ OpenLayers is available as [`ol` npm package](https://npmjs.com/package/ol), whi
## Renderers and Browser Support
By default, OpenLayers uses a performance optimized Canvas renderer. An experimental WebGL renderer (without text rendering support) is also avaialble.
By default, OpenLayers uses a performance optimized Canvas renderer.
OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](http://www.ecma-international.org/ecma-262/5.1/). This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, [polyfills](http://polyfill.io), the application bundle needs to be transpiled (e.g. using [Babel](https://babeljs.io)) and bundled with polyfills for `requestAnimationFrame`, `Element.prototype.classList` and `URL`.
@@ -44,6 +44,6 @@ import {Tile, Vector} from 'ol/layer';
In addition to these re-exported classes, modules with lowercase names also provide constants or functions as named exports:
@@ -11,9 +11,11 @@ In this tutorial, we will be using [Parcel](https://parceljs.org) to bundle our
## Initial steps
Create a new empty directory for your project and navigate to it by running `mkdir new-project && cd new-project`. Initialize your project using `npm init` and answer the questions asked.
Create a new empty directory for your project and navigate to it by running `mkdir new-project && cd new-project`. Initialize your project with
Add OpenLayers as dependency to your application with
npm init
This will create a `package.json` file in your working directory. Add OpenLayers as dependency to your application with
npm install ol
@@ -45,7 +47,7 @@ const map = new Map({
});
```
You will also need an `ìndex.html` file that will use your bundle. Here is a simple example:
You will also need an `index.html` file that will use your bundle. Here is a simple example:
```html
<!DOCTYPE html>
@@ -69,13 +71,21 @@ You will also need an `ìndex.html` file that will use your bundle. Here is a si
## Creating a bundle
With simple scripts you can introduce the commands `npm run build` and `npm start` to manually build your bundle and watch for changes, respectively. Add the following to the script section in `package.json`:
With two additional lines in `package.json` you can introduce the commands `npm run build` and `npm start` to manually build your bundle and watch for changes, respectively. The final `package.json` with the two additional commands `"start"` and `"build"` should look like this:
```json
"scripts":{
{
"name":"test",
"version":"1.0.0",
"description":"",
"main":"index.js",
"scripts":{
"test":"echo \"Error: no test specified\" && exit 1",
The core component of OpenLayers is the map (`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()`.
The markup below could be used to create a `<div>` that contains your map.
The script below constructs a map that is rendered in the `<div>` above, using the `map` id of the element as a selector.
```js
import Map from 'ol/Map';
var map = new Map({target: 'map'});
```
## View
`Map` is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of a `View` instance.
The map is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of a `ol/View` instance.
```js
import View from 'ol/View';
import View from 'ol/View';
map.setView(new View({
map.setView(new View({
center: [0, 0],
zoom: 2
}));
}));
```
A `View` 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.
@@ -35,54 +42,49 @@ The `zoom` option is a convenient way to specify the map resolution. The availab
## Source
To get remote data for a layer, OpenLayers uses `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
import OSM from 'ol/source/OSM';
import OSM from 'ol/source/OSM';
var osmSource = OSM();
var osmSource = OSM();
```
## Layer
A layer is a visual representation of data from a `source`. OpenLayers has four basic types of layers: `layer/Tile`, `layer/Image`, `layer/Vector` and `layer/VectorTile`.
`layer/Tile` is for layer sources that provide pre-rendered, tiled images in grids that are organized by zoom levels for specific resolutions.
A layer is a visual representation of data from a `source`. OpenLayers has four basic types of layers:
`layer/Image` is for server rendered images that are available for arbitrary extents and resolutions.
`layer/Vector` is for vector data that is rendered client-side.
`layer/VectorTile` is for tiled vector data that is rendered client-side.
* `ol/layer/Tile` - Renders sources that provide tiled images in grids that are organized by zoom levels for specific resolutions.
* `ol/layer/Image` - Renders sources that provide map images at arbitrary extents and resolutions.
* `ol/layer/Vector` - Renders vector data client-side.
* `ol/layer/VectorTile` - Renders data that is provided as vector tiles.
```js
import TileLayer from 'ol/layer/Tile';
import TileLayer from 'ol/layer/Tile';
var osmLayer = new TileLayer({source: osmSource});
map.addLayer(osmLayer);
var osmLayer = new TileLayer({source: osmSource});
map.addLayer(osmLayer);
```
## Putting it all together
The above snippets can be combined into a single script that renders a map with a single tile layer:
The above snippets can be conflated to a self contained map configuration with view and layers:
shortdesc: Example of using OpenLayers and d3 together.
docs: >
<p>The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a canvas element that is then used as the image of an OpenLayers image layer.</p>
The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a SVG element.
shortdesc: Example of using the drag-and-drop interaction with image vector rendering.
docs: >
Example of using the drag-and-drop interaction with an `ol/layer/Vector` with `renderMode: 'image'``. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
Example of using the drag-and-drop interaction with an `ol/layer/VectorImage` layer. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
shortdesc: Example of a view with a constrained extent.
docs: >
This map has a view that is constrained in an extent. This is done using the `extent` view option. Please note that specifying `constrainOnlyCenter: true` would only apply the extent restriction to the view center.
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
