Patch: better id and classes for improved styling

[denydias]

Hi @davicustodio,

Thank you for this great Leaflet plugin.

I want to propose a patch to styledLayerControl.js that enables further styling control by adding some classes and ids to the control elements.

--- a/styledLayerControl.js 2016-04-04 22:36:48.000000000 -0300
+++ b/styledLayerControl.js 2016-05-29 07:47:14.570008741 -0300
@@ -303,11 +303,13 @@
         var label = document.createElement('div'),
             input,
             checked = this._map.hasLayer(obj.layer),
-            container;
+            container,
+            objid = 'ac-' + obj.name.replace(/ /g,'');


         if (obj.overlay) {
             input = document.createElement('input');
+            input.id = objid;
             input.type = 'checkbox';
             input.className = 'leaflet-control-layers-selector';
             input.defaultChecked = checked;
@@ -316,6 +318,7 @@

         } else {
             input = this._createRadioElement('leaflet-base-layers', checked);
+            input.id = objid;

             label.className = "menu-item-radio";
         }
@@ -325,8 +328,10 @@

         L.DomEvent.on(input, 'click', this._onInputClick, this);

-        var name = document.createElement('span');
-        name.innerHTML = ' ' + obj.name;
+        var name = document.createElement('label');
+        name.setAttribute("for",objid);
+        name.className = 'menu-layer';
+        name.innerHTML = '<span>' + obj.name + '</span>';

         label.appendChild(input);
         label.appendChild(name);
@@ -370,7 +375,7 @@
             var s_type_exclusive = this.options.exclusive ? ' type="radio" ' : ' type="checkbox" ';

             inputElement = '<input id="ac' + obj.group.id + '" name="accordion-1" class="menu" ' + s_expanded + s_type_exclusive + '/>';
-            inputLabel = '<label for="ac' + obj.group.id + '">' + obj.group.name + '</label>';
+            inputLabel = '<label for="ac' + obj.group.id + '" class="menu-label">' + obj.group.name + '</label>';

             article = document.createElement('article');
             article.className = 'ac-large';

With the above patch applied, I'm able to achieve this with pure CSS:

[AgentJay]

Can you give your CSS for this nice style you made?

[denydias]

Sure, @AgentJay! Go get it here.

I must say that I have forked the original Leaflet.StyledLayerControl and extended it a lot! As of today, this is how it looks (sorry for the blur, not public yet, still under NDA, labels in Brazilian Portuguese):

[AgentJay]

This is awesome. Thank you.

[vlasvlasvlas]

Amazing! have you tried making an accordion kind-of menu?

[denydias]

Hi, @vlasvlasvlas. I din't quite get what you mean, but each layer group title is an accordion. The whole panel have it's height set to the opened groups, but it doesn't have an accordion feature itself.

[PeacockK]

Thanks @denydias for this! Were you in a position to be able to share your now forked StyledLayerControl? Thanks!

[denydias]

Hi, @PeacockK. I don't keep a fork for the modified StyledLayerControl itself. But you can find the whole thing here:

https://ox.socioambiental.org/

From there you can look at the scritps and download it for your project.

[davicustodio]

Hi @denydias Congratulations on the adaptations made in the plugin. I took a look at the site you indicated, and it really looked great.
I noticed that you work at the socio-environmental institute producing GIS systems. I am also Brazilian, and I work in GIS development at Embrapa. Maybe we can exchange experiences in the future.
As for StyledLayerControl, I've been very busy lately and could not pay attention to the project.
As for the patch you suggested: could you submit a pull request?
Thanks for the contribution!

[denydias]

Hi, @davicustodio! Thank you so much for your kind words!

I'm an independent developer. I don't work at ISA. This was a specific project and is actually delivered since Nov'16. My job is done with them. Also I'm not a GIS developer. OX was actually my first GIS gig.

I'm honored with your proposal to look forward in exchanging experiences! I'm going to get all pieces together and send you a complete PR. Many things was changed and improved from the OP. This may take a while, as I'm also in a hurry with another projects. I'll find the time to prepare everything to you.

[mmirhi]

Your work is amazing, great job. I am unable to locate the latest css file (edited styledLayerControl). I would greatly appreciate pointing me to it.

[denydias]

Tks @mmirhi!

Try the scss bellow. It's customized for the customer app, so you'll have a lot of work tailoring it for our needs, but it's an start. 😉

// Leaflet Overrides
// @require linter exclusions: ColorVariable, IdSelector, ImportantRule, DuplicateProperty, NestingDepth, QualifyingElement, SelectorDepth, SelectorFormat, VendorPrefix

// General control overrides
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  font: bold 26px 'Lucida Console', Monaco, monospace;
  text-indent: 1px;
}

.leaflet-control-layers form {
  margin-bottom: 0;
}

.leaflet-control-layers-expanded {
  padding: 0;
}

.leaflet-right .leaflet-control {
  margin-right: 0;

  @include breakpoint(ed) {
    margin-right: 10px;
  }
}

// Top-left Leaflet controls: layers
.leaflet-bottom.leaflet-left {
  bottom: 10px;
  font-family: $font-default;
  z-index: 1001;

  @include breakpoint(ed) {
    top: 70px;
  }

  .leaflet-control-layers-toggle {
    display: none;
  }

  .leaflet-control-layers {
    margin-bottom: 5px;
    margin-left: 5px;
    max-height: 100%;
    overflow-y: auto;

    @include breakpoint(ed) {
      box-shadow: 1px 1px 4px rgba($black, .3);
      margin-bottom: 0;
      margin-left: 10px;
    }
  }

  .leaflet-control-layers-expanded {
    background: rgba($white, .9);
    background-clip: padding-box;
    overflow-y: hidden;
  }

  .ac-container {
    height: auto;
    margin: 5px;
    overflow-x: hidden;
    overflow-y: scroll;
    text-align: left;
    width: auto;

    // Layer group labels
    input {
      display: none;

      + label.menu-label {
        @include font-size(13px);
        border-bottom: 1px solid $grey-700;
        box-sizing: content-box;
        color: $grey-700;
        cursor: pointer;
        display: block;
        font-weight: $normal;
        height: 16px;
        line-height: 14px;
        padding: 5px 27px 0 2px;
        position: relative;
        -webkit-tap-highlight-color: rgba($white, 0);
        z-index: 20;
      }

      &.menu:checked ~ article.ac-large {
        height: auto;
        overflow: hidden;
        padding-top: 2px;
      }
    }

    .menu-item-radio,
    .menu-item-checkbox {
      @include font-size(13px);
      padding: 2px 7px;
    }

    input:checked + label.menu-label,
    input:checked + label.menu-label:hover {
      border-bottom: 1px solid $maincolor;
      color: $maincolor;
    }

    .leaflet-control-layers-base,
    .leaflet-control-layers-overlays {
      margin-right: 3px;
    }

    .leaflet-control-layers-base input + label.menu-label::before,
    .leaflet-control-layers-overlays input + label.menu-label::before {
      font-family: FontAwesome;
      padding-right: 5px;
    }

    input + label.menu-label::after,
    input:checked + label.menu-label::after {
      background-image: none;
      content: '\f078';
      font-family: FontAwesome;
      position: absolute;
      right: 5px;
      top: 4px;
    }

    input:checked + label.menu-label::after {
      content: '\f077';
    }

    // Layers Labels
    article {
      height: 0;
      margin-top: -1px;
      overflow: hidden;
      position: relative;
      -moz-transition: height .3s ease-in-out, box-shadow .6s linear;
      -ms-transition: height .3s ease-in-out, box-shadow .6s linear;
      -o-transition: height .3s ease-in-out, box-shadow .6s linear;
      -webkit-transition: height .3s ease-in-out, box-shadow .6s linear;
      transition: height .3s ease-in-out, box-shadow .6s linear;
      z-index: 10;

      // Legend (when available)
      ul {
        @include font-size(10px);
        color: $grey-700;
        display: flex;
        font-weight: $light;
        line-height: 14px;
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          display: block;
          float: left;
          line-height: 10px;
          list-style: none;
          margin: 0 1px;

          span {
            border: 1px solid $grey-700;
            display: block;
            float: left;
            height: 10px;
            margin: 0 2px;
            width: 10px;
          }
        }
      }

      input {
        margin-left: -9999px;
        position: absolute;
        visibility: hidden;

        + label {
          @include font-size(12px);
          box-sizing: content-box;
          color: $black;
          cursor: pointer;
          display: block;
          font-weight: $light;
          height: 14px;
          line-height: 14px;
          outline: none;
          position: relative;
          z-index: 20;
        }
      }
    }

    // Layers toggles
    .leaflet-control-layers-overlays article input + label::before,
    .leaflet-control-layers-overlays article input + label::after {
      bottom: 1px;
      content: '';
      display: block;
      left: 1px;
      position: absolute;
      top: 1px;
    }

    .leaflet-control-layers-overlays article input + label::before {
      background-color: $grey-400;
      border-radius: 10px;
      right: 1px;
      transition: background .2s;
      width: 22px;
    }

    .leaflet-control-layers-overlays article input + label::after {
      background-color: $white;
      border-radius: 100%;
      box-shadow: 0 1px 1px rgba($black, .3);
      transition: margin .2s;
      width: 13px;
    }

    .leaflet-control-layers-overlays article input:checked + label::before {
      background-color: $maincolor;
    }

    .leaflet-control-layers-overlays article input:checked + label::after {
      margin-left: 9px;
    }

    .leaflet-control-layers-overlays article input + label span {
      left: 27px;
      position: relative;
    }

    // Tiles toggles
    .leaflet-control-layers-base article input + label::before {
      @include font-size(20px);
      border-radius: 0;
      bottom: 1px;
      color: $grey-400;
      content: '\f096';
      display: block;
      font-family: FontAwesome;
      left: 1px;
      padding-right: 5px;
      position: absolute;
      top: 1px;
    }

    .leaflet-control-layers-base article input:checked + label::before {
      color: $maincolor;
      content: '\f046';
      transition: background .2s;
    }

    .leaflet-control-layers-base article input + label:hover::before {
      content: '\f046';
    }

    .leaflet-control-layers-base article input + label span {
      left: 22px;
      position: relative;
    }
  }
}

// Colors for specific layer toggles
// Degradation Map
.page--degradacao {
  // Monthly SAD
  #leaflet-control-accordion-layers-3 {
    article .irs {
      .irs-bar {
        background-image: url('/themes/d8ox/images/irs-bar-sad.png');
        background-repeat: repeat-y;
        background-size: 192px;
      }
    }
  }

  // Annual Deforest
  #leaflet-control-accordion-layers-4 {
    article .irs {
      .irs-bar {
        background-image: url('/themes/d8ox/images/irs-bar-deforest.png');
        background-repeat: repeat-y;
        background-size: 192px;
      }
    }
  }

  // Protected areas
  #leaflet-control-accordion-layers-6 {
    // Federal
    input#ac-UCsFederais:checked + label::before {
      background-color: #66cdab;
    }

    // State
    input#ac-UCsEstaduais:checked + label::before {
      background-color: #4ce600;
    }

    // Indigenous
    input#ac-TerrasIndígenas:checked + label::before {
      background-color: #add881;
    }

    // Settlements
    input#ac-Assentamentos:checked + label::before {
      background-color: #b4aa78;
    }
  }

  // Boundaries
  #leaflet-control-accordion-layers-7 {
    // County
    input#ac-Municípios:checked + label::before {
      background-color: #6e6e6e;
    }

    // Xingu Basin
    input#ac-BaciadoXingu:checked + label::before {
      background-color: #005ce6;
    }

    // Xingu Strip
    input#ac-CorredordoXingu:checked + label::before {
      background-color: #9324af;
    }

    // Military
    input#ac-ÁreasMilitares:checked + label::before {
      background-color: #e6c41e;
    }
  }

  // Places
  #leaflet-control-accordion-layers-8 {
    // Village
    input#ac-Aldeias:checked + label::before {
      background-color: #e69800;
    }

    // RESEX
    input#ac-PolosExtrativistas:checked + label::before {
      background-color: #f50;
    }

    // Towns
    input#ac-SedesMunicipais:checked + label::before {
      background-color: $black;
    }
  }
}

// Infrastructure Map
.page--infraestrutura {
  // Annual Deforest
  #leaflet-control-accordion-layers-1 article .irs {
    .irs-bar {
      background-image: url('/themes/d8ox/images/irs-bar-deforest.png');
      background-repeat: repeat-y;
      background-size: 192px;
    }
  }

  // Monitored Projects
  #leaflet-control-accordion-layers-5 {
    // PCHs
    input#ac-PCHs:checked + label::before {
      background-color: #00a9e6;
    }

    // UHEs
    input#ac-UHEs:checked + label::before {
      background-color: #004da8;
    }

    // UTEs
    input#ac-UTEs:checked + label::before {
      background-color: #828282;
    }

    // Main Roads
    input#ac-PrincipaisEstradas:checked + label::before {
      background-color: #f00;
    }

    // Other Roads
    input#ac-OutrasEstradas:checked + label::before {
      background-color: #f1962b;
    }
  }

  // Conflicts
  #leaflet-control-accordion-layers-6 {
    // Land
    input#ac-Fundiários:checked + label::before {
      background-color: #d5351d;
    }

    // Natural Resources
    input#ac-RecursosNaturais:checked + label::before {
      background-color: #006837;
    }

    // Violence
    input#ac-Violência:checked + label::before {
      background-color: $black;
    }
  }

  // Boundaries
  #leaflet-control-accordion-layers-7 {
    // Xingu Basin
    input#ac-BaciadoXingu:checked + label::before {
      background-color: #005ce6;
    }

    // Xingu Strip
    input#ac-CorredordoXingu:checked + label::before {
      background-color: #9324af;
    }
  }

  // Places
  #leaflet-control-accordion-layers-8 {
    // Village
    input#ac-Aldeias:checked + label::before {
      background-color: #e69800;
    }

    // RESEX
    input#ac-PolosExtrativistas:checked + label::before {
      background-color: #f50;
    }
  }

  // Tiles
  .leaflet-control-layers-base {
    display: none;
  }
}

// Leaflet Controls for mobile
.leaflet-touch {
  // Top-right Leaflet controls: search
  .geocoder-control {
    width: 34px;
  }

  .geocoder-control-input {
    height: 34px;
  }

  // Bottom-right Leaflet controls: loading, zoom, esri badge, position, attribution and scale
  .leaflet-bar a {
    height: 34px;
    line-height: 34px;
    width: 34px;

    @include breakpoint(ed) {
      height: 26px;
      line-height: 26px;
      width: 26px;
    }
  }
}