search

r-spatial / leafpop

Include Tables, Images and Graphs in Leaflet Popups
Other
113 stars 15 forks source link

combine image and HTML string #14

Closed oggioniale closed 3 years ago

oggioniale commented 4 years ago

I would like to get a popup that has an image or a graphic inside it and then some ancillary information e.g. `leafpop::popupImage( img = paste0( allExif$SourceFile, "
", "Capture Date and Time: ", allExif$DateTimeOriginal, "
", "Exposure: ", allExif$ExposureMode, "
", "Focal Length: ", allExif$FocalLength, "
", "ISO Speed Rating: ", allExif$ISO, "
",

"Flash" = , "
",

                  "Model: ", allExif$Model, "<br/>",
                  "Lens: ", allExif$Lens, "<br/>"
                )
              )`

I have not found any examples regarding this. Is it possible with leafpop and popupImage?

tim-salabim commented 4 years ago

That should be possible. Can you provide a reproducible example so I can see what's going wrong?

oggioniale commented 4 years ago

thanks you @tim-salabim my code is:

# modified by Maarten Hermans
# http://archived.mhermans.net/hiking-gpx-r-leaflet.html

library(dplyr)
# Adding tracks to the map
wpS <- list()
trackS <- list()
map <- leaflet::leaflet() %>% 
  leaflet::addTiles() %>% 
  leaflet::addLayersControl(position = 'bottomright',
                            overlayGroups = c('Tracks', 'Photo markers'),
                            options = leaflet::layersControlOptions(collapsed = FALSE))

GPX_file <- "http://raw.githubusercontent.com/oggioniale/EXIF-Data-photos/master/data/20190903_RifugioPisciadu.gpx"
trackName <- substring(GPX_file, 64)
download.file(GPX_file, "tracker.gpx")
rgdal::ogrListLayers("tracker.gpx")
wpS[[trackName]] <- rgdal::readOGR("tracker.gpx", layer = "track_points")
head(wpS[[trackName]][,c('ele', 'time')])
wpS[[trackName]]$climbed <- list(max(wpS[[trackName]]$ele) - min(wpS[[trackName]]$ele)) # height climbed in meters
hike.dists <- sp::spDists(wpS[[trackName]], segments=TRUE)
wpS[[trackName]]$distance <- sum(hike.dists) # distance in km
wpS[[trackName]]$time <- lubridate::ymd_hms(wpS[[trackName]]$time)
trackS[[trackName]] <- rgdal::readOGR("tracker.gpx", layer = "tracks", verbose = FALSE)
map <- map %>% leaflet::addPolylines(
  data = trackS[[trackName]],
  color = 'red', 
  group = 'Tracks')

map

# Adding photo-popups to the tracks
image_file <- 'http://github.com/oggioniale/EXIF-Data-photos/raw/master/data/_MG_9957-Pano.jpg'
download.file(image_file, "image.jpg")
allExif <- exifr::read_exif(
  "image.jpg",
  recursive = FALSE,
  tags = c(
    # more info https://github.com/adobe/xmp-docs/blob/master/XMPNamespaces/exif.md
    "SourceFile",
    "DateTimeOriginal",
    "ExposureTime", # second
    "Aperture", #
    "ISO",
    "FocalLength",
    "ExposureMode", # 0 = Auto exposure, 1 = Manual exposure, 2 = Auto bracket
    "ExposureProgram", # 0 = not defined, 1 = Manual, 2 = Normal program, 3 = Aperture priority, 4 = Shutter priority, 5 = Creative program, 6 = Action program, 7 = Portrait mode, 8 = Landscape mode
    "Lens",
    "Model",
    "Rights",
    "UsageTerms",
    "GPSLatitude",
    "GPSLongitude"#,
    # "Subject"
  )
)

photoIcon <- leaflet::makeIcon(
  iconAnchorX = 12, iconAnchorY = 12, # center middle of icon on track,
  # instead of top corner  
  iconUrl = shiny::icon("camera")
)

map <- map %>% leaflet::addMarkers(map, lng = allExif$GPSLongitude, lat = allExif$GPSLatitude,  
                                   popup = 
                                     leafpop::popupImage(
                                       img = paste0(
                                         allExif$SourceFile,
                                         "<br/>",
                                         "Capture Date and Time: ", allExif$DateTimeOriginal, "<br/>",
                                         "Exposure: ", allExif$ExposureMode, "<br/>",
                                         "Focal Length: ", allExif$FocalLength, "<br/>",
                                         "ISO Speed Rating: ", allExif$ISO, "<br/>",
                                         # "Flash" = , "<br/>",
                                         "Model: ", allExif$Model, "<br/>",
                                         "Lens: ", allExif$Lens, "<br/>"
                                       )
                                     ),
                                   icon = photoIcon, # function providing custom marker-icons
                                   group = 'Photo markers')
map

My idea is to have in the popup with picture above and the other exif metadata (e.g. Capture Data and Time) below. Thanks

tim-salabim commented 4 years ago

I know this used to work. Will look into why it doesn't anymore, but this will likely take some time, as I am currently busy updating mapview for CRAN release (as it will otherwise be archived).

tim-salabim commented 3 years ago

@oggioniale sorry for this taking so long... With the above commit, we can now do the following:

leaflet::addMarkers(
  map
  , lng = allExif$GPSLongitude
  , lat = allExif$GPSLatitude
  , popup = paste0(
    "<br/>",
    "Capture Date and Time: ", allExif$DateTimeOriginal, "<br/>",
    "Exposure: ", allExif$ExposureMode, "<br/>",
    "Focal Length: ", allExif$FocalLength, "<br/>",
    "ISO Speed Rating: ", allExif$ISO, "<br/>",
    # "Flash" = , "<br/>",
    "Model: ", allExif$Model, "<br/>",
    "Lens: ", allExif$Lens, "<br/>"
    , "<hr>"
  )
  , group = 'Photo markers'
) %>%
  leafpop::addPopupImages(
    image = allExif$SourceFile
    , group = 'Photo markers'
    , width = 400
    , height = 300
  )

So basically, we use leafpop::addPopupImages() with the same group name as the addMarker call. If there is already some popup content in the marker layer, we simply append the image(s) to that content.

image

oggioniale commented 3 years ago

thanks @tim-salabim I add your code in my example but I obtaining a popup with a picture but without image info. What's I wrong?

immagine

this is my new code:

# modified by Maarten Hermans
# http://archived.mhermans.net/hiking-gpx-r-leaflet.html

library(dplyr)
# Adding tracks to the map
wpS <- list()
trackS <- list()
map <- leaflet::leaflet() %>% 
  leaflet::addTiles() %>% 
  leaflet::addLayersControl(position = 'bottomright',
                            overlayGroups = c('Tracks', 'Photo markers'),
                            options = leaflet::layersControlOptions(collapsed = FALSE))

GPX_file <- "http://raw.githubusercontent.com/oggioniale/EXIF-Data-photos/master/data/20190903_RifugioPisciadu.gpx"
trackName <- substring(GPX_file, 64)
download.file(GPX_file, "tracker.gpx")
rgdal::ogrListLayers("tracker.gpx")
wpS[[trackName]] <- rgdal::readOGR("tracker.gpx", layer = "track_points")
head(wpS[[trackName]][,c('ele', 'time')])
wpS[[trackName]]$climbed <- list(max(wpS[[trackName]]$ele) - min(wpS[[trackName]]$ele)) # height climbed in meters
hike.dists <- sp::spDists(wpS[[trackName]], segments=TRUE)
wpS[[trackName]]$distance <- sum(hike.dists) # distance in km
wpS[[trackName]]$time <- lubridate::ymd_hms(wpS[[trackName]]$time)
trackS[[trackName]] <- rgdal::readOGR("tracker.gpx", layer = "tracks", verbose = FALSE)
map <- map %>% leaflet::addPolylines(
  data = trackS[[trackName]],
  color = 'red', 
  group = 'Tracks')

map

# Adding photo-popups to the tracks
image_file <- 'http://github.com/oggioniale/EXIF-Data-photos/raw/master/data/_MG_9957-Pano.jpg'
download.file(image_file, "image.jpg")
allExif <- exifr::read_exif(
  "image.jpg",
  recursive = FALSE,
  tags = c(
    # more info https://github.com/adobe/xmp-docs/blob/master/XMPNamespaces/exif.md
    "SourceFile",
    "DateTimeOriginal",
    "ExposureTime", # second
    "Aperture", #
    "ISO",
    "FocalLength",
    "ExposureMode", # 0 = Auto exposure, 1 = Manual exposure, 2 = Auto bracket
    "ExposureProgram", # 0 = not defined, 1 = Manual, 2 = Normal program, 3 = Aperture priority, 4 = Shutter priority, 5 = Creative program, 6 = Action program, 7 = Portrait mode, 8 = Landscape mode
    "Lens",
    "Model",
    "Rights",
    "UsageTerms",
    "GPSLatitude",
    "GPSLongitude"#,
    # "Subject"
  )
)

photoIcon <- leaflet::makeIcon(
  iconAnchorX = 12, iconAnchorY = 12, # center middle of icon on track,
  # instead of top corner  
  iconUrl = shiny::icon("camera")
)

map <- map %>% 
  leaflet::addMarkers(
    map
    , lng = allExif$GPSLongitude
    , lat = allExif$GPSLatitude
    , popup = paste0(
      "<br/>",
      "Capture Date and Time: ", allExif$DateTimeOriginal, "<br/>",
      "Exposure: ", allExif$ExposureMode, "<br/>",
      "Focal Length: ", allExif$FocalLength, "<br/>",
      "ISO Speed Rating: ", allExif$ISO, "<br/>",
      # "Flash" = , "<br/>",
      "Model: ", allExif$Model, "<br/>",
      "Lens: ", allExif$Lens, "<br/>"
      , "<hr>"
    )
    , group = 'Photo markers'
  ) %>%
  leafpop::addPopupImages(
    image = allExif$SourceFile
    , group = 'Photo markers'
    , width = 400
    , height = 300
  )
map
tim-salabim commented 3 years ago

Works for me if I remove the map argument from the addMarkers call

map <- map %>% 
  leaflet::addMarkers(
    , lng = allExif$GPSLongitude
    , lat = allExif$GPSLatitude
    , popup = paste0(
      "<br/>",
      "Capture Date and Time: ", allExif$DateTimeOriginal, "<br/>",
      "Exposure: ", allExif$ExposureMode, "<br/>",
      "Focal Length: ", allExif$FocalLength, "<br/>",
      "ISO Speed Rating: ", allExif$ISO, "<br/>",
      # "Flash" = , "<br/>",
      "Model: ", allExif$Model, "<br/>",
      "Lens: ", allExif$Lens, "<br/>"
      , "<hr>"
    )
    , group = 'Photo markers'
  ) %>%
  leafpop::addPopupImages(
    image = allExif$SourceFile
    , group = 'Photo markers'
    , width = 400
    , height = 300
  )
map
oggioniale commented 3 years ago

I remove the map too but the same result: immagine

tim-salabim commented 3 years ago

With the latest version remotes::install_guthub("r-spatial/leafpop") I get (note I commented out the download parts):

# modified by Maarten Hermans
# http://archived.mhermans.net/hiking-gpx-r-leaflet.html

library(dplyr)
# Adding tracks to the map
wpS <- list()
trackS <- list()

GPX_file <- "http://raw.githubusercontent.com/oggioniale/EXIF-Data-photos/master/data/20190903_RifugioPisciadu.gpx"
trackName <- substring(GPX_file, 64)
# download.file(GPX_file, "tracker.gpx")
rgdal::ogrListLayers("tracker.gpx")
wpS[[trackName]] <- rgdal::readOGR("tracker.gpx", layer = "track_points")
head(wpS[[trackName]][,c('ele', 'time')])
wpS[[trackName]]$climbed <- list(max(wpS[[trackName]]$ele) - min(wpS[[trackName]]$ele)) # height climbed in meters
hike.dists <- sp::spDists(wpS[[trackName]], segments=TRUE)
wpS[[trackName]]$distance <- sum(hike.dists) # distance in km
wpS[[trackName]]$time <- lubridate::ymd_hms(wpS[[trackName]]$time)
trackS[[trackName]] <- rgdal::readOGR("tracker.gpx", layer = "tracks", verbose = FALSE)

# Adding photo-popups to the tracks
# image_file <- 'http://github.com/oggioniale/EXIF-Data-photos/raw/master/data/_MG_9957-Pano.jpg'
# download.file(image_file, "image.jpg")
allExif <- exifr::read_exif(
  "image.jpg",
  recursive = FALSE,
  tags = c(
    # more info https://github.com/adobe/xmp-docs/blob/master/XMPNamespaces/exif.md
    "SourceFile",
    "DateTimeOriginal",
    "ExposureTime", # second
    "Aperture", #
    "ISO",
    "FocalLength",
    "ExposureMode", # 0 = Auto exposure, 1 = Manual exposure, 2 = Auto bracket
    "ExposureProgram", # 0 = not defined, 1 = Manual, 2 = Normal program, 3 = Aperture priority, 4 = Shutter priority, 5 = Creative program, 6 = Action program, 7 = Portrait mode, 8 = Landscape mode
    "Lens",
    "Model",
    "Rights",
    "UsageTerms",
    "GPSLatitude",
    "GPSLongitude"#,
    # "Subject"
  )
)

map <- leaflet::leaflet() %>% 
  leaflet::addTiles() %>% 
  leaflet::addLayersControl(position = 'bottomright',
                            overlayGroups = c('Tracks', 'Photo markers'),
                            options = leaflet::layersControlOptions(collapsed = FALSE))

map <- map %>% leaflet::addPolylines(
  data = trackS[[trackName]],
  color = 'red', 
  group = 'Tracks')

map <- map %>% 
  leaflet::addMarkers(
    , lng = allExif$GPSLongitude
    , lat = allExif$GPSLatitude
    , popup = paste0(
      "<br/>",
      "Capture Date and Time: ", allExif$DateTimeOriginal, "<br/>",
      "Exposure: ", allExif$ExposureMode, "<br/>",
      "Focal Length: ", allExif$FocalLength, "<br/>",
      "ISO Speed Rating: ", allExif$ISO, "<br/>",
      # "Flash" = , "<br/>",
      "Model: ", allExif$Model, "<br/>",
      "Lens: ", allExif$Lens, "<br/>"
      , "<hr>"
    )
    , group = 'Photo markers'
  ) %>%
  leafpop::addPopupImages(
    image = allExif$SourceFile
    , group = 'Photo markers'
    , width = 400
    , height = 300
  )

map

image

oggioniale commented 3 years ago

Thanks @tim-salabim I installed again leafpop with remotes::install_github("r-spatial/leafpop") and now work.