Удалить "" из легенды в Leaflet - PullRequest
Новая
       33

Удалить "" из легенды в Leaflet

0 голосов
/ 29 апреля 2018

Работает добавление легенды к карте Leaflet JS.

Но внутри цветных коробок появляются "" (двойные кавычки):

Screenshot

Как я могу удалить их?

Использование: 

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);

1 Ответ

0 голосов
/ 29 апреля 2018

Таким образом элемент HTML <q> (для цитата ) отображается большинством браузеров: с кавычками вокруг его содержимого, даже если оно пустое.

Большинство современных браузеров реализуют это, заключая текст в кавычки.

Простым решением будет использование другого тега, например <span>. Убедитесь, что ширина указана.

Или измените стиль элемента <q>, я думаю, вам придется переопределить его псевдоселекторы :before и :after. Но тогда вам все равно может потребоваться указать его ширину.

Еще более простым решением было бы просто установить <q> элементы color на transparent: 

q {
  color: transparent;
}

Демо-версия: 

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/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

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