Coder Social home page Coder Social logo

clbenoit / appsilon-homework Goto Github PK

View Code? Open in Web Editor NEW
0.0 0.0 0.0 92 KB

Visualize biodiversity data from the Global Biodiversity Information Facility.

Home Page: https://omicsverse.fr/app/appsilon-homework

R 97.27% SCSS 1.85% JavaScript 0.88%
biology leaflet occurrences photos timeline visualization

appsilon-homework's Issues

Leafltet clickable markers do not trigger input$MAPID_marker_click when data is reactive

I don"t get why this code works :

box::use(
  reactable,
  shiny[h3, moduleServer, NS, tagList, fluidRow, column,observe,req,icon,
        uiOutput,renderUI,img,observeEvent],
  leaflet[makeIcon,leafletOutput,renderLeaflet,addTiles,setView,addProviderTiles,addMarkers,leaflet],
  dplyr[`%>%`,filter],
)
#' @export
ui <- function(id) {
  ns <- NS(id)
  tagList(
    fluidRow(column(width = 12,
            leafletOutput(outputId = ns("leafletMap")),
            uiOutput(ns("imageOutput"))
    ))
  )
}

#' @export
server <- function(id, data, session) {
  moduleServer(id, function(input, output, session) {

    data <- data.frame(
       id = c(1, 2, 3),
       latitudeDecimal = c(51.505, 51.51, 51.52),
       longitudeDecimal = c(-0.09, -0.1, -0.12),
       individualCount = c("Marker 1", "Marker 2", "Marker 3")
     )

    output$leafletMap <- renderLeaflet({
      leaflet(data = data) %>%
        addTiles() %>%
        addMarkers(
          ~longitudeDecimal, ~latitudeDecimal,
          icon = icon("location-dot"), popup = ~individualCount, label = ~individualCount,
          layerId = ~id
        )
    })

    ##### THIS WORKS ONLY WHEN THE DATA PROVIDED TO LEAFLET IS NOT REACTIVE I DON'T GET WHY ####
    observeEvent(input$leafletMap_marker_click, {
      # Get the information about the clicked marker
      click_info <- input$leafletMap_marker_click
      print(click_info)

      # Check if a marker was clicked
      if (!is.null(click_info)) {
        # Extract the id of the clicked marker
        clicked_id <- data$id[data$longitudeDecimal == click_info$lng & data$latitudeDecimal == click_info$lat]

        # Print the id to the console (you can use it as needed)
        print(clicked_id)
      }
    })
  })

While this one don't...

box::use(
  reactable,
  shiny[h3, moduleServer, NS, tagList, fluidRow, column,observe,req,icon,
        uiOutput,renderUI,img,observeEvent],
  leaflet[makeIcon,leafletOutput,renderLeaflet,addTiles,setView,addProviderTiles,addMarkers,leaflet],
  dplyr[`%>%`,filter],
)
#' @export
ui <- function(id) {
  ns <- NS(id)
  tagList(
    fluidRow(column(width = 12,
            leafletOutput(outputId = ns("leafletMap")),
            uiOutput(ns("imageOutput"))
    ))
  )
}

#' @export
server <- function(id, data, session) {
  moduleServer(id, function(input, output, session) {

    # data <- data.frame(
    #   id = c(1, 2, 3),
    #   latitudeDecimal = c(51.505, 51.51, 51.52),
    #   longitudeDecimal = c(-0.09, -0.1, -0.12),
    #   individualCount = c("Marker 1", "Marker 2", "Marker 3")
    # )

    output$leafletMap <- renderLeaflet({
      leaflet(data = data()) %>%
      #leaflet(data = data) %>%
        addTiles() %>%
        addMarkers(
          ~longitudeDecimal, ~latitudeDecimal,
          icon = icon("location-dot"), popup = ~individualCount, label = ~individualCount,
          layerId = ~id
        )
    })

    ##### THIS WORKS ONLY WHEN THE DATA PROVIDED TO LEAFLET IS NOT REACTIVE I DON'T GET WHY ####
    observeEvent(input$leafletMap_marker_click, {
      # Get the information about the clicked marker
      click_info <- input$leafletMap_marker_click
      print(click_info)

      # Check if a marker was clicked
      if (!is.null(click_info)) {
        # Extract the id of the clicked marker
        clicked_id <- data$id[data$longitudeDecimal == click_info$lng & data$latitudeDecimal == click_info$lat]

        # Print the id to the console (you can use it as needed)
        print(clicked_id)
      }
    })
  })

So I skip displayed picture from clickable markers for now... ๐Ÿ˜ž

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.