2

I would like to change the color in one text

enter image description here

but it looks like it's not a straightforward thing, as I thought before.

One of the solution is here:

QGIS2web pop-up multiple font-types

but it applies to the leaflet code.

I have the map in the OpenLayers version.

In the qgis2web.js file

  currentFeatureKeys = currentFeature.getKeys();
            if (doPopup) {
                popupText += '<li><table>';
                for (var i=0; i<currentFeatureKeys.length; i++) {
                    if (currentFeatureKeys[i] != 'geometry') {
                        popupField = '';
                        if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "inline label") {
                            popupField += '<th>' + layer.get('fieldAliases')[currentFeatureKeys[i]] + 
   ':</th><td>';
                        } else {
                            popupField += '<td colspan="2">';
                        }
                        if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "header label") {
                            popupField += '<strong>' + layer.get('fieldAliases') 
  [currentFeatureKeys[i]] + ':</strong><br />';
                        }
                        if (layer.get('fieldImages')[currentFeatureKeys[i]] != "ExternalResource") {
                            popupField += (currentFeature.get(currentFeatureKeys[i]) != null ? 
   autolinker.link(currentFeature.get(currentFeatureKeys[i]).toLocaleString()) + '</td>' : '');
                        } else {
                            popupField += (currentFeature.get(currentFeatureKeys[i]) != null ? '<img 
    src="images/' + currentFeature.get(currentFeatureKeys[i]).replace(/[\\\/:]/g, '_').trim()  + '" /></td>' : '');
                        }
                        popupText += '<tr>' + popupField + '</tr>';
                    }
                }
                popupText += '</table>';
            }

However, if I could put some font color, it will be applicable for all the columns instead of 1, which I want.

Is there any change to emphasize just one text in my pop-up window?

  for (var i=0; i<currentFeatureKeys.length; i++) {
                    if (currentFeatureKeys[i] != 'geometry') {
                        popupField = '';
                        if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "inline label") {
                            popupField += '<th>' + layer.get('fieldAliases') 
 [currentFeatureKeys[i]] + ':</th><td>';
                        } else {
                            popupField += '<td colspan="2">';
                        }
                        if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "header label") {
                            popupField += '<strong>' + layer.get('fieldAliases')[currentFeatureKeys[i]] + ':</strong><br />';
                        }
                         if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "Wayleave") {
                            popupField += '<italic>' + layer.get('fieldAliases')[currentFeatureKeys[i]] + ':</italic><br />';
                        }
                        if (layer.get('fieldImages')[currentFeatureKeys[i]] != "ExternalResource") {
                            popupField += (currentFeature.get(currentFeatureKeys[i]) != null ? autolinker.link(currentFeature.get(currentFeatureKeys[i]).toLocaleString()) + '</td>' : '');
                        } else {
                            popupField += (currentFeature.get(currentFeatureKeys[i]) != null ? '<img src="images/' + currentFeature.get(currentFeatureKeys[i]).replace(/[\\\/:]/g, '_').trim()  + '" /></td>' : '');
                        }
                        popupText += '<tr>' + popupField + '</tr>';
                    }
                }

I've added the "Wayleave" section, but it doesn't work

3
  • You talk about columns, but it seems you mean rows. There are only two columns, one with data name and one with data value, but there are several rows of data. So, for example, you want to show Wayleave row in different color?
    – TomazicM
    Oct 23 '20 at 12:34
  • Yes, but it looks like I partially sorted it. I've got the label red, however the values next to goes a line down, in which I am not happy with.
    – MKR
    Oct 23 '20 at 12:57
  • Without seeing you code it's impossible to say what is the cause of that. Please edit your question with the right wording (row/column) and the current code.
    – TomazicM
    Oct 23 '20 at 13:28
3

You can use html for the name of the QGIS column.

<span style="color:red"> column </span>

Result within qgis2web leaflet:

enter image description here

EDIT: Only for leaflet I have success with this method. Maybe you can use leaflet for your project. I like leaflet.

1
  • I have to use OpenLayers in this time. Thank you for your solution. I will check it.
    – MKR
    Oct 26 '20 at 10:38
2

Evverything, which applies to the label font in our popup is located in 2 sections:

First section is located in the qgis2web.js file, where we have:

from the 295 line of code

  var clusterFeature;
        if (typeof clusteredFeatures !== "undefined") {
            if (doPopup) {
                for(var n=0; n<clusteredFeatures.length; n++) {
                    clusterFeature = clusteredFeatures[n];
                    currentFeatureKeys = clusterFeature.getKeys();
                    popupText += '<li><table>'
                    for (var i=0; i<currentFeatureKeys.length; i++) {
                        if (currentFeatureKeys[i] != 'geometry') {
                            popupField = '';
                            if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "inline label") {
                            popupField += '<th>' + layer.get('fieldAliases')[currentFeatureKeys[i]] + ':</th><td>';
                            } else {
                                popupField += '<td colspan="2">';
                            }
                            if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "header label") {
                                popupField += '<strong>' + layer.get('fieldAliases')[currentFeatureKeys[i]] + ':</strong><br />';
                            }
                            if (layer.get('fieldImages')[currentFeatureKeys[i]] != "ExternalResource") {
                                popupField += (clusterFeature.get(currentFeatureKeys[i]) != null ? autolinker.link(clusterFeature.get(currentFeatureKeys[i]).toLocaleString()) + '</td>' : '');
                            } else {
                                popupField += (clusterFeature.get(currentFeatureKeys[i]) != null ? '<img src="images/' + clusterFeature.get(currentFeatureKeys[i]).replace(/[\\\/:]/g, '_').trim()  + '" /></td>' : '');
                            }
                            popupText += '<tr>' + popupField + '</tr>';
                        }
                    } 
                    popupText += '</table></li>';    
                }
            }
        } else {
            currentFeatureKeys = currentFeature.getKeys();
            if (doPopup) {
                popupText += '<li><table>';
                for (var i=0; i<currentFeatureKeys.length; i++) {
                    if (currentFeatureKeys[i] != 'geometry') {
                        popupField = '';
                        if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "inline label") {
                            popupField += '<th>' + layer.get('fieldAliases')[currentFeatureKeys[i]] + ':</th><td>';
                        } else {
                            popupField += '<td colspan="2">';
                        }
                        if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "header label") {
                            popupField += '<strong>' + layer.get('fieldAliases')[currentFeatureKeys[i]] + ':</strong><br />';
                        }
                        if (layer.get('fieldImages')[currentFeatureKeys[i]] != "ExternalResource") {
                            popupField += (currentFeature.get(currentFeatureKeys[i]) != null ? autolinker.link(currentFeature.get(currentFeatureKeys[i]).toLocaleString()) + '</td>' : '');
                        } else {
                            popupField += (currentFeature.get(currentFeatureKeys[i]) != null ? '<img src="images/' + currentFeature.get(currentFeatureKeys[i]).replace(/[\\\/:]/g, '_').trim()  + '" /></td>' : '');
                        }
                        popupText += '<tr>' + popupField + '</tr>';
                    }
                }
                popupText += '</table>';
            }
        }

The plugin allowes us to define 3 tyeps of labels (no label, header label and inline label). If we want to have one of them emphasized at some point we should i.e. between the

if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "header label") 

define a new type of label, for instance, the "red label"

    if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "red label") {
                            popupField += '<strong><font color="red">' + 
        layer.get('fieldAliases')[currentFeatureKeys[i]] + ':</font><br /></strong>';
                        }

defining also its major features, like the font color.

The second part if in our layers.js file, where we should go down and find the following section

    var layersList = [lyr_OpenStreetMap_0,lyr_Arae5LLD3H_AreaBreakdown_1,lyr_Arae5LLD3A_Pole_2,lyr_Arae5LLD3B_NewPole_3];

from where we should pick up this one, which plays a major role in the previous part. This is the fieldLabels

Then in the following section, defining all the field for our certain layer:

   lyr_Arae5LLD3A_Pole_2.set('fieldLabels', {'Pole No.': 'inline label', 'X': 'inline label', 'Y': 'inline label', 'Address': 'inline label', 'Pole Type': 'inline label', 'Wayleave': 'red label', 'No. of exi': 'inline label', 'No. of dro': 'inline label', 'Type of cr': 'inline label', 'Hedge Cutt': 'inline label', 'Sufficent ': 'inline label', 'Enclosure': 'inline label', 'Comments': 'inline label', });

we should define the 'red label' after the label (column) we want to change. In my case, it was a Wayleave column.

enter image description here

In terms of keeping both the labels and value in the same row, we have to remove the <br/> and next make a code like this:

   if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "red label") {
                            popupField += '<b><font color="red">' + 
   layer.get('fieldAliases')[currentFeatureKeys[i]] + ':</font></b></th><td>';
                        } else {
                            popupField += '<td colspan="2">';
                        }

an alternative, but a bit clumsy solution is:

     if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "header label") {
                            popupField += '<strong>' + layer.get('fieldAliases')[currentFeatureKeys[i]] + ':</strong>&nbsp&nbsp&nbsp&nbsp';
                        }

but again, this is a short-sighted approaching, because of the fixed space value.

enter image description here

7
  • Is this answer or edit to the question? If it's edit to the question, then please edit the question and delete this answer.
    – TomazicM
    Oct 23 '20 at 14:50
  • This is an answer mate
    – MKR
    Oct 23 '20 at 15:02
  • I thought you complained about N being in a new line, and I see it's still in a new line.
    – TomazicM
    Oct 23 '20 at 15:19
  • Yes, but the goal has been somewhat achieved. The N in the new line is a new question isn't it?
    – MKR
    Oct 23 '20 at 15:20
  • Yes, but it's not really a GIS question, it should be posted on StackOverflow site. I would recommend to check in the debugger the finally produced HTML code in the popup. There it should be clear why N goes to a new line.
    – TomazicM
    Oct 23 '20 at 15:26

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.