Monday, November 16, 2015

openlayers 3 - Layer Control/Switcher - Extjs

Lately , I had a requirement for a layer contol-switcher tool for openlayers 3 (OL3). The one currently exists here is good enough if you expect to get something like OL2 used to have. But in my case this wasn't enough.
So, I had to do it from scratch. Searching on the web for a fancy jquery tree , supporting drag-drop between tree nodes, grouping of tree nodes, check box support, image support etc, I was surprised I couldn't find something very impressive to use. So I ended up with extjs tree panel , which has all the needed functionality and it is quit impressive. Though, it is not jquery so extjs library needs to be loaded.

I have made a github project you may see and freely download here. Note that the project is on its very early stages and many things will probably change. Just download the rar file and open it. Double click in any example to see it in action.

If any of you, boys and girls, look forward to contribute please let me know. I would be more than grateful.

Some examples up and running to get the idea.

basic example:
http://ptsagkis.github.io/extjs_ol3_layercontrol/example.html
minimalistic example:
http://ptsagkis.github.io/extjs_ol3_layercontrol/example0_minimalistic.html
example with options:
http://ptsagkis.github.io/extjs_ol3_layercontrol/example1_withoptions.html
switching themes:
http://ptsagkis.github.io/extjs_ol3_layercontrol/example3_themes.html
legend icons from geoserver:
http://ptsagkis.github.io/extjs_ol3_layercontrol/example3.html
add wfs vector layer dynamic and asign loadstart, loadend, loaderror events 
http://ptsagkis.github.io/extjs_ol3_layercontrol/example4_dynamic_add_layer.html
use an extjs layout for best UI experience
http://ptsagkis.github.io/extjs_ol3_layercontrol/example5_extjslayout.html
change visibility programmticaly and fire the listener to toggle check box
http://ptsagkis.github.io/extjs_ol3_layercontrol/example6_vector.html



3 comments:

  1. When I tested it in ExtJs 6, I got the following error Uncaught TypeError: ol.control.LayerControl is not a constructor
    Is there a workaround or I have to wait until a compatible version is released?

    ReplyDelete
    Replies
    1. I have made some minor changes so now it should work for both Ext5 and 6.
      Get a new copy (I have some changes only on LayerControl.js)
      You can test it here -->
      http://ptsagkis.github.io/extjs_ol3_layercontrol/example0_minimalistic_ext6.html

      Thanks for pointing it.

      Delete
  2. This comment has been removed by a blog administrator.

    ReplyDelete

Urban Growth Lab - UGLab

Proud to release a first version of the UGLab project .  UGLab is a python open source project capable to execute Urban Growth predictions f...