|
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<title>Interfacing R and Google maps</title> |
|
<meta charset=utf-8"> |
|
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> |
|
<script src="shared/shiny.js" type="text/javascript"></script> |
|
<link rel="stylesheet" type="text/css" href="shared/slider/css/jquery.slider.min.css"/> |
|
<script src="shared/slider/js/jquery.slider.min.js"></script> |
|
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/> |
|
<script type="text/javascript" |
|
src="https://maps.googleapis.com/maps/api/js?&sensor=false&language=en"> |
|
</script> |
|
<script type="text/javascript" src="http://www.fabioveronesi.net/ShinyApp/Points2.json"></script> |
|
|
|
<script type="text/javascript"> |
|
var cluster = null; |
|
|
|
|
|
function SetValue(i) { |
|
document.getElementById("row").value = i; |
|
Shiny.onInputChange("row", i) |
|
document.getElementById("row").focus(); |
|
} |
|
|
|
|
|
|
|
function initialize() { |
|
var mapOptions = { |
|
center: new google.maps.LatLng(51.781436,-1.03363), |
|
zoom: 8, |
|
mapTypeId: google.maps.MapTypeId.ROADMAP, |
|
mapTypeControl: false, |
|
disableDefaultUI: true, |
|
navigationControl:false, |
|
disableDoubleClickZoom: true, |
|
scrollwheel: false, |
|
}; |
|
var map = new google.maps.Map(document.getElementById("map-canvas"), |
|
mapOptions); |
|
|
|
|
|
|
|
var Layer0 = new google.maps.KmlLayer("http://www.fabioveronesi.net/ShinyApp/layer0.kml"); |
|
var Layer1 = new google.maps.KmlLayer("http://www.fabioveronesi.net/ShinyApp/layer1.kml"); |
|
|
|
document.getElementById('lay0').onclick = function() { |
|
Layer0.setMap(map); |
|
}; |
|
|
|
document.getElementById('lay1').onclick = function() { |
|
Layer1.setMap(map); |
|
}; |
|
|
|
var Gmarkers = []; |
|
var infowindow = new google.maps.InfoWindow(); |
|
|
|
for (var i = 0; i < Points.length; i++) { |
|
var lat = Points[i][1] |
|
var lng = Points[i][0] |
|
var marker = new google.maps.Marker({ |
|
position: new google.maps.LatLng(lat, lng), |
|
title: i.toString(), |
|
icon: 'http://www.fabioveronesi.net/ShinyApp/icon.png', |
|
map: map |
|
}); |
|
|
|
google.maps.event.addListener(marker, 'click', |
|
(function(i) { |
|
return function() { |
|
SetValue(i+1); |
|
|
|
} |
|
})(i)); |
|
|
|
|
|
|
|
Gmarkers.push(marker); |
|
}; |
|
|
|
|
|
|
|
document.getElementById('clear').onclick = function() { |
|
Layer1.setMap(null); |
|
Layer0.setMap(null); |
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
google.maps.event.addDomListener(window, 'load', initialize); |
|
</script> |
|
|
|
|
|
</head> |
|
|
|
<body> |
|
<h1>Interfacing R with Google maps</h1> |
|
|
|
|
|
|
|
|
|
<label for="row">ID:</label> |
|
<input name="row" id="row" type="number" value="1"/> |
|
|
|
<button type="button" id="lay1">Add Mean</button> |
|
|
|
<button type="button" id="lay0">Add SD</button> |
|
|
|
|
|
<button type="button" id="clear">Clear Map</button> |
|
|
|
|
|
|
|
<div id="plot" class="shiny-plot-output" |
|
style="position:absolute;top:20%;right:2%;width: 40%; height: 40%"></div> |
|
|
|
<div id="map-canvas" style="position:absolute;top:20%;left:2%;width: 50% ; height: 50%"></div> |
|
<div style="position:absolute;top:75%;left:2%;width:40%;heigth:100px"> |
|
<h3>Instructions</h3> |
|
<p style="text-align:justify;">The map is not zoomable. This is because otherwise you won't be able to click on the invisible markers.<br> |
|
To use the app just select one of the two available maps from the buttons below the title. Click on one of the pixels to update the ID field, and then click "enter" twice to submit the change and update the plot</p></div> |
|
|
|
</body> |
|
|
|
</html> |
