листовка R, как сделать кластерную иконку, связанную со статистикой детей?

Question

Я хотел бы настроить внешний вид кластерных маркеров в приложении Leaflet / Shiny на основе суммы атрибута дочерних маркеров.

Это похоже на эту проблему , которая делает цвет значка кластеров на основе количества детей. Что, если я хочу настроить иконку на основе суммы землетрясений?

В чистом приложении javascript кажется, что я должен иметь возможность установить пользовательское свойство для отдельного маркера, а затем получить к нему доступ из iconCreateFunction, как это было сделано в в этом примере .

Но я добавляю маркер с addCircleMarkers и addMarkers из листовки для R, и, похоже, я не могу добавить произвольный атрибут к генерируемым маркерам. Код ниже работает, но это не работает, если я раскомментирую две строки (mag = ~mag и sum += markers[i].mag;)

leaflet(quakes) %>% addTiles() %>% addMarkers(
  # mag = ~mag,
  clusterOptions = markerClusterOptions(
  iconCreateFunction=JS("function (cluster) {    
    var markers = cluster.getAllChildMarkers();
    var sum = 0; 
    for (i = 0; i < markers.length; i++) {
    //  sum += markers[i].mag;
      sum += 1;
    }
    return new L.DivIcon({ html: '<div><span>' + sum + '</span></div>'});

  }")

  )
)

Я подумал об использовании label= опции addMarkers, а затем проанализировал ее из Javascript. Но маркеры, доступные с помощью getAllChildMarkers() на кластере маркеров в JS, похоже, не обладают свойством label.

Я также думал о передаче кадра данных из R в буклет (JS), как-нибудь, может быть, , как в этом примере , или , это ...?

Answer 1

нашел мой ответ. Похоже, я могу поместить произвольное свойство в options= в addMarker:

leaflet(quakes) %>% addTiles() %>% addMarkers(
  options = markerOptions(mag = ~mag),
  clusterOptions = markerClusterOptions(
  iconCreateFunction=JS("function (cluster) {    
    var markers = cluster.getAllChildMarkers();
    var sum = 0; 
    for (i = 0; i < markers.length; i++) {
      sum += Number(markers[i].options.mag);
//      sum += 1;
    }
    return new L.DivIcon({ html: '<div><span>' + sum + '</span></div>'});
  }")
  )
)