листовка DC - динамические маркеры

Question

У меня есть карта, построенная с листовкой и dc.js и включающей dc.leaflet .

Данные передаются через PHP в JSON, и все отображается и фильтруется без проблем. Существует разное количество маркеров в зависимости от данных, но где-то около 40-50 одновременно, и каждый показывает стандартный маркер по умолчанию.

Я хотел бы показать другой маркер на основе поля данных, чтобы было доступно около 6.

Это объект постоянного тока:

var markerMap = dc_leaflet.markerChart(".map",group1)
    .dimension(mapDim)
    .group(mapDimGroup)
    .width(450)
    .height(630)
    .center([41.08763212467916, -77.37066651228817])
    .zoom(10)
    .cluster(false) //Turn off Clustering 
    .valueAccessor(function(kv) {return kv.value.count;})
    .locationAccessor(function(kv) {return kv.value.geo;})
    .popup(function(kv) {return kv.key;})

В соответствии с Документами я должен иметь возможность использовать .icon () , но это, похоже, не работает.

Так например

if d.icon = 'icon1' then icon1.png

и т.д ....

Есть ли у кого-нибудь опыт добавления динамических значков?

Приветствия

Answer 1

Это работает - просто Leaflet ожидает увидеть свои собственные классы, указанные для значков, а не сырые URL.

Глядя на источник dc.leaflet.js, значок по умолчанию указывается так:

var _icon = function(d, map) {
    return new L.Icon.Default();
};

Поиск этого класса в документации Leaflet :

Пример использования

var myIcon = L.icon({
    iconUrl: 'my-icon.png',
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76],
    shadowUrl: 'my-icon-shadow.png',
    shadowSize: [68, 95],
    shadowAnchor: [22, 94]
});

Скажем, мы хотим отобразить октокаты для всех солнечных установок в Болгарии.

Сначала нам нужно изменить сокращение, чтобы поле type оставалось в исходных строках данных. Это своего рода боль, но это цена, которую мы платим за хорошие автоматические сокращения и фильтрацию, которые дает нам перекрестный фильтр:

  var facilitiesGroup = facilities.group().reduce(
      function(p, v) {
          p.count++;
          p.type = v.type;
          return p;
      },
      function(p, v) {
          p.count--;
          return p;
      },
      function() {
          return {count: 0, type: null};
      })

Теперь мы можем размещать октокаты везде, где видим, что тип солнечный в приведенных данных. Их много, поэтому давайте отобразим их в 20x20px:

      .icon(function(kv) {
          if(kv.value.type === 'solar')
              return L.icon({
              iconSize: [20, 20],
              iconUrl: 'https://dc-js.github.io/dc.leaflet.js/GitHub-Mark-64px.png'});
          else return new L.Icon.Default();
      })

Да! Мы осмелили Болгарию!

Пример скрипки.