Rリーフレットに不透明スライダを追加

Question

特定のレイヤの不透明度を制御するRリーフレットアプリケーションにスライダを追加するにはどうすればよいですか？このアプリケーションでは、スタンドアローンのHTMLページにエクスポートする必要があるため、光沢を使用することは望ましくありません（ここで提案します：adding sliders in R leaflet app）。

次の例では、2つのCartoDBレイヤーを用意しています。これらのレイヤーの1つ、たとえばベースマップレイヤーの不透明度を制御したいとします。

Leaflet.js - Set Opacity to LayerGroup with Sliderには、このようなスライダの追加方法が記載されています。また、htmlwidgets :: onRender関数を使用してJavaScriptコードをhtmlwidgetに追加できることがわかりました。

私は次のコードを実行しようとしましたが、これはうまくいきません。スライダーは表示されますが、何もしません。さらに、スライダをドラッグしたときに地図がパンします。

library(leaflet) 
leaflet() %>% 
    addProviderTiles(provider = "CartoDB.PositronNoLabels", group="Basemap", layerId = 123) %>% 
    addTiles("http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png", group="Labels") %>% 
    addLayersControl(baseGroups="Basemap", overlayGroups = "Labels") %>% 
    addControl(html="<input id=\"slide\" type=\"range\" min=\"0\" max=\"1\" step=\"0.1\" value=\"1\" onchange=\"updateOpacity(this.value)\">") %>% 
    onRender(" 
    function updateOpacity(value) { 
     this.getLayer(123).opacity(value); 
    } 
    ") 

私を助けることができる人は誰ですか？前もって感謝します！

Answer 1

この1つは扱いにくかったので、以下の解決策が適切な方法であるとは分かりませんが、私にとってはうまくいきます。

library(leaflet) 
leaflet() %>% 
    addProviderTiles(provider = "CartoDB.PositronNoLabels", group="Basemap", layerId = 123) %>% 
    addTiles("http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png", group="Labels") %>% 
    addLayersControl(baseGroups="Basemap", overlayGroups = "Labels") %>% 
    addControl(html="<input id=\"slide\" type=\"range\" min=\"0\" max=\"1\" step=\"0.1\" value=\"1\">") %>% 
    onRender(" 
function(el,x,data){ 
    var map = this; 
    var evthandler = function(e){ 
    var labels = map.layerManager._byGroup.Labels; 
    Object.keys(labels).forEach(function(el){ 
     labels[el]._container.style.opacity = +e.target.value; 
    }); 
    }; 
    $('#slide').on('mousemove',L.DomEvent.stopPropagation); 
    $('#slide').on('input', evthandler); 
} 
    ")