plotGoogleMaps R package on CMS
Question
I'm using the R package plotGoogleMaps to plot a map like this and it works: I get an html file like this and an image for the legend.
I'd like to be able to show this result in a article in Joomla or another CMS, like I would normally do with an image (I don't want to lose the CSS and style of my site), but I don't know how to do it.
As you can see from the source of the example, the file includes two long scripts (one of them is in a link) and I don't know how to include them in the header of my article.
A secondary problem (less important) is that it would be easier to use this function, if it would separate the html that should go in the article from the scripts and the CSS style that should be in the header, so that I don't have to cut and paste everytime, to split these elements and put them in the right place.
I've inserted a simple, shorter, example (the legend is not visible, because it was a separated image) here with just one small polygons and only one variable, so it should be easier to understand the structure:
<!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 { float: left; width:800px; height:600px; } #cBoxes {float: left; width:200px; height: 600px; overflow:auto} </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 } var GoogleMap var polyaXxcxxpoverixxX9603 =[] ; var polygon= new google.maps.Polygon({ paths:[ new google.maps.LatLng( 43.861701965332 , 10.7270231246949 ), new google.maps.LatLng( 43.8648071289063 , 10.7138719558716 ), new google.maps.LatLng( 43.86967086792 , 10.7096805572511 ), new google.maps.LatLng( 43.8817100524903 , 10.6950511932374 ), new google.maps.LatLng( 43.882724761963 , 10.6946687698365 ), new google.maps.LatLng( 43.8834533691406 , 10.6946153640748 ), new google.maps.LatLng( 43.8914604187013 , 10.6955518722535 ), new google.maps.LatLng( 43.9005165100098 , 10.6986227035522 ), new google.maps.LatLng( 43.9016075134278 , 10.6991891860961 ), new google.maps.LatLng( 43.9121093750001 , 10.7056283950807 ), new google.maps.LatLng( 43.9124259948731 , 10.70609664917 ), new google.maps.LatLng( 43.9165954589843 , 10.7151222229004 ), new google.maps.LatLng( 43.9173736572266 , 10.7183818817138 ), new google.maps.LatLng( 43.9156303405762 , 10.7193155288697 ), new google.maps.LatLng( 43.9152069091798 , 10.719415664673 ), new google.maps.LatLng( 43.9097976684571 , 10.7180519104004 ), new google.maps.LatLng( 43.9024848937989 , 10.7170953750611 ), new google.maps.LatLng( 43.9018325805665 , 10.7173252105712 ), new google.maps.LatLng( 43.8986053466798 , 10.7188882827759 ), new google.maps.LatLng( 43.8957862854004 , 10.7206497192383 ), new google.maps.LatLng( 43.8920631408693 , 10.7215881347657 ), new google.maps.LatLng( 43.8915939331056 , 10.7216873168945 ), new google.maps.LatLng( 43.8911895751954 , 10.7215261459351 ), new google.maps.LatLng( 43.8880500793458 , 10.7201528549194 ), new google.maps.LatLng( 43.8791160583496 , 10.7157011032104 ), new google.maps.LatLng( 43.8631248474121 , 10.725196838379 ), new google.maps.LatLng( 43.8628540039062 , 10.7253637313843 ), new google.maps.LatLng( 43.8625869750978 , 10.7256422042847 ), new google.maps.LatLng( 43.861701965332 , 10.7270231246949 )], map:GoogleMap, clickable:true, fillColor: "#00FF00", strokeColor: "", strokeOpacity:1, fillOpacity:0.7, strokeWeight:1, geodesic:true, zIndex:null}); polyaXxcxxpoverixxX9603.push(polygon); function showR(R,boxname, map) { R.setMap(map); document.getElementById(boxname).checked = true; } function hideR(R,boxname) { R.setMap(null); document.getElementById(boxname).checked = false; } function showO(MLPArray,boxname, map ) { for (var i = 0; i < MLPArray.length; i++) { MLPArray[i].setMap(map); } document.getElementById(boxname).checked = true; } function hideO(MLPArray,boxname) { for (var i = 0; i < MLPArray.length; i++) { MLPArray[i].setMap(null);} document.getElementById(boxname).checked = false; } function boxclick(box,MLPArray,boxname, map) { if (box.checked) { showO(MLPArray,boxname, map); }else { hideO(MLPArray,boxname);} } function setOpac(MLPArray,textname){ opacity=0.01*parseInt(document.getElementById(textname).value) for(var i = 0; i < MLPArray.length; i++) { MLPArray[i].setOptions({strokeOpacity: opacity, fillOpacity: opacity}); }} function setOpacL(MLPArray,textname) { opacity=0.01*parseInt(document.getElementById(textname).value) for (var i = 0; i < MLPArray.length; i++) { MLPArray[i].setOptions({strokeOpacity: opacity});}} function setLineWeight(MLPArray,textnameW){ weight=parseInt(document.getElementById(textnameW).value) for (var i = 0; i < MLPArray.length; i++){ MLPArray[i].setOptions({strokeWeight: weight}); } } function legendDisplay(box,divLegendImage){ element = document.getElementById(divLegendImage).style; if (box.checked){ element.display="block";} else { element.display="none";}} function boxclickR(box,R,boxname, map) { if (box.checked){ showR(R,boxname,map); } else { hideR(R,boxname);} } function legendDisplay(box,divLegendImage){ element = document.getElementById(divLegendImage).style; if (box.checked){ element.display="block";} else { element.display="none";}} function initialize() { var latlng = new google.maps.LatLng( 43.8895378112793 , 10.7108192443848 ) ; var myOptions = { zoom: 12 , center: latlng , mapTypeId: google.maps.MapTypeId.HYBRID , disableDefaultUI: false , disableDoubleClickZoom: false , draggable: true , keyboardShortcuts: true , mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DEFAULT} , navigationControl: true , navigationControlOptions: {style: google.maps.NavigationControlStyle.DEFAULT} , noClear: false , scaleControl: true , scaleControlOptions: {style: google.maps.ScaleControlStyle.STANDARD} , scrollwheel: true , streetViewControl: false } ; GoogleMap= new google.maps.Map(document.getElementById("Map"),myOptions); var infowindow = new google.maps.InfoWindow({ content: "", disableAutoPan:false, maxWidth :330, pixelOffset :null, position :new google.maps.LatLng( 43.8901079074412 , 10.7096781253779 ) }); google.maps.event.addListener(polyaXxcxxpoverixxX9603[0] ,"click",function(event){ infowindow.setContent("poveri : 28 <br>"); infowindow.setPosition(event.latLng); infowindow.open(GoogleMap)}); showO(polyaXxcxxpoverixxX9603,"polyaXxcxxpoverixxX9603box",GoogleMap); google.maps.event.addListener( GoogleMap , 'rightclick', function(event) { var lat = event.latLng.lat(); var lng = event.latLng.lng(); alert('Lat=' + lat + '; Lng=' + lng);}); } </script> </head> <body onload="initialize()"> <div id="Map"></div> <div id="cBoxes"> <table border="0"> <tr> <td> <input type="checkbox" id="polyaXxcxxpoverixxX9603box" onClick='boxclick(this,polyaXxcxxpoverixxX9603,"polyaXxcxxpoverixxX9603box",GoogleMap);' /> <b> Economic Data<b> </td> </tr> <tr> <td> <input type="text" id="polyaXxcxxpoverixxX9603text" value="50" onChange='setOpac(polyaXxcxxpoverixxX9603,"polyaXxcxxpoverixxX9603text")' size=3 /> Opacity (0-100 %) </td> </tr> <tr> <td> <input type="text" id="polyaXxcxxpoverixxX9603W" value="1" onChange=' setLineWeight(polyaXxcxxpoverixxX9603,"polyaXxcxxpoverixxX9603W")' size=3 /> Line weight (pixels) </td> </tr> <tr> <td> <input type="checkbox" checked="checked" id="boxLegend44c26773e95" onClick='legendDisplay(this,"Legend44c26773e95");' /> LEGEND </td> </tr> <tr> <td>poveri</td> </tr> <tr> <td> <div style="display:block;" id="Legend44c26773e95"> <img src="Legend44c26773e95.png" alt="Legend" height="70%"> </div> </td> </tr> </table> <hr> </div> </body> </html>
I've tried to publish the code of the first example in Joomla with the CodeMirror Editor (as suggested here ), but it didn't work. I don't know very much about Joomla, so I can't experiment very much: I am afraid the site I'm working with could crash and I have never installed Joomla, so it would be really difficult and long for me to try safe tests (Joomla is the only CMS I've tried, but my knowledge is really low).
1 answers
solution1
0 2016-08-06 10:53:43
One solution could probably be using an iframe tag . It allows to embed another document within the current HTML document.
That's an example:
<!DOCTYPE html> <html> <body> <iframe src="http://www.fabioveronesi.net/Blog/Map_GoogleMaps_small.html" target="Map" height="1500px" width=1500 ></iframe> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Is there a way to use a Javascript package in R?
Series highlighting legend in dygraphs package for R/Shiny
R networkD3 package: forceNetwork() coloring
Bold text in R using networkD3 package
R networkD3 package: node coloring in simpleNetwork()
Parent/Child Rows in R shiny Package
“node -r package.json” - how to access inside object?
Uploading html file generated from R-animation package to wordpress
R leaflet package produces blank (grey) map [Ubuntu 14.04]
passing file name to R from javascript using Rook package
Related Tags