CODEWITHSUNDEEP
javascripthtmlleafletinnerhtml
liso_maps
liso_maps

Reputation: 27

Make text color in innerHTML change depending on value in GeoJSON

When I hover over different counties on my map, a div updates whether or not the county voted republican or democratic in the 2020 election (among other things). It will either say it voted republican or democrat in a <h2> tag.

I have a column in the GeoJSON that has either red or blue hex codes depending on the majority vote of the county. How can I pull the value from that column in the GeoJSON to change the color of the text displayed in the div?

Here's a screenshot of the div

enter image description here

I want to make the <h2> text color (in this county's case "Democrat") correspond to the elecVaxData_voteColor value. How can I do this?

TIA and let me know if more info is needed.

Here's the code

    var map = L.map("map", {
    center: [40, -101],
    zoom: 5,
  });

  // add basemap
  L.tileLayer.provider("CartoDB.PositronNoLabels").addTo(map);

  // add basemap labels
  map.createPane("baselabels");
  map.getPane("baselabels").style.zIndex = 600;
  L.tileLayer
    .provider("CartoDB.PositronOnlyLabels", {
      pane: "baselabels",
      interactive: false,
      attribution:
        '| <a href="https://data.cdc.gov/Vaccinations/COVID-19-Vaccinations-in-the-United-States-County/8xkx-amqh/data">County data</a> | <a href="https://data.cdc.gov/Vaccinations/COVID-19-Vaccinations-in-the-United-States-Jurisdi/unsk-b7fc/data">State data</a> | Map: <a href="https://weircf.wixsite.com/e-portfolio">Chip Weir</a>',
    })
    .addTo(map);

  var infoCounties = L.control();
  infoCounties.onAdd = function (map) {
    this._div = L.DomUtil.create("div", "info"); // create a div with a class "info"
    this.update();
    return this._div;
  };

  // method that we will use to update the control based on feature properties passed
  infoCounties.update = function (props) {
    this._div.innerHTML = props
      ? "<b>" +
        props.elecVaxData_county +
        ", " +
        props.elecVaxData_Recip_State +
        " (" +
        props.elecVaxData_PopClass +
        ")" +
        "</b><br /><b>" +
        props.elecVaxData_Series_Complete_Pop_Pct +
        "</b>" +
        " of the population is fully vaccinated " +
        "</b><br /><br />" +
        "This county voted majority " +
        "<h2 style = 'color: props.elecVaxData_voteColor;'>" +
        props.elecVaxData_full +
        "</h2>" +
        " in the 2020 Presidential election"
      : "Hover over a county";
  };
  infoCounties.addTo(map);

Upvotes: 0

Views: 68

Answers (1)

Falke Design
Falke Design

Reputation: 11338

You are on the right way. You need to add the color in the css style. You have done this but escaped the string wrong, this:

"<h2 style = 'color: props.elecVaxData_voteColor;'>" +

should be:

"<h2 style = 'color: "+props.elecVaxData_voteColor+";'>" +

Upvotes: 1

Related Questions