leafgl Update Leaflet.glify to commit a384fae. (WIP)

Update Leaflet.glify to commit a384fae. (WIP)

Open trafficonese opened this issue 3 years ago • 0 comments

Since Leaflet.glify switched to Typescript, popups were throwing errors with the current method. I managed to get it working, but I dont really understand what or where the problem was.

The leaflet.glify bundle of this PR was built with commit a384fae.

Several new arguments (hover, hoverWait, sensitivity, sensitivityHover, pane) were introduced, which should work for the normal functions (not the *Src, *Fl, *Minimal functions). I would wait for #46 and #47 to be merged, before implementing the new arguments there.

One error keeps showing up in the browser, when using the shiny App below. After changing some parameters and zooming, this error shows up repeatedly in the console. If the shiny App is changed so that all the leafgl stuff is happening in an observer using leafletProxy, no error appears. So, this might be entirely a leaflet bug, since the error also appears with leaflet functions only. This looks very similar.

Uncaught TypeError: t is undefined
     Pt http://127.0.0.1:7358/leaflet-1.3.1/leaflet.js:5
     _getMapPanePos http://127.0.0.1:7358/leaflet-1.3.1/leaflet.js:5
     containerPointToLayerPoint http://127.0.0.1:7358/leaflet-1.3.1/leaflet.js:5
     containerPointToLatLng http://127.0.0.1:7358/leaflet-1.3.1/leaflet.js:5
     setZoomAround http://127.0.0.1:7358/leaflet-1.3.1/leaflet.js:5
     _performZoom http://127.0.0.1:7358/leaflet-1.3.1/leaflet.js:5

Test App with Error (leafgl)

library(sf)
library(shiny)
library(shinyjs)
library(leaflet)
library(leafgl)
library(mapview)
lines = suppressWarnings(st_cast(trails, "LINESTRING"));
lines = st_transform(lines, 4326)[1:100,]
gadm = suppressWarnings(st_cast(st_as_sf(leaflet::gadmCHE), "POLYGON"))
gadm = st_transform(gadm, 4326)

ui <- fluidPage(
  useShinyjs(),
  tags$head(tags$style(".inpts {display: inline-flex;}
                        .inpts div {padding-right: 14px;}
                       ")),
  div(class="inpts",
      checkboxInput("border", "Border of Polygons", width = "150px"),
      checkboxInput("source", "Source Data", width = "150px"),
      checkboxInput("popup", "Popup = TRUE", width = "150px"),
      checkboxInput("popup_form", "Popup as Formula", width = "150px"),
      checkboxInput("hover", "Hover", width = "150px"),
      sliderInput("sensitivityHover", "sensitivityHover Points", 0.01, 3, value = 0.4, step = 0.01),
      sliderInput("weight", "Line Weight", 1, 10, value = 2, step = 1),
      sliderInput("opacity", "Opacity", 0.1, 1.5, value = 0.8, step = 0.1),
      sliderInput("hoverWait", "hoverWait", 10, 2000, value = 120, step = 10)
  ),
  leafletOutput("map", height = 600),
  splitLayout(cellWidths = c("50%", "50%"),
              div("Clicks",verbatimTextOutput("click")),
              div("Hover",verbatimTextOutput("hover")))
)
server <- function(input, output, session) {
  output$map <- renderLeaflet({
    ## Arguments ##############
    border = input$border
    source = input$source
    hover = input$hover
    hoverWait = input$hoverWait
    popup = popup1 = popup2 = input$popup
    popup_form = input$popup_form
    if (popup && popup_form) {
      popup = ~VARNAME_1
      popup1 = ~address
      popup2 = ~FGN
    }
    sensitivityHover = input$sensitivityHover
    weight = input$weight
    opacity = input$opacity
    cat(paste("\n",
              "border: ", border, "\n",
              "source: ", source, "\n",
              "hover: ", hover, "\n",
              "hoverWait: ", hoverWait, "\n",
              "popup: ", popup, "\n",
              "sensitivityHover: ", sensitivityHover, "\n",
              "weight: ", weight, "\n",
              "opacity: ", opacity, "\n"))

    ## Remove Leaflet Glify with JS ##############
    # runjs("
    # if (L.glify && L.glify !== undefined) {
    #   L.glify.Lines.instances.pop();
    #   L.glify.Points.instances.pop();
    #   L.glify.Shapes.instances.pop();
    # }")

    ## Map ##############
    leaflet() %>%
      addTiles() %>%
      leaflet::addMapPane("myownpane", zIndex = 490) %>%
      leaflet::addMapPane("myownpane1", zIndex = 500) %>%
      leaflet::addMapPane("myownpane2", zIndex = 510) %>%
      addGlPolygons(
        data = gadm,
        layerId = gadm$OBJECTID,
        color = ~NAME_1,
        fillOpacity = opacity,
        popup = if(isFALSE(popup)) {NULL} else {popup},
        # hover = if(hover) {~NAME_1} else {NULL},   ## ERROR
        hover = if(hover) {gadm$NAME_1} else {NULL},
        hoverWait = hoverWait,
        border = border,
        source = source,
        group = "polys",
        pane = "myownpane") %>%
      addGlPoints(
        data = breweries,
        layerId = breweries$brewery,
        fillColor = ~village,
        fillOpacity = opacity,
        popup = if(isFALSE(popup1)) {NULL} else {popup1},
        hover = if(hover) {~brewery} else {NULL},
        hoverWait = hoverWait,
        radius = breweries$number.seasonal.beers*5,
        sensitivityHover = sensitivityHover,
        source = source,
        pane = "myownpane1",
        group =  "pts"
        )  %>%
    addGlPolylines(
      data = lines,
      layerId = lines$FKN,
      color = ~FKN,
      opacity = opacity,
      popup = if(isFALSE(popup2)) {NULL} else {popup2},
      # hover = if(hover) {~brewery} else {NULL},
      hoverWait = hoverWait,
      weight = weight,
      source = source,
      group = "lns",
      pane = "myownpane2");

  })
  output$click <- renderPrint({
    df <- req(input$map_glify_click)
    message("input$map_glify_click")
    print(df)
  })
  output$hover <- renderPrint({
    df <- req(input$map_glify_mouseover)
    message("input$map_glify_mouseover")
    print(df)
  })
}
shinyApp(ui, server)

Test App with Error (leaflet)

library(shiny)
library(leaflet)

ui <- fluidPage(
  actionButton("reload", "Reload Map"),
  leafletOutput("map", height = 600)
)
server <- function(input, output, session) {
  output$map <- renderLeaflet({
    input$reload
    leaflet() %>%
      addTiles() %>%
      addCircleMarkers(
        data = breweries,
        group =  "pts"
      )
  })
}
shinyApp(ui, server)

Test App No Error (leafgl)

library(sf)
library(shiny)
library(shinyjs)
library(leaflet)
library(leafgl)
library(mapview)
lines = suppressWarnings(st_cast(trails, "LINESTRING"));
lines = st_transform(lines, 4326)[1:100,]
gadm = suppressWarnings(st_cast(st_as_sf(leaflet::gadmCHE), "POLYGON"))
gadm = st_transform(gadm, 4326)

ui <- fluidPage(
  useShinyjs(),
  tags$head(tags$style(".inpts {display: inline-flex;}
                        .inpts div {padding-right: 14px;}
                       ")),
  div(class="inpts",
      checkboxInput("border", "Border of Polygons", width = "150px"),
      checkboxInput("source", "Source Data", width = "150px"),
      checkboxInput("popup", "Popup = TRUE", width = "150px"),
      checkboxInput("popup_form", "Popup as Formula", width = "150px"),
      checkboxInput("hover", "Hover", width = "150px"),
      sliderInput("sensitivityHover", "sensitivityHover Points", 0.01, 3, value = 0.4, step = 0.01),
      sliderInput("weight", "Line Weight", 1, 10, value = 2, step = 1),
      sliderInput("opacity", "Opacity", 0.1, 1.5, value = 0.8, step = 0.1),
      sliderInput("hoverWait", "hoverWait", 10, 2000, value = 120, step = 10)
  ),
  leafletOutput("map", height = 600),
  splitLayout(cellWidths = c("50%", "50%"),
              div("Clicks",verbatimTextOutput("click")),
              div("Hover",verbatimTextOutput("hover")))
)
server <- function(input, output, session) {
  output$map <- renderLeaflet({
    leaflet() %>%
      addTiles() %>%
      leaflet::addMapPane("myownpane", zIndex = 490) %>%
      leaflet::addMapPane("myownpane1", zIndex = 500) %>%
      leaflet::addMapPane("myownpane2", zIndex = 510)
  })

  observe({
    ## Arguments ##############
    border = input$border
    source = input$source
    hover = input$hover
    hoverWait = input$hoverWait
    popup = popup1 = popup2 = input$popup
    popup_form = input$popup_form
    if (popup && popup_form) {
      popup = ~VARNAME_1
      popup1 = ~address
      popup2 = ~FGN
    }
    sensitivityHover = input$sensitivityHover
    weight = input$weight
    opacity = input$opacity
    cat(paste("\n",
              "border: ", border, "\n",
              "source: ", source, "\n",
              "hover: ", hover, "\n",
              "hoverWait: ", hoverWait, "\n",
              "popup: ", popup, "\n",
              "sensitivityHover: ", sensitivityHover, "\n",
              "weight: ", weight, "\n",
              "opacity: ", opacity, "\n"))

    ## Remove Leaflet Glify with JS ##############
    # runjs("
    # if (L.glify && L.glify !== undefined) {
    #   L.glify.Lines.instances.pop();
    #   L.glify.Points.instances.pop();
    #   L.glify.Shapes.instances.pop();
    # }")

    ## Map ##############
    leafletProxy("map", session) %>%
      addGlPolygons(
        data = gadm,
        layerId = gadm$OBJECTID,
        color = ~NAME_1,
        fillOpacity = opacity,
        popup = if(isFALSE(popup)) {NULL} else {popup},
        # hover = if(hover) {~NAME_1} else {NULL},   ## ERROR
        hover = if(hover) {gadm$NAME_1} else {NULL},
        hoverWait = hoverWait,
        border = border,
        source = source,
        group = "polys",
        pane = "myownpane") %>%
      addGlPoints(
        data = breweries,
        layerId = breweries$brewery,
        fillColor = ~village,
        fillOpacity = opacity,
        popup = if(isFALSE(popup1)) {NULL} else {popup1},
        hover = if(hover) {~brewery} else {NULL},
        hoverWait = hoverWait,
        radius = breweries$number.seasonal.beers*5,
        sensitivityHover = sensitivityHover,
        source = source,
        pane = "myownpane1",
        group =  "pts"
      )  %>%
      addGlPolylines(
        data = lines,
        layerId = lines$FKN,
        color = ~FKN,
        opacity = opacity,
        popup = if(isFALSE(popup2)) {NULL} else {popup2},
        # hover = if(hover) {~brewery} else {NULL},
        hoverWait = hoverWait,
        weight = weight,
        source = source,
        group = "lns",
        pane = "myownpane2");

  })
  output$click <- renderPrint({
    df <- req(input$map_glify_click)
    message("input$map_glify_click")
    print(df)
  })
  output$hover <- renderPrint({
    df <- req(input$map_glify_mouseover)
    message("input$map_glify_mouseover")
    print(df)
  })
}
shinyApp(ui, server)

Dec 12 '20 14:12 trafficonese

leafgl leafgl copied to clipboard

Update Leaflet.glify to commit a384fae. (WIP)

leafgl
leafgl copied to clipboard