1

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.

1 Answer 1

2

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.

4
  • can the popupIframe take an attribute/variable as the src? for e.g., if I have 10 points and associate a YouTube video with every point (as a text string attribute), then can i pass this attribute in mapview?
    – Sam
    Jul 8, 2016 at 8:24
  • 1
    yes that should work just fine, I've updated the answer accordingly
    – TimSalabim
    Jul 8, 2016 at 8:39
  • thanks a lot. Any chance of implementing 'nrow' in latticeView as well as 'ncol'?
    – Sam
    Jul 8, 2016 at 9:26
  • 1
    this is getting off-topic! better write me a mail tim dot appelhans at gmail
    – TimSalabim
    Jul 8, 2016 at 9:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.