2

I want to create a sortable lists of layers using jquery ui. I'm trying to use .setZindex() and .index() method. I think that index of <li> does not refresh after order changing. I'm not famililar with jquery any help?

here is the basic concept:

<!doctype HTML>
<html>
<head>
    <meta charset="utf-8">  

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <link rel="stylesheet" href="jquery-ui.min.css">      
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<style> 
html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#map {
  width: 100%;
  height: 100%;
}
 #layers {
/*  padding: 0.1em;   */
    position: absolute;
    top: 2%;
    right: 1%;
    width: 200px;
    height: 400px;}


#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }  
#sortable li span { position: absolute; margin-left: -1.3em; }  

</style>    
 <script>
  $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });  
</script>  
</head>
<body>
<div id="map"></div>   
<div id="layers" class="ui-widget-content">
  <h3>Layers</h3>
  <ul id="sortable">
  <li id="li1" class="ui-state-default">rivers</li>
  <li id="li2" class="ui-state-default">landuse</li>
</ul>
</div>      
<script>
      map = new L.Map('map', {
            maxBounds : [[51.90509, 19.43993], [51.79205, 19.78813]],
            minZoom: 10,
        });

      map.setView([51.83713, 19.59949], 12);

      L.tileLayer.wms('http://92.63.57.131:8089/qgis/qgis_mapserv.fcgi.exe?map=c:/PKWL/pkwl.qgs', {
        layers : 'landuse',
        format : 'image/png',
        maxZoom : 20,
        minZoom : 10,
        transparent : true,
        continuousWorld : true,
      }).addTo(map).setZIndex($('#li1').index()); 

       L.tileLayer.wms('http://92.63.57.131:8089/qgis/qgis_mapserv.fcgi.exe?map=c:/PKWL/pkwl.qgs', {
        layers : 'wodalasy',
        format : 'image/png',
        maxZoom : 20,
        minZoom : 10,
        transparent : true,
        continuousWorld : true,
      }).addTo(map).setZIndex($('#li2').index());
</script>
</body>
</html>  
1
  • Seems to work for me. You just click the name of the layer and drag it to where you want it to. UPDATE: Nevermind, I see what you mean. The layer list may change sort, but the map doesn't change order.
    – alexGIS
    Mar 24, 2016 at 18:14

1 Answer 1

2

If you want the layers sorted in the same order as the list elements (i.e. the layer on the top of the list is placed on top of the other layers), you will want to subtract the list index from the length if the list and use that value as the layer z-index:

var listLength = $("#sortable")[0].children.length;

var landuseLayer = L.tileLayer.wms('http://92.63.57.131:8089/qgis/qgis_mapserv.fcgi.exe?map=c:/PKWL/pkwl.qgs', {
  layers: 'landuse',
  format: 'image/png',
  maxZoom: 20,
  minZoom: 10,
  transparent: true,
  continuousWorld: true,
}).addTo(map).setZIndex(listLength-$('#li1').index()+2);

var riverLayer = L.tileLayer.wms('http://92.63.57.131:8089/qgis/qgis_mapserv.fcgi.exe?map=c:/PKWL/pkwl.qgs', {
  layers: 'wodalasy',
  format: 'image/png',
  maxZoom: 20,
  minZoom: 10,
  transparent: true,
  continuousWorld: true,
}).addTo(map).setZIndex(listLength-$('#li2').index()+2);

The +2 here is just to make sure that these layers are placed above any background tiles that you load without setting a z-index (tile layers have a z-index of 2 by default). If you don't plan to load any background layers, you can ignore this.

To get the layer order to change when you re-sort the list, you will need to subscribe to the sortupdate event and change the z-indices of the layers:

$("#sortable").on("sortupdate", function(event, ui) {
  landuseLayer.setZIndex(listLength-$('#li1').index()+2);
  riverLayer.setZIndex(listLength-$('#li2').index()+2);
});

Here is an example fiddle, including a background layer and a third tile layer with labels, just to more clearly illustrate that the sorting is working:

http://fiddle.jshell.net/nathansnider/bn27ga9p/

1
  • wow it works! Thank you a lot! I knew there must be something with events. Still I've got a lots to read'n'learn. Thank for your help :)
    – pawaelus
    Mar 25, 2016 at 7:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.