1

I am using leaflet 1.0.3 with bootstrap 4 and I need to set a better styling for the popups, I'm thinking in probably a bootstrap modal or in a sidebar in which every time someone clicks the geoJSON layer the information is showed in the sidebar, I'm not an expert in formatting the ugly white popup into some good looking table, is there a way to do it.

I use the default way stated in the leaflet documentation:

function popUp(f,l){
            var out = [];
            if (f.properties){
          for(key in f.properties){
          out.push(key+""+": "+f.properties[key]);
            }
          l.bindPopup(out.join("<table>" +"</ul>" + "- " + "<em>" ));
                    }
        };

My reasoning is not enough, I understand that doing the JS join I can do some formatting, still, i am a bit lost in wich line should I begin, I can grasp some hints, like there is an array and some joining.

continuing(today) with the idea and understanding better the function, the GeoJSON data is transformed into an array, then it gets into an if to check the KEY and the properties(attributes) of each KEY, after this process using the javascript array.push() the data can be formatted using some HTML, finally, the using the leaflet bindPopup the array gets joined with another formatting, such as a <br>.

that's what I have learned so far, I'm looking into transforming the array into an HTML table, for now, if I find the answer I will gladly post it in here.

I'm learning to code just since March, so I'm still not very good yet.

1

I'm not that familiar with bootstrap so someone may be able to develop on this, but you can do quite a bit of styling with CSS. The selectors you're interested in are:

  • .leaflet-popup-tip
  • .leaflet-popup-content-wrapper
  • .leaflet-popup-tip-container.

Then just use CSS. if you want different styles for different types of popups use different classes.

There are some nice examples here and here.

For styling tables with bootstrap I think you just use normal html tables with the base class .table, so: <table class="table">, lots more detail here.

  • okay, there is some CSS styling and it looks decent, I will continue looking for some more detailed formatting, thanks for your tips – Guillermo Cid Jun 22 '17 at 20:06
  • Glad to be of help. Why not post up what you've got so far so it can be improved upon. It will help focus suggestions on your specific use case. – RoperMaps Jun 22 '17 at 20:51
0

I think RopeyMaps has the answer to this, but if you are looking to create an overlay sidebar with bootstrap 4 I think list groups may be of interest or even cards if you are planning to show images.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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