viglino/ol-ext

Cool extensions for Openlayers (ol) - animated clusters, CSS popup, Font Awesome symbol renderer, charts for statistical map (pie/bar), layer switcher, wikipedia layer, animations, canvas filters.

ol-ext

Cool extensions for OpenLayers (ol).

ol-ext is a set of extensions, controls, interactions, popup to use with Openlayers.
View live examples online or the API documentation.

Typescript declarations by @Siedlerchr.

Keywords: Storymap, Timeline control, CSS popup, Font Awesome symbols, charts for statistical map (pie/bar), layer switcher, control bar, wikipedia layer, legend control, search, animations, undo/redo mechanisms

Getting Started

NPM packages

ol-ext exists as ES6 modules (ol-ext) and as pure js (deprecated! openlayers-ext).

using ol-ext in a webpack

• For use with webpack, Rollup, Browserify, or other module bundlers, install the npm ol-ext package and link to the node_modules directory:

npm install ol-ext

Then in your js file you can import the classes as follow:

import "ol/ol.css"
import "ol-ext/dist/ol-ext.css"

import LayerSwitcher from "ol-ext/control/LayerSwitcher"

See the following examples for more detail on bundling ol-ext with your application:

• Using webpack
• Using parcel
• Using angular

Typescript declarations are avaliable at Siedlerchr/types-ol-ext.

npm i -D @types/ol-ext@npm:@siedlerchr/types-ol-ext

using ol-ext in a web page

• For use in a web page install the npm openlayers-ext package (deprecated):

npm install openlayers-ext

The library will be available in the node_modules/openlayers-ext/dist directory. You can find individual files in the node_modules/openlayers-ext/lib directory.

• You can download the scripts of the ./dist directory of the repository in your project and insert the .js and .css in your page.
• If you just want to add a <script> tag to test things out, you can link directly to the builds from the github rawgit (not recommended in production).
• For compatibility with older browsers and platforms (like Internet Explorer down to version 9 and Android 4.x), the OpenLayers needs to be transpiled (e.g. using Babel) and bundled with polyfills for requestAnimationFrame, Element.prototype.classList, Object.assignand URL.

<!-- Openlayers -->
<link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>

<!-- ol-ext -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.min.css" />
<script type="text/javascript" src="https://cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.min.js"></script>

supported Browsers

ol-ext runs on all modern browsers that support HTML5 and ECMAScript 5. This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, polyfills for for requestAnimationFrame, Element.prototype.classList, Object.assignand URL.

Documentation

Check out the hosted examples or the API documentation.

Contributing

Please see our contributing guidelines if you're interested in getting involved.

• see all contributors

Bugs

Please use the GitHub issue tracker for all bugs and feature requests. Before creating a new issue, do a quick search to see if the problem has been reported already.

License

ol-ext is licensed under the French Opensource BSD compatible CeCILL-B FREE SOFTWARE LICENSE.
(c) 2016-20 - Jean-Marc Viglino

Some resources (mapping services and API) used in this sofware may have a specific license.
You must check before use.

Full text license in English
Full text license in French

For convenience you can use the BSD licence instead when publish content to webpack.

ol-ext's Issues

how to keep transform always active

Hi, I found an issue #34 which tells how to activate the transform by default, but how you would keep it active all the time?
If I click besides the feature it looses the transforminteraction. I would like too keep it all the time active. Is there an option I can set to achieve that?

thx

How to use with angular 2+?

Update box (control) using code, not drawing over map

Hello again,

I need to update the feature box using code. There is a way to pass new bbox coordinates (calculated by external function) to the feature and redraw it?

Thank's in advance.

change 'canvasScaleLine' position

I want to modify the default behaviour of canvasScaleLine to place it in the bottom-right corner.
Looking at the source code there's no property provided for aligning it.
If I'm not wrong the parts of the code that handles the position are:

var container = $(this.getMap().getViewport()).parent();
var scx = container.outerWidth() / container.get(0).getBoundingClientRect().width;
var scy = container.outerHeight() / container.get(0).getBoundingClientRect().height;
position.left *= scx;
position.top *= scy;

But i'm not able to place it in the right place.
Is there a way to manage this?
Thanks in advance and thank you for your work!!

ol.control.Bar.setMap(map) : error when map is null

Hi,
I'm using ol-ext, it is a awesome library :)

But I have an issue : Null map is not managed in ol.control.Bar.setMap(map)
=> map.addControl(c); is called for sub-controls (buttons)

Note that setMap(null) is called automatically by ol3 when we call map.removeControl(myToolBar)
So this case should be managed in the toolbar code.

Could be fixed calling c.setMap(map) instead of map.addControl(c).
But setMap(null) should be also managed on other Control as Toggle and Button.

In the same idea, setMap could be used to change Map, it should be better to unregister from old Map if any (remove interaction)...

Good luck,
Nicolas

different styling ol.layer.Group and ol.layers in layerswitchercontrol

It would be nice to have different classes that allow a separate styling and display (e.g. layerswitcher-opacity) of layer-groups and layers.

controlbar.js: 3 issues with nested control bars

Bonjour Jean-Marc,

Thanks for the new example in map.control.bar.html. Much appreciated.

In further exploring the the nesting of control bars, I came across some unexpected results:

1. In a nested control bar, the background color of a control button within it does not change when the control is activated. This makes it hard to know at a glance which control in the nested control bar is active. Is there a way to fix this? Or am I using it wrong?

2. I discovered a couple of interesting things about a 3rd-level control bar (i.e., a control bar nested below a nested control bar):
   a) When the top-level parent control is activated, both the 2nd-level and 3rd-level control bars are made visible at the same time. I had expected that only the 2nd-level control bar would be visible until the appropriate parent control in the 2nd-level control bar was activated.
   b) A consequence of the above is that it is possible for a control within a 3rd-level control bar to be activated even though its 2nd-level parent control is not active, which is counter-intuitive and may not be a practical use-case.

I am not currently using a 3rd-level control bar other than for testing purposes, but is this something that can be fixed so that only the 2nd-level control bar is made visible until an appropriate 2nd-level control is activated?

Merci beaucoup.

Dennis

WMS layer with slider control.

I have three wms layers,i want to display these three layers in map view one by one with time slider controller.I want to control these layers display on slider,so when my pointer at a starting point of slider it will show first layer,when the pointer move into the middle of the slider it will display second layer and when the pointer moves at the end of the slider it will show third layer.I already asked these question on stack-overflow and also on git hub ol3 git directory but i did not get any reply. Thaks.

Documentation

First of all, awesome job!! I really love the work done here.

The question is: is there any documentation about the extensions?

will any plan to update ol to v4.x?

hi, @Viglino . i am learning this repo and like it very much!
will any plan to update ol to v4.x?
and about the charts show on map, if can support 3rd library such as highlight, amcharts would be better.

thanks your great job.

forEachFeatureAtPixel parameters changed

OL's forEachFeatureAtPixel functions parameters have changed in ol v3.20. The Transform interaction use it in the 193 row. There are problem with the scope. You should change the 217 row from }, this) || {}; to }.bind(this)) || {};. Here is the ol's release note: https://github.com/openlayers/openlayers/releases/tag/v3.20.0

Popup close button should specify "type='button'

My page was reloading when the close button was clicked on the popups. Tracked it down to the button submitting the page. By default a plain is a submit button by default. Adding "type='button'" changes it to a normal button.

this.onshow = options.onshow;
$("<button type='button'>").addClass("closeBox").addClass(options.closeBox ? "hasclosebox" : "")

It doesn't seem a problem when using the select.getFeatures().on(['add'], function(... event but I was using map.on('click',.. event. Using this event, the close button was submitting.
To be on the safe side, it's probably good to add the type=button to the button.

Thanks for the examples. They've been a great resource.

Control bar position

Sorry to bother you again about the control bar, Jean-Marc. I know you support several positions for the control bar, but I'm having problems finding a position that works well for my case. When the control bar(s) are top center, they impinge on the square work area. Putting them on the top-right position is better, but still takes up more real estate than they should because the control bar is vertical but the sub control bar is horizontal. See the attached screen shots. I'm constrained regarding the screen size and layout, so I'm hoping I can move the control bars instead.

Is there any simple way for me to do one of the following:

1. Move the top-center control bar to the right edge of the screen with bar and subbar both horizontal, or
2. Keep the top-right bar vertical but also make the subbar vertical.

I realize you may not want to support these cases in your released code, but if you could point me in the right direction to make one of these two changes, I would appreciate it. Your controlbar and togglecontrol code has been extremely helpful to me thus far.

Thanks,
Dennis

Use versioned releases

Please can you create releases so we can depend on proper version numbers, rather than the gh-pages branch HEAD

too much recursion in layerswitcher.js

If baseLayers have a noSwitcherDelete properties to true, removing all layers create too much recursion in attempting to remove parent layer.
proposition (line 508 layersitcher.js) :
if (li.data("layer").getLayers().getLength()==0)
{
if (! li.data("layer").get("noSwitcherDelete")) removeLayer.call($(".layerTrash", li), e);
}
Best regards, Emmanuel (Suisse)

Filter remove

Is there any way to remove all filters or specific filter from a layer?

How to rotate labels with ol.interaction.Transform?

Hi, I love your "ol.interaction.Transform". :)

I was wondering if you could add a way to rotate the label of a feature, along with the whole feature.

In this CodePen, I prepared an example, where I set the style of a feature, so that it has a text label.

How could we rotate the label?

Thanks a lot! :D

ol.geom.getType()

Hi,

into function drawTextPath (e) of TextPath style, there is a switch instruction on switch (g.getType()) with a case 'ol.geom.MultiLineString'. I think this is an erro because g.getType() returns 'MultiLineString' in case of MultiLineString geometry.
Thanks.

Possibility to disable layer ordering for base maps

Hi,
this is really impressive work, thank you very much for sharing this!

I've got a question related to the layer switcher extension.
Since only one base map can be visible at the same time (because only one radio button can be checked), I do not see any meaning in specifying the layer order for base layers. However, for overlay layers, this makes perfectly sense.

How about a possibility to show/hide the layer ordering arrows per layer group or disable them for base maps altogether? Less buttons without meaningful functionality means a less cluttered view for the user.

Or is this already implemented somewhere and I overlooked it?
Cheers

Maki-Fonts filling in gaps

I can't tell if the maki fonts are filling in their gaps with the same fill color, or maybe not respecting stroke for the FontSymbol. Icons like 'campsites' appear to be triangles because all the 'empty space' is filled. Do you think this might be due to the fonticon itself, or something in FontSymbol?

How to change projection of ol.Overlay.Magnify?

Hi. I'm from Brazil and using EPSG 4326.

		myView = new ol.View({
			center: MCLM.Map.arrayMapCenter,
			zoom: MCLM.Map.mapZoom,
		    minZoom: 2,
		    maxZoom: 19,
		    // projection: 'EPSG:4326',  <<---- Commenting this makes work fine.
		});	

This is causing distortion on lens position:

When I comment the projection on my view, the lens works fine, but mess with my map. I need the EPSG:4326.

Would be nice if:

		var layers2 = [	new ol.layer.Tile({	source: new ol.source.OSM()	}) ];			
		var ov = new ol.Overlay.Magnify({	
			layers: layers2,
			zoomOffset: 1,
			projection: 'EPSG:4326'  <<<<<<----- This would be nice !!!!
		});
		map.addOverlay( ov );	

How to make ol.Overlay.Magnify respect my map projection?

photostyle.js breaks with ol-debug.js

Appears to be same issue as #18 . Verified renaming render_ to renderShadow_ fixes problem.

Video and GPS track sync in OL map?

I thought this would be the place to ask as Viglino has the best resource for advanced demonstrations of OL3.

Does anyone know how to reproduce this in OL3?

Results:
http://denelius.com/beltline/mapbox_gopro_min.html

Code:
http://denelius.com/mapbox-gopro-map/

Git:
https://github.com/denelius/mapbox_gopro

The timeline scrub of the video will move the marker if it is moved. And when the marker is moved it will adjust the timeline scrub. So the GPS track line and marker (with heading) and in perfect sync. I would love to add this to an OpenLayers map but don't have the first idea of how.

can't crop layer with GeoJSON

In this http://viglino.github.io/ol3-ext/examples/map.filter.crop.html file ,i changed
var dep value to a GeoJSON content http://dataxiu.com/datas/shp/china_84.json,and var coords = result.features[0].geometry.coordinates;there is not crop layer. GeoJSON can load map using code ol.format.GeoJSON().

Error when using compiled ol3-ext.js

I have an error when using compiled ol3-ext.js file.

Uncaught ReferenceError: map is not defined

on lines :
/** Export PNG / JPEG */ $(document).ready(function() { $("a[download]").exportMap(map); });

ol extend problem

hi, @Viglino . I am trying to extend an openlayers function, but met some problems need your advice sincerely.

what I do is define an ol.source.GeoneImageArcGISRest which inherits ol.source.ImageArcGISRest, and update some little code. but I found if using the mixed ol.js, it can not work well, while using the origin debug ol.js, it seems normal.

here is my test page.
using ol.js
using ol-debug.js

and my repo in https://github.com/dyh333/ol3-ext .

would you give me some help. thanks.

Publish to npm

So that we can use npm install ol3-ext or yarn add ol3-ext.

Currently I use yarn add https://github.com/Viglino/ol3-ext#gh-page but my project might break if there's a breaking change or conflict with my code, because there are no releases (version numbers - #13).

LayerSwitcherControl error

I have an error with LayerSwitcher when adding the control to map.
The lines of code producing the error (this.map is undefined):

if (this.map_){ 
    this.map_.getLayerGroup().un('change', this.drawPanel, this);
    this.map_.un('moveend', this.viewChange, this);
    this.map.un('change:size', this.overflow, this);  -->> This line
    // console.log("remove");
}

solved replacing this.map.un(...) to this.map_.un(...)

popupoverlay not displaying first time after page has loaded

Solution could be to wrap jquery load in $(document).ready.

$(document).ready(function () { $("*", this.content).load(function () { map.renderSync(); }) });

changing Canvas size

Hi,

i am using the animated cluster in conjunction with pie charts. Now i would like to add the size of the pies or bars to the canvas object. However sometimes the size is not displayed due to its position out of the canvas object. How do i change this or are able to display the size over or under the bar for example? I found a solution for displaying it into the pies however inside the elements and not outside, due to the size of the canvas.

BR Thomas

ol.style.Icon does not allow for source to be SVG

If src of ol.style.Icon is a SVG, the following error will occur "Uncaught TypeError: Cannot read property '0' of null".

popup error: a.indexOf is not a function

This error happens on the first run of popup:

jquery-3.1.1.min.js:4 Uncaught TypeError: a.indexOf is not a function
    at r.fn.init.r.fn.load (jquery-3.1.1.min.js:4)
    at ol.Overlay.Popup.show (ol3-ext.js:10580)

how to use ol3-ext in webpack

ol3-ext is great!
But how to use it in webpack with npm?
thanks

Loading content after the opening animated popup

Hello!
How to loading content from the database after the opening animated popup?
That is,

1. make a request to the database, show a blank popup
2. load content

Animated popup click again on the same point

Hello!
The "Animated popup!" if you close popup window and click again on the same point, then it is not popup. How to fix?

animation style have bug in ol3 debug.js mode

map.featureanimation.path.html is not work right in ol3 debug mode ,like version 3.16.0 or 3.19.1

console error is :
Uncaught TypeError: Cannot read property 'width' of null(…)

source code position:
ol.style.Shadow.prototype.render_ = function()
{
var radius = this.radius_;

var canvas = this.getImage();
# var s = [canvas.width, canvas.height];

Split tolerance

Hi,

I'm not sure, but I think at ol.geom.utils.js, 69th row you should change from var ri = result[k].splitAt(pt[i]); to var ri = result[k].splitAt(pt[i], tol); . If I dont use the default tolerance, then it will not use my own tolerance. Am I right? Thanks!

Geo bookmarks control data file when using more than one openlayer page on same website

Hi,
your Geo bookmarks control is just great !
But i have an issue, i'm hosting more than one openlayer zoomify page on my website. But when i set a bookmark for any of them it is used for the others too.
How can i do to to fix this ?

http://www.preiss.fr/album/giga/

Is there any plan to enhance Cloud in Map plugin

Thanks for providing us so many awesome extensions in ol3.

I am interested in Cloud plugin. Clouds does not flow with the map view change, namely the cloud is not located in real geolocation, but render as absolute position in canvas.

I suppose it will be good if you enhance cloud position, with lnglat2pixel like function to make cloud flow in its geolocation. It would be much more like the real cloud.

Thanks!
Alex

Swipe two layers causes a stack trace

First of all, I want to pass my vote of Thanks for your great work! I really love ol-ext.
I have one issue. I get the following error when I swipe.

Uncaught TypeError: Cannot read property '0' of undefined
    at HTMLDocument.ol.control.Swipe.move (ol3-ext.min.js?_dc=1497998169148:11)
    at HTMLDocument.dispatch (jquery-1.11.0.min.js?_dc=1497998169148:3)
    at HTMLDocument.r.handle (jquery-1.11.0.min.js?_dc=1497998169148:3)
ol.control.Swipe.move @ ol3-ext.min.js?_dc=1497998169148:11
dispatch @ jquery-1.11.0.min.js?_dc=1497998169148:3
r.handle @ jquery-1.11.0.min.js?_dc=1497998169148:3
ol3-ext.min.js?_dc=1497998169148:11 Uncaught TypeError: Cannot read property '0' of undefined
    at HTMLDocument.ol.control.Swipe.move (ol3-ext.min.js?_dc=1497998169148:11)
    at HTMLDocument.dispatch (jquery-1.11.0.min.js?_dc=1497998169148:3)
    at HTMLDocument.r.handle (jquery-1.11.0.min.js?_dc=1497998169148:3)
ol.control.Swipe.move @ ol3-ext.min.js?_dc=1497998169148:11
dispatch @ jquery-1.11.0.min.js?_dc=1497998169148:3
r.handle @ jquery-1.11.0.min.js?_dc=1497998169148:3

Dates in profil control not wotking correctly.

Hi! I have some data from GNSS measurements that looks like this:

[{'Y': -28767.024773396541, 'est': 0.6778380943735449, 'err': [0.6550592860154948, 0.3127785621467698, 0.6550592860154948, 0.5683345350333845], 'tobs': '2011-02-28 13:31:50', 'X': 4929472.6657542642, 'lat': 39.481376064125655, 'h': 46.30266498029232, 'Z': 4033737.242812959, 'lon': -0.3343583604795765}, ...]

Now i'm using profil control as follows:

let ls3d = new ol.geom.LineString(coords.map( coo => [coo.lon, coo.lat, coo.h.toFixed(3), new Date(coo.tobs)]), 'XYZM')
profil.setGeometry(ls3d)

My result outputs dates between 25 and 500 hours which is impossible.

I've also tried using new Date(date).getTime() with the same result, and new Date(date).toISOString()
resulting in NaNhNaNmn.

So, how should I format my Date to include this to the fourth coordinate for LineString (Layout 'XYZM')?

Thank you in advance!

Clarification about the license

Your work on OpenLayers is impressive and we would be very happy to use it. But, as is, nobody can do it because the license of your work is uncertain. It should be clarified.

On one hand the license file (license.txt) announces a license (CeCILL-B) but it contains links to different licenses (CeCILL-B and CeCILL-C):

Full text license in English: http://www.cecill.info/ licences/Licence_CeCILL-B_V1-en.txt
Full text license in French: http://www.cecill.info/ licences/Licence_CeCILL-C_V1-fr.txt

On other hand, the source file headers refer to two different licenses (CeCILL and CeCILL-B). For example:
In control/layerswitchercontrol.js:

released under the CeCILL-B license

In control/piratecontrol.js:

released under the CeCILL license

These three licenses are noticeably different:

• The CeCILL license is a "strong copyleft" license. It extends to any derivated work and any component linked against your work. This license is similar to GNU GPL v2 license.
  

• The CeCILL-C license is a "weak copyleft" license. It extends to any derivated work but not to components linked against your work. This license is similar to GNU LGPL v2.1 or EPL licenses.
  

• The CeCILL-B license is a "permissive" license. It applies on original work but neither to derivated works nor components linked against yout work. This license is similar to BSD, MIT or Apache licenses.
  

Could you confirm that your work is actually released under the CeCILL-B license as stated in the license file. If applicable, could you adjust the links and the headers?

This would be welcome!

Remove dependency to jQuery?

I needed one of your component but I don't like to be dependent from jQuery.
I've done a port for GeoBookmark at http://bl.ocks.org/ThomasG77/77bee632812a3441a72eb534603930a6 as a proof of concept

Moving away from jQuery could be a good move. It would be a long term target as I'm aware it would consume time to do it.

Problem with OL3 Feature Animation

By looking at your demo at:
http://viglino.github.io/ol3-ext/examples/map.featureanimation.html

Problem 1:

1. Select "Drop" as Animation 1 and then
2. Rotate your map (Shift + Alt + mouse drag) and then
3. Click on the map to create and animate a feature.
   The problem is here that the feature always "drop" from the "north" and not from the "top", which is not a true "drop".

Problem 2:
By taking the same example above and working with:
image: new ol.style.Icon
in place of
image: new ol.style.RegularShape
creates a bug...

WebJar not accept CeCILL-B licence

I tried to add a WebJar (https://www.webjars.org/) from the NPM package but the CeCILL-B licence is not accepted.

This is the deployment log:

Failed!
All attempts to determine an acceptable license have been exhausted. The package.json file did not contain a spec-compliant license definition and the license could not be determined by trolling through the source repo: https://github.com/Viglino/ol3-ext.git
The acceptable open source software licenses are at bottom of: https://bintray.com/docs/api/
The provided licenses were: CECILL-B
This problem will likely need to be resolved by working with the library maintainers directly.
If you feel you have reached this failure in error, please file an issue: https://github.com/webjars/webjars/issues

Deploying org.webjars.npm ol3-ext 1.0.1
Starting Deploy

The accepted licences are:
AFL-2.1, AFL-3.0, AGPL-V3, Apache-1.0, Apache-1.1, Apache-2.0, APL-1.0, APSL-2.0, Artistic-License-2.0, Attribution, Bouncy-Castle, BSD, BSD 2-Clause, BSD 3-Clause, BSL-1.0, CA-TOSL-1.1, CC0-1.0, CDDL-1.0, Codehaus, CPAL-1.0, CPL-1.0, CPOL-1.02, CUAOFFICE-1.0, Day, Day-Addendum, ECL2, Eiffel-2.0, Entessa-1.0, EPL-1.0, EUDATAGRID, EUPL-1.1, Fair, Facebook-Platform, Frameworx-1.0, Go, GPL-2.0, GPL-2.0+CE, GPL-3.0, Historical, HSQLDB, IBMPL-1.0, ImageMagick, IPAFont-1.0, ISC, IU-Extreme-1.1.1, JA-SIG, JSON, JTidy, LGPL-2.1, LGPL-3.0, Libpng, LPPL-1.0, Lucent-1.02, MirOS, MIT, Motosoto-0.9.1, Mozilla-1.1, MPL-2.0, MS-PL, MS-RL, Multics, NASA-1.3, NAUMEN, Nethack, Nokia-1.0a, NOSL-3.0, NTP, NUnit-2.6.3, NUnit-Test-Adapter-2.6.3, OCLC-2.0, Openfont-1.1, Opengroup, OpenSSL, OSL-3.0, PHP-3.0, PostgreSQL, Public Domain, Public Domain - SUN, PythonPL, PythonSoftFoundation, QTPL-1.0, Real-1.0, RicohPL, RPL-1.5, Scala, SimPL-2.0, Sleepycat, SUNPublic-1.0, Sybase-1.0, TMate, Unlicense, UoI-NCSA, VIM License, VovidaPL-1.0, W3C, WTFPL, wxWindows, Xnet, ZLIB, ZPL-2.0

controlbar.js: toggleOne does not work for sub-control-bars

Hi,

I am making good use of your controlbar.js utility, and when I create a sub-control-bar (following your exmaple - see attached file), I define it as having "toggleOne: true" (the same as for the main control bar). However, while toggleOne works correctly for the main control bar, when I click on the various sub-control-bar items (e.g., polygon, circle, square), none of them fire ol.control.Bar.prototype.onActivateControl. As a result, the newly activated control is simply added to the previously activated control, which is not what I intended.

Before digging into it much deeper, I thought I'd ask if this is how it is supposed to work (i.e., that toggleOne is only supported for the main control bar), or whether this is a bug.

I'm happy to do more digging, but thought I should check with you first.

Thanks,
Dennis

Transforminteraction not working when using ol-debug.js

The transform interaction isn't working when using ol-debug.js

Uncaught TypeError: Cannot read property 'getSource' of undefined
at ol.interaction.Transform.drawSketch_ (transforminteraction.js:226)
at ol.interaction.Transform.select (transforminteraction.js:285)
at ol.interaction.Transform.setActive (transforminteraction.js:109)
at ol.interaction.Transform.ol.interaction.Interaction [as constructor] (ol-debug.js:17627)
at ol.interaction.Transform.ol.interaction.Pointer [as constructor] (ol-debug.js:18145)
at new ol.interaction.Transform (transforminteraction.js:20)
at map.interaction.transform.html:215

How to setActive transforminteraction by default

Hello,

Hi I would have enabled (turned on) the transforminteraction control by default and thus, user does not need to click over the feature to see transformation icons.

Is this possible?

the code bellow does not work:

	var interaction = new ol.interaction.Transform (
		{	
			translateFeature: false,
			scale: true,
			rotate: false,
			keepAspectRatio: undefined,
			translate: true,
			stretch: true,
			source: source,
		});
	interaction.setActive(true);
	map.addInteraction(interaction);

Thanks in advance.

There is an option to set a flashlight on fixed location (without interaction)?

Make ol.control.Toggle disabled/enabled

Proposed code to make ol.control.Toggle disabled/enabled:
(insert in ol.control.Toggle code)

• @param {Object=} opt_options Control options.

•   disabled {bool} the control is created disabled, default false
  

•  getDisabled() {bool} is control disabled
  

•  setDisabled() {bool} disable or enable control
  

*/

this.setDisabled = function (disabled) {
$(this.element).find("button").prop('disabled', disabled);
$(this.element).removeClass("ol-active");
if (this.interaction_) { this.interaction_.setActive(false) };
}
this.setDisabled(options.disabled);
this.getDisabled = function () {
return $(this.element).find("button").prop('disabled')
};