javascript - easiest way in R or Python to add image/video in map plot marker click popup/infowindow -
i have many different (lat,long data) points of world associated unique place names , corresponding each point specific image or video data. want create html file if user click on each point can see specific image or video in pop-up/infowindow. have used html files shiny web application.
target examples links below in java:
- custom image in marker
-
<script> // example displays marker @ center of australia. // when user clicks marker, 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 have tried plotgooglemaps, there have manually change generated html file javascript section code each marker becoming lot of manual work. alternatively there way achieve same in " leaflet " or " rleafmap " r package or other combination of r-based package ?
i more r less python, there easy solution exists in python @ least generate html page. want build html file can use in shiny web framework.
finally, tried below blank page 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 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 url using '+''s"); google.maps.event.addlistener(m, 'click', function(){ this.infow.setposition(this.getposition()); this.infow.open(map); }); } </script> </body> </html>
assuming have list of urls images and/or videos, literally simple iterating through them in javascript, , assembling html in javascript. unnecessarily complicated make ton of html pages, , have call them.
var images = [{url:"http://images.com/rome.png", position:new google.maps.latlng()}, ....]; var videos = [{url:"http://videos.com/borneo.wav", position:new google.maps.latlng()}, ....]; 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 url using '+''s"); google.maps.event.addlistener(m, 'click', function(){ this.infow.setposition(this.getposition()); this.infow.open(map); }); } //same videos instead of copy , paste, efficient, readable, , scalable.
therefore, far understand problem, not need python or r solve it.
Comments
Post a Comment