[GIS] How to show marker information into a tab

javascriptleafletmarkerspopup

I have a lot of information that I want to show on a Leaflet Popup. For these type of markers (I have four different layers and each marker show different information) I have three elements:

enter image description here

  • General description
  • Images
  • Video

But I want to show them as tabs inside the Popup. Something like these:

enter image description here

To add each icon I use these method:

    L.marker([20.683, -88.568], {icon: tiloIcon}).bindPopup('<p><strong><center>        Chichén Itzá</center></strong><br><strong>Cultura</strong><br />Maya <br/> <strong>Descripción</strong><br />Es uno de los sitios arqueológicos más importantes de la Península de Yucatán. Es la ciudad más impresionante del periodo Clásico maya y fue inscrita en la lista del Patrimonio de la Humanidad de la UNESCO.<br /><a href="http://superexample.com" target="_blank">Ver ficha completa</a></p>         <img src="emoji.png"  style="width:200px;">   <iframe width="300" height="200" src="https://www.youtube.com/embed/kd8fBAaKU90" frameborder="0" allowfullscreen></iframe>').addTo(sitios),

Additionally, I want that the title tab disappear and show it at the top of the popup

Do you know any way to put the information on tabs?

Best Answer

Before you create your markers, create a variable that will hold your popup tabs content, e.g.:

var content = '<div class="tabs">' +

            '<div class="tab" id="tab-1">' +
            '<div class="content">' +
            '<b>Tab 1 content</b>' +
            '</div>' +
            '</div>' +

            '<div class="tab" id="tab-2">' +
            '<div class="content">' +
            '<b>Tab 2 content</b>' +
            '</div>' +
            '</div>' +

            '<div class="tab" id="tab-3">' +
            '<div class="content">' +
            '<b>Tab 3 content</b>' +
            '</div>' +
            '</div>' +

            '<ul class="tabs-link">' +
            '<li class="tab-link"> <a href="#tab-1"><span>Tab 1</span></a></li>' +
            '<li class="tab-link"> <a href="#tab-2"><span>Tab 2</span></a></li>' +
            '<li class="tab-link"> <a href="#tab-3"><span>Tab 3</span></a></li>' +
            '</ul>' +
        '</div>';

Then bind that content to your marker bindPopup(content):

 L.marker([20.683, -88.568], {icon: tiloIcon}).bindPopup(content);

Working example on codepen: http://codepen.io/dagmara223/pen/LxwYrY (example is with polygons, but binding popup method works the same)

Related Question