Hi there,

I started to playing around with openlayers and your ol3-layerswitcher project.
Please excuse my lack of knowledge regariding js i thought i maybe you could give me an answer.
I created a map where beside some dynamically loaded layers 2 base layers are present.
BingMaps Aerial and openstreetmaps are those. Due to the nature of the Aerial imagery i switch it off depending on the zoomlevel. This brings the situation that the user cannot select the basemap if the zoomlevel does not permit it. So i would need to know how to get an event of the layerswitch button to detect user interaction. Can you give me a hint how to do that with ol3/layerswitcher?
Thank you very much in advance.

I have some nested layer groups.
I need to make visible all layers in subgroup when i click on group label.
I try to use jquery call $('.layer-switcher li.group>label').click(....); but when I click on label than handler wasn't fired.
What wrong?

If there is a FeatureOverlay active on a layer (for example to represent a selected element), it will stay visible if the layer is turned off, while it should disappear as well.

I created a fork with layer opacity sliders:
https://github.com/sookoll/ol3-layerswitcher

Demo: https://jsfiddle.net/u5ucn87f/

If there is need for that, I can create a pull request.

After running, npm install ol3-layerswitcher, the node_modules/ol3-layerswitcher/package.json reads (only the relevant parts are printed here for brevity),

{
  "dependencies": {
    "openlayers": "~3.17.1"
  },
  "keywords": [
    "openlayers",
    "layerswitcher",
    "ol3"
  ],
  "version": "1.1.2"
}

Looks like the version is up-do-date, but the dependencies aren't in sync with the most recent commits (openlayers still points to 3.x.x and the keyword still says ol3 rather than just plain ol. There are other places with discrepancies, I just listed a few here for example. Is there a way to fix/sync this?

-W

If we have a lot of layers the layer control's height is more than that of the map and the layer control cannot be scrolled down. Do you maybe have an example of how this can be achieved?

Hi !

It is very common to limit a layer to certain resolutions using their min/max resolution settings.

Layerswitcher doesn't take that into account, so that a layer that's not visible because of min/max resolution setting still appears in the layer list. This is very counter-intuitive.

I think that the layers that are not visible due to min/max resolution should either:

• A. not be displayed at all
• B. be grayed-out with a disabled checkbox, eventually with an icon making it obvious why the layer is hidden

I quickly implemented A : https://github.com/olivierdalang/ol3-layerswitcher/tree/show_only_if_visible
It's not finished :

• there's no option to choose between A or B,
• I didn't think about how this should work with Base Layers
• I didn't investigate other types of invisibility (eg. outside of layer's bounds)

Thanks !!

Hey, I was just wondering if you knew how to set overlays to have a default setting of not being displayed on the map until they are selected, as in they are unchecked by default, if you get me.

I have 4 overlays and they display on top of eachother, I'm new to openlayers and there's not a lot of people I can go to for advice, so I looked at your project and it seems to have what id like here but I'm not sure how you did it!

It's possible open layerswitcher menu only on mouse click event instead of mouse over event?

@walkermatt Could you please provide an example on how to load this library using requirejs.
I get undefined object when i try to do so:-
require(["./ol3-layerswitcher"],function(layerSwitcher){ }

MapQuest no longer allow direct tile access 😞

Hi!

Have a look at this video: https://v.usetapes.com/xQ94CHYuqE
Or this plunker: https://plnkr.co/edit/1DZhhT2SZFlGVCZJzeh7

As you can see, the map.forEachFeatureAtPixel() call inside map.on('pointermove', function (evt) { ... }) detect my feature and display the tooltip, even though I'm hovering over the above-laying div to choose a layer.

Any advice on how I best can avoid this, aka disabling my feature popup when choosing a layer?

Hello,

where should I do layersxxxx.clear()?
For selected layers too? selectedlayers.clear();
So in which function do you hide css, there should be the layers cleaning from the ram,
Becouse if I deselect one layer, and I do Dragbox selection that deselceted layers comes in as selection.

With best regards

This would allow users to easily include you library with simple HTML.

Similar to Google Hosted Libraries, jsDelivr is an open source CDN that allows developers to host their own projects and anyone to link to our hosted files in their websites.

http://www.jsdelivr.com/
https://github.com/jsdelivr/jsdelivr/blob/master/CONTRIBUTING.md

I would be happy to do the necessary work if your interested.

example fails when rawgit is loaded as https. This is due to trying to load openlayers as http.

Unfortunately OpenLayers is not served as https. So I propose to also host the openlayers css and js code as a copy and use a protocol independent URL in the example..

Hi! This issue was posted first here: mapgears/ol3-google-maps#37. But after some thought I concluded that this is perhaps more of an ol3-layerswitcher question? Anyone. here it is:

Has anyone here used ol3-layerswitcher together with ol3-google-maps? For some reason the google layer doesn't show correctly in my layer switcher:

Relevant pieces of code:

    var map = new ol.Map({
      target: 'map',
    });

    var googleLayer = new olgm.layer.Google({
      title: 'Kart (Google)',
      type: 'base',
    })
    map.addLayer(googleLayer);

    var shadedBing = new ol.layer.Tile({
      title: 'Kart (Bing)',
      type: 'base',
      source: new ol.source.BingMaps({
        key: bingKey,
        imagerySet: 'Road'
      })
    });
    map.addLayer(shadedBing);

    ...

    map.setView(new ol.View({
        projection: 'EPSG:900913',
        center: ol.proj.transform(
          settings.coords,
          'EPSG:4326',
          'EPSG:900913'
        ),
        zoom: 14
    }));

    var layerSwitcher = new ol.control.LayerSwitcher({});
    map.addControl(layerSwitcher);

    var olGM = new olgm.OLGoogleMaps({map: map});
    olGM.activate();

Any thoughts?

Following the doc on custom builds works ok, until I try to include the layerswitcher.

In my custom.json file, I added:

	"js": [
		"../../ol3-layerswitcher/src/ol3-layerswitcher.js"
	],

and in the exports I added "ol.control.LayerSwitcher".

The compile errors:

ERR! No matching symbol found: ol.control.LayerSwitcher

I tried to add ol3-layerswitcher.js to the extern as well as the js, neither work, I get the same error.

If I dont add "ol.control.LayerSwitcher" to the exports, then it compiles fine, but my browser errors with:

TypeError: ol.control.LayerSwitcher is not a constructor

I'd be grateful for any pointers.

Currently generated input element id is mangled by idx parameter:
var lyrId = lyr.get('title').replace(/\s+/g, '-') + '_' + idx;

This doesn't work well is there are 2 maps with the same set of layers: in the 2nd map label.htmlFor will refer to the input element of the 1st map as generated input element id is the same for the both maps.

This makes a funny effect: when you click at the label at the 2nd map it actually switches a layer at the 1st map.

A solution for this issue could look something like this:

var lyrId = lyr.get('title').replace(/\s+/g, '-') + '_' + Math.floor(Math.random() * 1000000);

It seems that layerswitcher does'nt work in MS Internet Explorer !
Do you confirm it ?

Cheers !
Nino

I have overlay layers which need to be mutually exclusives, additionally to some base layers.

There is a solution for plain Openlayers, but I can't get it to work using ol3-layerswitcher.

I also tried setting layer.setVisible(false) to false after a "change:visible" event gets triggered. The problem is that this event gets propagated and on the second run all layers get invisible. I did something like that:

ol.control.LayerSwitcher.forEachRecursive(map, function(l, idx, a) {
  l.on("change:visible", function(e, react) {

    exclusiveOverlays.forEach(function(layer, i) {
      if (e.target.get('title') !== layer.getProperties().title) {
        layer.setVisible(false);
      }
    });
  });
});

Hello,

could someone integrate the layerswitcher in this ol3-sidebar. Thanks for help.

var layerSwitcher = new ol.control.LayerSwitcher();
map.addControl(layerSwitcher);
map.removeControl(layerSwitcher);

When trying to remove the layerswitcher control, an error is thrown.

Hi Matt
As I can see in the example your layerswitcher would exactly full fill my needs.
I implement according your example and the source javascript code of ol3-layerswitcher,js and ol3-layerswitcher.css in my website. My layer definition is according your addlayer,js. I wouldlike to have something similar like 'view the example on RawGit'. Unfortunately I get the button on the map but as soon as I move the mouse over the button, the button disappear and I'm not able to choose one of my defined layer. I guess something is missing but after two days of examination I couldn't find anything wrong.
Could help me or anybody else, or have a hint for me what's missing?
Cheers Guido

the layerswitcher does not work in safari.
The radio button (basemaps) as also the layer selection (check box) can not be changed when the map is accessed using safari browser
I do not own an OS device to locate the error

i want to access published layers through IIS but am facing the problem with REDIRECTING the URL

my domain on IIS is like this http://maps.icrisat.org
and the layers which i have published using http://localhost:8080/geoserver/wms...

when open my website i will be selecting a link which points to geoserver layers using javascript file in that i will be calling all layers but it is not displaying any layers but it is loading the base map.

someone can help me in this issue

Thanks
Ismail

How can I add an overlay layer to a group which is by default not selected?

Hi Matt,

is there a way to ad a tooltip on mouse hover in your layerswitcher (like in this page)?

http://sigeom.mines.gouv.qc.ca/signet/classes/I1108_afchCarteIntr#

regards,

Tom

Hi !

In my application, I want the displayed layers to be saved across pages, so that the user doesn't have to repick all layers he wants to see. I guess it's a pretty common scenario.

I quickly implemented it using cookies, see here :

https://github.com/olivierdalang/ol3-layerswitcher/tree/visbility_in_cookie

It's not finished though :

• saving should be optional,
• currently there's no namespacing in the cookie, so that all maps of the same domain will share the same settings (conflicts if layers have the same title),
• another way to save the state is through the window hash, so that you can copy/paste a link

Hi Matt,

I've successfully implemented your layerswitcher.
However I would like to know how to get and set the actual layer using an ID or something else in order to save the actual layer type. I was not able to find anything. How is that possible?

Second question how can I checkmark automatically the overlay when I using sat view and back by select any other layer. Must be done by using visible but for me is not clear how do I implement it.
Thanks in advance for your feedback...
Cheers Guido

My layer definitions looks as follows:

      mapLayers = [
        new ol.layer.Group({
          title: 'Basemaps',
          layers: [
            new ol.layer.Tile({
              title: 'SatelliteView',
              type: 'base',
              visible: false,
              source: new ol.source.OSM({ url:'//server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'})
              //source: new ol.source.MapQuest({layer: 'sat'})
            }),
            new ol.layer.Tile({
              title: 'Topographic',
              type: 'base',
              visible: false,
              source: new ol.source.XYZ({attributions:[attribution],url:'//server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}'}),
            }),
            new ol.layer.Tile({
              title: 'EsriRoad',
              type: 'base',
              visible: false,
              source: new ol.source.XYZ({attributions:[attribution],url:'//server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}'}),
            }),
            new ol.layer.Tile({
              title: 'MapquestRoad',
              type: 'base',
              visible: true,
              source: new ol.source.MapQuest({layer: 'osm'}),
              //source: new ol.source.OSM({url:'//{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'}),
            }),
          ],
        }), //End of basemaps
        new ol.layer.Group({
          title: 'Overlays',
          layers: [
            new ol.layer.Tile({
              title: 'Themes',
              visible: false,
              source: new ol.source.XYZ({attributions:[attribution],url:'//server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}'}),
            }),
          ],
        }), //End of overlays
      ]; //End of var mapLayers

The traditional way to produce a satellite map with roads in MapQuest is to make a sat layer and a road layer.

I can't seem to group these together in a single entry using layer switcher. Either they appear as independent base layers or the roads would become an optional overlay (which makes the hybrid option redundant along side the satellite layer)

Hi Matt,

first of all, thanks a lot for this great LayerSwitcher !
Also, sorry for my english, not my mother tongue...
Last, I'my js skills are VERY limited as I started a few month ago.

I'm loading a wms layer in my project, and I trigger WMS GetFeatureInfo requests on click events (in a popup). It works, but when I uncheck the layer in the swicther, it still triggers the GetFeatureInfo, and opens the popup...

I think I have to add an "if LAYER-X in layerswitcher is ON then..." somewhere, but how can I check if a layer is checked in the layerswitcher?

Thanks again,

I try to use ol3-layerswitcher in combination with Cesium.JS (example page: http://openlayers.org/ol3-cesium/examples/sidebyside.html). What customization is needed?

There appears to be a problem where the layer switcher panel no longer rendering with the latest version of OL3 (Version: v3.1.0-pre.2-508-g27b5036 at the time of writing).

It does render with the version of OL3 packaged with ol3-layerswitcher on github.

The cause of the problem is that the render method added to the ol3-layerswitcher prototype is being overwritten by a render method inherited from elsewhere (presumably ol.control.Control).

A simple workaround is to change the name of the ol.control.LayerSwitcher prototype method from "render" to something else (I used "renderNow"). This worked for me.

Hope this helps.

Trying the component in a different code context than the demo, I encounter a scope issue. The switcher fails when you encapsulate all the application code in an IIFE.
To reproduce, in layerswitcher.js, add at the beginning (function() { and at the end })();
Then, try to switch back and forth between the two base layers and you will see the behaviour.
This error happens on Google Chrome 39.0.2171.2 dev on Linux 64.

ol3-layerswitcher.js:62 Uncaught TypeError: undefined is not a function

In Firefox 32.0.3, there is the same behaviour but it fails silently in the Firebug console.

I see from the source that the layer switcher decides at the layer level whether or not to display it based on if the layer has a title. It would be great if there could be a property of a layer group that tells the layer switcher whether or not to display the group itself.

Thanks for implementing the layerswitcher.

How can I have an opacity slider using the layerswitcher as the following OL3 example? http://openlayers.org/en/v3.2.1/examples/layer-group.html

I hope what I have requested is possible.
Thanks again.

Hi, is it possible to list the "internal" layers of a WMS configuration to switch them separately on and off?
e.g.

var wmsSource = new ol.source.ImageWMS({
  url: 'http://<wms_server>/geoserver/<namespace>/wms',
  params: {'LAYERS': [ 'Layer_001', 'Layer_002', ... 'Layer_xxx' ]}

var wms = new ol.layer.Image({
  title: 'Basemap',
  type: 'base',
  source: wmsSource 
})

Should create

* Basemap
      * Layer_xxx
      ...
      * Layer_002
      * Layer_001

I like your layerswitcher very much. Would it be possible to collapse/uncollapse the groups of layers to have a more clean panel if I use many layers?

Referring to issue #30 (Add listener on selected layer) , how can I get group "title" of selected layer ?

Regards
Nino

It's possible add handler to execute some code when switcher panel is shown?
I tried with
$('.layer-switcher').mouseover(function () { setTimeout(function () { console.log('shown'); }, 10); });

but it isn't exactly the same thing

Is this compatible to OpenLayers 4? Possibly it is, so check it out. https://github.com/openlayers/openlayers/releases/tag/v4.0.1

I have used ol3-layerswitcher,I wan't to enable parent layer checkbox at that time all child layers checkbox get enable and vise versa.If some child layers are disabled and i enable parent layer then all child layers should be enable.I tried little bit code with html check boxes and JS but my code not working properly and code is too big .Please find this [http://uxo.azurewebsites.net/webmap/Index.html] Thanks

Hello,

Why is the order of group reverted from its declaration ?

In the example you declare the Base maps group, then the Overlays group, but in the rendered map, it's first the Overlays then the Base maps group that are displayed in that order.

Would it be better to display them in the natural order of their declaration ?

Thank you for jumping in to implement a layerswitcher.

Is there any possibility to implement the OL2-Option "displayInLayerSwitcher"? If set to false the Layer is visible but not displayed in the layerswitcher.
Or do I perhaps miss something?

[deleted]

Hovering the legend icon, I've seen a "missing" (IMO) title attribute tag in the element.
I have a branch with the changes but before submitting, I want to get your opinion.

In the library, I use the same convention tipLabel as in this ol3 source code but without the goog stuff.
My main concern is about using or not the tipLabel option in the example.

OSMBuildings layers (https://github.com/kekscom/osmbuildings) are obscuring the layerswitcher for me. Is a higher z-index an option? Don't ask me for a value - I don't know what OSMBuildings can reach.

Hi,

First, thank you for your plugin, it's very usefull for my application :).
I'm wondering if it's possible to add a feature getting the selected layer. I'm developping a plugin for drawing on a map and i need to know which layer to draw on it.
Is-it possible to add an eventListener when the user select a layer by radio button and return the selected layer ?
Or I can try to develop it for my personnal use (or not ^^) but i'm not sure to do it in right way.

Thanks

(sorry for my bad english)

Are nested groups supported? Apologies if I've asked this before, but I couldn't see it in the issues.