Update Leaflet.glify to commit a384fae. (WIP) #58

trafficonese · 2020-12-12T14:32:32Z

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)

popup not working with this error. Node.appendChild: Argument 1 does not implement interface Node.

…fy commit 97a7532

trafficonese · 2024-06-09T14:30:09Z

I'll close my other PRs as they are all nox included in #95

trafficonese added 8 commits November 1, 2020 17:43

Glify update, basic changes

443c51f

popup not working with this error. Node.appendChild: Argument 1 does not implement interface Node.

fix for popups

3ef9de6

add border & hover/hoverwait

7d1eda3

add hover/hoverwait/pane arguments

4b5f0b4

move hover above popup (lines/shapes), mouse_event unify, leaflet-gli…

0ff99e3

…fy commit 97a7532

add sensitivities, docs

f151c20

update Leaflet glify to commit a384fae

2a45250

remove debugger / console.log

5fa691d

trafficonese mentioned this pull request Jan 16, 2023

Clickable space of polyline pop-ups are extremely large #81

Open

trafficonese closed this Jun 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Leaflet.glify to commit a384fae. (WIP) #58

Update Leaflet.glify to commit a384fae. (WIP) #58

trafficonese commented Dec 12, 2020 •

edited

Loading

trafficonese commented Jun 9, 2024

Update Leaflet.glify to commit a384fae. (WIP) #58

Update Leaflet.glify to commit a384fae. (WIP) #58

Conversation

trafficonese commented Dec 12, 2020 • edited Loading

trafficonese commented Jun 9, 2024

trafficonese commented Dec 12, 2020 •

edited

Loading