2016-11-17 18 views
1

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

次の例では、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); 
    } 
    ") 

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

+0

私は明日見ようとします。 – timelyportfolio

答えて

0

この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); 
} 
    ") 
+0

Bhaskar Karambelkarは、不透明度のためのリーフレットプラグインhttps://twitter.com/bhaskar_vk/status/800857064847405057を発見しました。これは、leaflet.extrasに追加する場合、より堅牢なソリューションを提供する可能性があります。 – timelyportfolio

+0

この機能がShinyの内部ではうまくいかない理由についての洞察はありますか?私はあなたの正確なコードを基本的なShiny Leafletア​​プリに入れ、不透明度を切り替える代わりに、スライダを物理的にドラッグして地図ウィンドウをパンします。 – Lauren

関連する問題