javascript - Add opacity slider in R leaflet -
how can add slider in r leaflet app, controls opacity of specific layer? application, don't want use shiny (suggested here: adding sliders in r leaflet app), since has exported stand-alone html page.
in following example, have 2 cartodb layers want control opacity 1 of them, basemap layer.
leaflet.js - set opacity layergroup slider contains useful information how add such slider. also, found out htmlwidgets::onrender function can used add javascript code htmlwidget.
so tried following code, doesn't work. slider visible, doesn't anything. moreover, map pans when dragging slider.
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); } ")
anyone can me out? in advance!
this 1 tricky, , confess not sure solution below proper way handle, work me.
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); } ")
Comments
Post a Comment