Develop client side transparency for map layer

[boney-bun]

We need a way to set transparency for map along with its layers, since layers that are not transparent and block text below. It would be hard for the users to recognise the area.

Yes, transparency can be set in the qml or sld layer style but we want a client side option to override that if server side transparency was not set.

[gubuntu]

@boney-bun

@gubuntu @lucernae for geonode, there is a "style" options in the edit layer (see the pic to illustrate it). But it has not implemented yet for now. I guess we can use it in the future. we can enable the style link and allow users to set the transparency. the property to set transparency is "opacity", but maybe the property is specific only for google map. I'm not sure about this.

for qgis_server, we can definitely set "LayerTransparency" in qml file. Most the qml files set the layertransparency value to 0 (no transparency). Perhaps, we can set to, let's say, 70 to make it more transparent. The question now is: where do we want to put the transparency layer setting for qgis_server? when the users upload files or make a new menu in the UI?

btw, I'm talking about geonode 2.6

[gubuntu]

@timlinux

I think a nicer implementation approach would be to have some contextual menu for each layer in the map view with a slider to set individual layer transparency. This would apply only to the current map - users could still set transparency options in their layer styles if they wanted to, but the map transparency settings would be applied in addition to anything in the layer style.

[gubuntu]

@boney-bun

I'll look at how to edit style in the layer and customize the transparency by adding a slider onto it using leaflet.

I have locally activated the edit link on the style. Now, I am figuring out how to set the transparency on the "Edit" button using leaflet.

Below is the UI.

UPDATED: After clicked on Edit, it will go to another page. The page will show the property of the layer.

[gubuntu]

@boney-bun you can come back to this ticket but I think you were on the wrong track by trying to edit the style. That is a backend-specific action that is being handled in other issues.

What you need to do here is like what Tim and I suggested: a clients-side transparency slide right in the map or layer view.

[boney-bun]

@gubuntu I'm thinking to use leaflet in the frontend for directly pulling and modifyting the layer's properties. So, it would purely js connecting to backend. current API in geosafe doesn't have a mechanism to modify the layers' properties yet. what do you think of using js?

[gubuntu]

http://leafletjs.com/reference.html#tilelayer-opacity

[boney-bun]

I was thinking to edit the tiles in metadata detail (see the gif below).

but, then there is no mechanism for the opacity property to be saved in the qgis server (CMIIW). so, I proposed setting the opacity temporarily. It will take effect on a session, but the users have to set it again next time they visit the page. the proposed link is at the bottom of the map as illustrated below.

what do you think @gubuntu? do you think the second solution is feasible? if so, i will proceed to develop the corresponding codes.

[gubuntu]

@boney-bun something like http://jsfiddle.net/nathansnider/zkcs36p6/ (thanks @NyakudyaA) amd ONLY in the GeoSAFE UI, NOT the GeoNode GeoExt Layer or Map UIs.

[boney-bun]

thanks @NyakudyaA for pointing out the library. I have added a link on the left panel. It has not done yet as I'm going to make it working smoothly. Please refer to the mockup below. Do we have to set the opacity of exposure and hazard layers @gubuntu ? or, just the exposure layer?

[boney-bun]

close this ticket as already implement and merge with #105

[gubuntu]

@boney-bun can you confirm this will work for all overlays, not just one?

[boney-bun]

@gubuntu it's working with only one layer. the feature will be addressed on #71 and also adding its legend

[gubuntu]

then I'll reopen until it's complete with all layers.

[boney-bun]

ok. i've tried to develop setting for all layers, but sometime it didn't work. need to investigate more

[boney-bun]

apparently, using tile for all layers (because the implementation of qgis server) affect the implementation of leaflet. the opacity property of L.gridLayer doesn't work now. an alternative is transparent property of L.tileLayer.wms, but it only takes boolean.

[gubuntu]

TileLayer extends GridLayer, which has an opacity method so I don't see why it shouldn't work. the QGIS TMS layer is just like any other TMS layer, which is what Leaflet was first built to work with.

The WMS one is not what we want. That asks the server to send tiles with transparency if that format supports it.

[boney-bun]

It was working with geonode 2.6 and geoserver backend. Now, I'm working on geonode 2.7 and qgis-server backend. The transparency setting didn't work as expected as the previous configuration. I'm still figuring it out.

[gubuntu]

ideally it should work with both backends because ultimately they are just WMS or TMS layers. But we must focus on getting it to work on our dev platform,

[boney-bun]

Hi @gubuntu Just an update regarding this issue. I have moved the transparency option and merged them with legend based on our last discussion. The legend #71 has been sorted out (will be committed along with this issue). I'm still struggling with setting the opacity using leaflet. Meanwhile, you may want to look at the proposed UI.

[boney-bun]

@gubuntu both transparency (this issue) and legend(#71) have worked now.

Note:

• the transparency is not rendered smoothly on my machine, probably due to heavy loads on the background.
• the slider has a bug: if you slide it, the map will be affected as well (shown at the end of the gif).

[gubuntu]

the legends (map keys) are working nicely but the transparency sliders don't work (on staging). they also seem to mess around with pan and zoom and if you drag them the map drags as well. Please see other web maps, this is a common implementation.

The legend dialog must default to hidden and popup on demand.

Overall style must follow the idiom of GeoNode

In general please don't close Issues until they've been reviewed

[boney-bun]

@gubuntu I've tried on staging. the transparency sliders works. It would stop work if we change its value a few times (two times in my trial). the layers are obtained from backend using javascript via update_map function whenever users select/modify layers. the downside is the staging server may suffer from heavy load request.

I'll find out why it stop working after changing its value a few times. I would also work on solving the bug and following the style of GeoNode.

[gubuntu]

it needs to work all the time

why is it making server-side requests? It should change the transparency in place with no reloads.

This needs to work 100% and look good by tomorrow as WB will be assessing the GeoSAFE UI on Monday.

[boney-bun]

it makes an asynchronous ajax request to the server. the whole page will not be refreshed, only a partial part. the function requests image and shows it to the front-end. that's why my implementation didn't work well at first because it needs to be called every time users select/modify the layers.

ok, i'll try my best.

[boney-bun]

I can confirm that the transparency has worked perfectly now. One more problem to solve: the slider still affects the background map. I am still working on it.

meanwhile, @Gustry @gubuntu may want to review on the UI. (Note: I clicked on the sliders, instead of sliding them)

[boney-bun]

@gubuntu @Gustry It works now.

[gubuntu]

that does look much better @boney-bun