Scroll in layer menu

[Jean-Michel Vien]

Hi,

I am making a map with over 20 layers or marker group. The problem is that for user with lower resolution than mine or with mobile devices can't see all layers since the menu is longer than screen.... it also apply while I am not in fullscreen mode, I can't see the lastest items in the menu unless I go to fullscreen.

Is it possible to have a scroll bar when the menu size is higher than the div size ?

[aston...@gmail.com]

The only example I've seen of something like what you want to do is at http://tools.wmflabs.org/geohack/geohack.php?pagename=Kuala_Lumpur&params=3_8_51_N_101_41_36_E_type:city_region:MY

[autod...@gmail.com]

Have you thought about writing your own layer controller?

[Jean-Michel Vien]

‎Not at all... I was wondering if there was an easy way to go... I am far from being javascript dev...

Jean-Michel Vien

Sent from my BlackBerry 10 smartphone‎

From: autod...@gmail.com Sent: Thursday, March 13, 2014 16:44 To: leafl...@googlegroups.com Reply To: leafl...@googlegroups.com Subject: [Leaflet] Re: Scroll in layer menu

--

---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/FfMifbzrptY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Charlie Geiger]

I was able to implement this into my project. If you have mobile and desktop users running the same application it requires some trickery in terms of setting css to hide/display elements based upon the device / window width. Here is part of what I have done to provide a completely different UI/UX to mobile and desktop users.

JavaScript/jQuery

//Create desktop layer control 

var layerControlDesktop = new L.control.layers( baseLayers, overlays, {collapsed: true} );

layerControlDesktop.addTo(map);

//Create mobile layer control

var layerControlMobile = new L.control.layers( baseLayers, overlays, {collapsed: false} );

layerControlMobile.addTo(map);

//Append layer control to specific div

$('#yourWrapperDiv').append( layerControlMobile.onAdd(map) ).addClass('mobileSettings');

CSS

/* MOBILE */

@media(max-width:500px) {

    .leaflet-control-layers:nth-of-type(1){

        display: block;

    }

    .leaflet-control-layers:nth-of-type(2){

        display: none;

    }

    #yourWrapperDiv {

        max-height: 150px;

        overflow-x: hidden;

        overflow-y: scroll;

        -webkit-overflow-scrolling: touch;

    }

}

/* DESKTOP */

@media(min-width:500px) {

    .leaflet-control-layers:nth-of-type(1){

        display: none;

    }

    .leaflet-control-layers:nth-of-type(2) {

        display: block;

    }

}

The idea then would be to set a max height to the specific div that you appended the layer menu to so that mobile users can scroll, and the desktop users get the regular native layer menu. The next step after getting the mobile layers nested inside of a div would be to style those list items differently so they do not look out of place. Another good idea would be to have the height of the wrapper toggle, I currently have my inside of an expandable div that responds to touch input and it saves space for when the user does not need access to the options. I attached an image to give you an idea of what you can do in terms of completely obfuscating the original layer menu into something new.

[Jean-Michel Vien]

Thanks ! I'll test it soon.

Thanks again !

Jean-Michel Vien

Sent from my BlackBerry 10 smartphone‎

From: Charlie Geiger Sent: Thursday, March 13, 2014 21:07

To: leafl...@googlegroups.com Reply To: leafl...@googlegroups.com Subject: [Leaflet] Re: Scroll in layer menu

[Jean-Michel Vien]

Solved by a reply into a similar post made after mine:

Bryan McBride

Mar 13 (1 hour ago)

The easies thing to do is set a max-height on the layer control and allow users to scroll by overriding the leaflet-control-layers class with something like this:

.leaflet-control-layers {

  max-height: 200px;

  overflow: auto;

}

BRYAN