CODEWITHSUNDEEP
javascripthtmlleafletlegend
George
George

Reputation: 73

Delete "" from legend in Leaflet

Adding a legend to a Leaflet JS map works.

But inside the coloured boxes, there are those "" (double quotes) appearing:

Screenshot

How can I delete those?

Using: 

function getColour(d) {
  switch (d) {
    case '> 2 uur':
      return 'green';
    case '1 - 2 uur':
      return 'yellow';
    case '30 min - 1 uur':
      return 'orange';
    case '< 30 min':
      return 'red';
    default:
      return '#fff';
  }
};

var legend = L.control({
  position: 'bottomright'
});

legend.onAdd = function(mymap) {
  var div = L.DomUtil.create('div', 'info legend');
  grades = ['> 2 uur', '1 - 2 uur', '30 min - 1 uur', '< 30 min'];
  for (var q = 0; q < grades.length; q++) {
    div.innerHTML +=
      '<q style="background:' + getColour(grades[q]) + '"></q> '
      + (grades[q] ? grades[q] + '<br>' : '+');
  }
  return div;
};
legend.addTo(mymap);

Upvotes: 1

Views: 155

Answers (1)

ghybs
ghybs

Reputation: 53280

That is how an HTML <q> (for quotation) element is rendered by most browsers: with quotes around its content, even if empty.

Most modern browsers implement this by surrounding the text in quotation marks.

Easy solution would be to use another tag, e.g. a <span>. Make sure the width is specified.

Or restyle the <q> element, I think you would have to override its :before and :after pseudo selectors. But then you might still need to specify its width.

An even easier solution would simply be to set your <q> elements color to transparent:

q {
  color: transparent;
}

Demo:

var mymap = L.map('map').setView([48.86, 2.35], 11);

function getColour(d) {
  switch (d) {
    case '> 2 uur':
      return 'green';
    case '1 - 2 uur':
      return 'yellow';
    case '30 min - 1 uur':
      return 'orange';
    case '< 30 min':
      return 'red';
    default:
      return '#fff';
  }
};

var legend = L.control({
  position: 'bottomright'
});

legend.onAdd = function(mymap) {
  var div = L.DomUtil.create('div', 'info legend');
  grades = ['> 2 uur', '1 - 2 uur', '30 min - 1 uur', '< 30 min'];
  for (var q = 0; q < grades.length; q++) {
    div.innerHTML +=
      '<q style="background:' + getColour(grades[q]) + '"></q> ' + (grades[q] ? grades[q] + '<br>' : '+');
  }
  return div;
};
legend.addTo(mymap);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
.info q {
  color: transparent;
}

.info {
  background-color: white;
}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<div id="map" style="height: 180px"></div>

Upvotes: 3

Related Questions