चमकदार में लीफलेट के लिए (उन्नत) अनुकूलित पॉपअप कैसे प्रदर्शित करें?

Question

मैं वेब अनुप्रयोगों का निर्माण करने के लिए आर चमकदार का उपयोग कर रहा हूं, और उनमें से कुछ महान पुस्तिकाओं का लाभ उठा रहे हैं।

मैं कस्टम और उन्नत पॉपअप बनाना चाहता हूं, लेकिन मुझे नहीं पता कि आगे कैसे बढ़ना है।

आप देख सकते हैं कि मैं क्या परियोजना मैं github पर इस पोस्ट के लिए बनाई में कर सकते हैं, या सीधे में here

अधिक जटिल पॉपअप है, अजीब मेरी कोड है shinyapp.io, के रूप में मैं एक तरह से एक अजीब तरीके से अनुसंधान और html के संयोजन कर रहा हूँ ..

वहाँ आगे बढ़ने के लिए एक बेहतर तरीका है (वैसे मैं server.R में मेरी custompopup'i 'को परिभाषित देखें)? ऐसे पॉपअप बनाने के लिए अच्छे अभ्यास क्या हैं? यदि मैं मार्कर पर क्लिक करके चार्ट प्रदर्शित करने की योजना बना रहा हूं, तो क्या मुझे उन्हें पहले से ही बनाना चाहिए, या क्या उन्हें 'फ्लाई पर' बनाना संभव है? मैं यह कैसे कर सकता हूं?

इस पर आपके विचारों के लिए अग्रिम धन्यवाद, कृपया अपना उत्तर यहां साझा करने में संकोच न करें या सीधे मेरे जीथब उदाहरणों को बदलने में संकोच न करें!

सादर

Answer 1

मुझे लगता है कि इस पोस्ट अभी भी कुछ प्रासंगिकता है। तो यहां पर मेरा समाधान है, पॉपअप को पर ले जाने के लिए लगभग किसी भी संभावित इंटरफ़ेस आउटपुट को कैसे जोड़ा जाए।

हम हासिल कर सकते हैं ऐसा करने के लिए निम्न चरणों:

• चरित्र पत्रक मानक पॉपअप क्षेत्र के अंदर के रूप में पॉपअप यूआई तत्व डालें। चरित्र के रूप में, यह shiny.tag नहीं है, लेकिन केवल सामान्य div है। जैसे क्लासिक uiOutput("myID")<div id="myID" class="shiny-html-output"><div> बन जाता है।

• पॉपअप को विशेष div, पुस्तिका-पॉपअप-फलक पर डाला जाता है। यदि कोई सामग्री बदलती है तो हम निगरानी करने के लिए एक EventListener जोड़ते हैं। (नोट: पॉपअप गायब हो जाता है, तो इसका मतलब है कि इस div के सभी बच्चों को निकाल दिया जाता है, तो यह दृश्यता का सवाल ही नहीं है, लेकिन अस्तित्व के।)

• जब एक बच्चे, संलग्न है यानी एक पॉपअप है दिखाई दे रहा है, हम पॉपअप के अंदर सभी चमकदार इनपुट/आउटपुट को बांधते हैं। इस प्रकार, निर्जीव uiOutput सामग्री से भरा हुआ है जैसा कि यह माना जाता है। (एक आशा व्यक्त होता गया है चमकदार स्वचालित रूप से इस करता है, लेकिन यह इस उत्पादन रजिस्टर करने के लिए विफल रहता है, के बाद से यह पुस्तिकाएं बैकएंड द्वारा में भर जाता है।)

• पॉप-अप नष्ट कर दिया है, चमकदार भी करने में विफल रहता अनबाइंड यह। समस्या निवारक है, अगर आप एक बार फिर पॉपअप खोलते हैं, और अपवाद फेंकता है (डुप्लिकेट आईडी)। दस्तावेज़ से हटा दिए जाने के बाद, यह अब अनबाउंड नहीं हो सकता है।तो हम मूल रूप से हटाए गए तत्व को एक निपटान के लिए क्लोन करें- div जहां यह ठीक से अनबाउंड हो सकता है और फिर इसे अच्छे से हटा सकता है।

मैं एक नमूना अनुप्रयोग है कि (मुझे लगता है कि) इस समाधान की पूर्ण क्षमताओं से पता चलता बनाया है और मुझे आशा है कि यह काफी आसान बनाया गया है, कि किसी को भी यह अनुकूलित कर सकते हैं। इनमें से अधिकांश ऐप शो के लिए है, इसलिए कृपया क्षमा करें कि इसमें अप्रासंगिक भाग हैं।

library(leaflet) 
library(shiny) 

runApp(
    shinyApp(
    ui = shinyUI(
     fluidPage(

     # Copy this part here for the Script and disposal-div 
     uiOutput("script"), 
     tags$div(id = "garbage"), 
     # End of copy. 

     leafletOutput("map"), 
     verbatimTextOutput("Showcase") 
    ) 
    ), 

    server = function(input, output, session){ 

     # Just for Show 
     text <- NULL 
     makeReactiveBinding("text") 

     output$Showcase <- renderText({text}) 

     output$popup1 <- renderUI({ 
     actionButton("Go1", "Go1") 
     }) 

     observeEvent(input$Go1, { 
     text <<- paste0(text, "\n", "Button 1 is fully reactive.") 
     }) 

     output$popup2 <- renderUI({ 
     actionButton("Go2", "Go2") 
     }) 

     observeEvent(input$Go2, { 
     text <<- paste0(text, "\n", "Button 2 is fully reactive.") 
     }) 

     output$popup3 <- renderUI({ 
     actionButton("Go3", "Go3") 
     }) 

     observeEvent(input$Go3, { 
     text <<- paste0(text, "\n", "Button 3 is fully reactive.") 
     }) 
     # End: Just for show 

     # Copy this part. 
     output$script <- renderUI({ 
     tags$script(HTML(' 
      var target = document.querySelector(".leaflet-popup-pane"); 

      var observer = new MutationObserver(function(mutations) { 
      mutations.forEach(function(mutation) { 
       if(mutation.addedNodes.length > 0){ 
       Shiny.bindAll(".leaflet-popup-content"); 
       }; 
       if(mutation.removedNodes.length > 0){ 
       var popupNode = mutation.removedNodes[0].childNodes[1].childNodes[0].childNodes[0]; 

       var garbageCan = document.getElementById("garbage"); 
       garbageCan.appendChild(popupNode); 

       Shiny.unbindAll("#garbage"); 
       garbageCan.innerHTML = ""; 
       }; 
      });  
      }); 

      var config = {childList: true}; 

      observer.observe(target, config); 
     ')) 
     }) 
     # End Copy 

     # Function is just to lighten code. But here you can see how to insert the popup. 
     popupMaker <- function(id){ 
     as.character(uiOutput(id)) 
     } 

     output$map <- renderLeaflet({ 
     leaflet() %>% 
      addTiles() %>% 
      addMarkers(lat = c(10, 20, 30), lng = c(10, 20, 30), popup = lapply(paste0("popup", 1:3), popupMaker)) 
     }) 
    } 
), launch.browser = TRUE 
) 

नोट: एक, आश्चर्य हो सकता है क्यों स्क्रिप्ट सर्वर साइड से जोड़ा जाता है। मुझे सामना करना पड़ा, अन्यथा, EventListener जोड़ना विफल रहता है, क्योंकि पत्रक मानचित्र अभी तक प्रारंभ नहीं हुआ है। मैं कुछ jQuery ज्ञान के साथ शर्त लगाता हूं कि इस चाल को करने की कोई ज़रूरत नहीं है।

यह हल करना कठिन काम रहा है, लेकिन मुझे लगता है कि यह समय के लायक था, अब पत्रक मानचित्रों को कुछ अतिरिक्त उपयोगिता मिली है। इस फिक्स के साथ मजा लें और कृपया पूछें, अगर इसके बारे में कोई सवाल है!