Home Leaflet event listener for expanding infobox
Reply: 0

Leaflet event listener for expanding infobox

user2393
1#
user2393 Published in April 22, 2018, 10:11 pm

I have a simple leaflet map with a GeoJSON point layer. I want an infobox instead of the regular pop-up, so, in HTML, I have created the following:

<div id="panoutitlu" class="info-container" style="z-index: 601">
   <div class="info-title">
      <h1>Selectați ceva</h1>
  </div>
  <div class="info-body" id="corp">
   <div class="info-content-container">
    <div class="info-content" id="panoutext"></div>
 </div>
 </div>
</div>

When clicking on one of the points in the layer, the div named info-title gets populated with an attribute from the GeoJSON, as follows:

function onEachFeature(feature, layer) {
  layer.on({
     click: function populate() {
        document.getElementById('panoutitlu').innerHTML = feature.properties.adresa;
     });

The thing I can't get to work is how to expand the div when the info-title is clicked, similar to this map. I want to recreate the exact behaviour, including the smooth transition. That's why I took the CSS from it and changed a few sizes and fonts:

.info-title {
 height: 80px;
 font-family: 'Fira Sans Condensed';
 font-size: 30px;
 display: flex;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 user-select: none;
 color: #FFF;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 }

.info-content {
 padding: 0 8% 24px 8%;
 margin: 0 auto;
 background: #385c54;
 overflow-y: scroll;
 font-family: 'Fira Sans Condensed';
 font-size: 1rem;
 line-height: 1.25em;
 font-weight: 300;
}

.info-container {
 position: absolute;
 overflow-y: hidden;
 bottom: 0;
 right: 250px;
 z-index: 1000;
 background: #385c54;
 cursor: pointer;
 width: 300px;
 height: 60vh;
 color: #FFF;
 font-family: 'Fira Sans Condensed';
 font-size: 18px;
 transition: all 0.4s ease-in-out;
 transform: translateY(calc(100% - 80px));
 }

.info-container.info-active {
 transform: translateY(0);
 }

.info-body {
 margin-top: 80px;
 overflow-y: scroll;
 overflow-x: hidden;
 position: relative;
 height: 80%;
}

In JavaScript, I tried adding an event listener:

document.getElementById('panoutitlu').addEventListener("click", toggle('corp') );

but it didn't work.

Hopefully, somebody can help.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.315049 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO