I have a map displaying multiple locations loaded from a JSON file. The locations are contained in a MySQL database along with various variables for each location including whether or not the location has associated social media pages. Since not all locations have all of the social media pages some of these fields are empty.

Clicking on a location brings up a popup window which displays the location's name with clickable social media icons below it.

map popup example

I want to exclude the social media icons for empty fields and have tried to write "if" statements to do this but as a Javascript beginner so far have not managed to do this successfully.

I've uploaded my code to JSFiddle but can't get it to display properly there, although my map is displaying correctly on MAMP on my computer (I did try changing the JSON and CSS files to online versions but the map still didn't display properly so I reverted to the original code). The current code shows all the social media icons regardless of whether or not there are entries for all of them associated with that location. This is the JSFiddle link:


Is it possible to place "if" statements within the following "if" statement to filter out the empty variables from the popup?

          if (cfeatures.length == 1) {
        popup_content.innerHTML = '<strong>' + cfeatures[0].get('name') + '</strong><br /><a href="https://www.facebook.com/' + cfeatures[0].get('facebook') + '" target="_blank"><div class="facebook30"></div></a> <a href="https://plus.google.com/' + cfeatures[0].get('googleplus') + '" target="_blank"><div class="googleplus30"></div></a> <a href="https://www.instagram.com/' + cfeatures[0].get('instagram') + '" target="_blank"><div class="instagram30"></div></a> <a href="https://twitter.com/' + cfeatures[0].get('twitter') + '" target="_blank"><div class="twitter30"></div></a> <a href="https://untappd.com/' + cfeatures[0].get('untappd') + '" target="_blank"><div class="untappd30"></div></a> <a href="' + cfeatures[0].get('web') + '" target="_blank"><div class="website30"></div></a> ';

You can use the same method you're using to get the social info from the feature. In this code i'm assuming that if feature has "facebook" then it has the rest of social links.

if (cfeatures.length == 1) {
  if (cfeatures[0].get('facebook')){
    // Show social buttons
  else {
    // Show only name
  • Thanks very much Jose, that's a great help. I was struggling to find the correct syntax (I thought I needed to write something like if cfeatures[0].get('Facebook') is not equal to null). The features have a mixture of social media links so I needed to write if statements for each one individually. In case anyone else is looking to do something similar this is the relevant code: jsfiddle.net/us6twLfk – MrAndySweet May 16 '16 at 14:02
  • Well done! You're welcome! =) – Jose Hermosilla Rodrigo May 16 '16 at 14:10

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.