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:
- custom image 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> -
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);
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.
Finally, I tried below but blank page is coming up.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8">
<style type="text/css">
html { height: 100% ; font-size: small}
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas {min-height: 100%;height:auto; }
#cBoxes {position:absolute;right:5px; top:50px; background:white}
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&v=3.18"> </script>
<script language="javascript">
USGSOverlay.prototype = new google.maps.OverlayView();
function USGSOverlay(bounds, image, map) {
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map); }
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement("DIV");
div.style.border = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute";
var img = document.createElement("img");
img.src = this.image_;
img.style.width = "100%";
img.style.height = "100%";
div.appendChild(img);
this.div_ = div;
this.div_.style.opacity = 0.7;
var panes = this.getPanes();
panes.overlayImage.appendChild(this.div_);}
USGSOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var div = this.div_;
div.style.left = sw.x + "px";
div.style.top = ne.y + "px";
div.style.width = (ne.x - sw.x) + "px";
div.style.height = (sw.y - ne.y) + "px";}
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);}
USGSOverlay.prototype.hide = function() { if (this.div_) { this.div_.style.visibility = "hidden";} }
USGSOverlay.prototype.show = function() {if (this.div_) { this.div_.style.visibility = "visible";}}
USGSOverlay.prototype.toggle = function() {
if (this.div_) {
if (this.div_.style.visibility == "hidden") {
this.show();
} else {
this.hide(); } } }
USGSOverlay.prototype.toggleDOM = function() {
if (this.getMap()) {
this.setMap(null);
} else {
this.setMap(this.map_);}}
function setOpacR(Raster,textname) {
opac=0.01*parseInt(document.getElementById(textname).value)
Raster.div_.style.opacity= opac }
// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(28.70, -127.50),
new google.maps.LatLng(48.85, -55.90)
);
var boundLimits = {
maxLat : allowedBounds.getNorthEast().lat(),
maxLng : allowedBounds.getNorthEast().lng(),
minLat : allowedBounds.getSouthWest().lat(),
minLng : allowedBounds.getSouthWest().lng()
};
var images = [{url:"http://images.com/rome.png", position:new google.maps.LatLng(27.7220605,91.8254337)},
url:"http://assetscdn.paytm.com/images/catalog/product/A/AP/APPILCHEI-TRENDILCH29488C3956E0D_29487/0x1920/70/0.jpg", position:new google.maps.LatLng(15.5967635,73.8928171)},
url:"http://img5a.flixcart.com/image/sari/x/z/c/11036-roop-kashish-400x400-imadq4f6n3fh6kht.jpeg", position:new google.maps.LatLng(30.9740215,77.1982669)},
url:"http://stat.homeshop18.com/homeshop18/images/productImages/958/de-marca-faux-chiffon-saree-yellow-240X336-5X7-240fabfeb551480eba911e34d90b4a20.jpg", position:new google.maps.LatLng(12.303889,76.654444)}];
for(var i=0l i<images.length; i++){
var m = new google.maps.Marker({position:images[i].position});
m.infow = new google.maps.InfoWindow("HTML using image template, splicing in the URL using '+''s");
google.maps.event.addListener(m, 'click', function(){
this.infow.setPosition(this.getPosition());
this.infow.open(map);
});
}
</script>
</body>
</html>
