[GIS] way in R or Python to add image/video in map plot marker click popup/infowindow

google mapsjavascriptpythonr

I have many different (lat,long data) points of world associated with unique place names and corresponding each point specific image or video data. Now I want to create an html file where if user click on each point they can see that specific image or video in the pop-up/infowindow. Previously I have successfully used html files with my shiny web application.

Target examples links are as below but they are all in Java:

1.custom image in marker[http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html]

2.custom video in marker

    <script>
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var contentString = '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">Video in Info Window</h1>'+
  '<div id="bodyContent">'+
  '<iframe width="640" height="390" src="//www.youtube.com/embed/a8UOzBUZxCw" frameborder="0" allowfullscreen></iframe>'+
  '</div>'+
  '</div>';

  var infowindow = new google.maps.InfoWindow({
  content: contentString
  });

  var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>


  [1]: http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html
  1. streetview image in marker[http://jsfiddle.net/sST8z/]
<div id="map_canvas"></div>

var map;
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };

function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
street = new google.maps.StreetViewPanorama(document.getElementById("street"), { 

position: new google.maps.LatLng(40.72982797782924, -73.98622512817383),
zoomControl: false,
enableCloseButton: false,
addressControl: false,
panControl: false,
    linksControl: false
});


var infow = new google.maps.InfoWindow({ content: document.getElementById("street")
});
var myLatLng = new google.maps.LatLng(40.72982797782924, -73.98622512817383);
var marker = new google.maps.Marker({ position: myLatLng, map: map, visible: true });

infow.open(map, marker);
map.setCenter(myLatLng);

}
google.maps.event.addDomListener(window, 'load', initialize);

</script>

First I have tried with plotGoogleMaps, there I have to manually change the generated html file javascript section code for each marker so it is becoming a lot of manual work. So alternatively Is there any way to achieve the same in " leaflet " or " rleafmap " R package or any other combination of R-based package ?

I am more from R less from Python, is there any easy solution exists in Python at least to generate that html page. I just want to build that html file so that I can use in shiny web framework.

Best Answer

As of one week ago, this can now be achieved with the development version of mapview:

# devtools::install_github("environmentalinformatics-marburg/mapview", ref = "develop")
library(mapview)
library(sp)

# video
pnt <- data.frame(x = 174.764474, y = -36.877245)

coordinates(pnt) <- ~ x + y
proj4string(pnt) <- "+init=epsg:4326"

pt4 <- data.frame(x = jitter(rep(174.764474, 3), factor = 0.001),
                  y = jitter(rep(-36.877245, 3), factor = 0.001),
                  pop = c("https://www.youtube.com/embed/iApz08Bh53w?autoplay=1",
                          "https://www.youtube.com/embed/NrI-UBIB8Jk?autoplay=1",
                          "https://www.youtube.com/embed/anGYFI_hmII?autoplay=1"))
coordinates(pt4) <- ~ x + y
proj4string(pt4) <- "+init=epsg:4326"

mapview(pt4, popup = mapview:::popupIframe(pt4$pop, width = 300, height = 225))

# image
img <- "https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Mount_Eden.jpg/640px-Mount_Eden.jpg"

mapview(pt, popup = popupImage(img, src = "remote"))

Note that popupIframe is not an exported function, so there's no help available. It has 3 arguments: src (the source to embed), width and height of the iframe in pixels.

Related Question