Skip to content

Add files via upload #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Screaming-mouse wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add files via upload #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 167 additions & 0 deletions Display_hotspots_submission.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@


<!DOCTYPE html>
<html>

<head>
<style>
/*
Copyright 2020 Martin Lee
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
Map display adapted from GOOGLE Maps API examples https://developers.google.com/maps/documentation/javascript/markers
API keys may also be obtained from links on this site.
'flame_small.png', //flame image must be in the same folder as the html
*/
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>

<body>
<form onsubmit="return processFile();" action="#" name="myForm" id="aForm" method="POST">
<input type="file" id="myFile" name="myFile"><br>
<input type="submit" name="submitMe" value="Process File">
</form>
<section>
<table id="myTable"></table>
</section>
<div id="map"></div>
<script>

var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
//center: new google.maps.LatLng(2.8,-187.3),
center: new google.maps.LatLng(47.7421062, -117.1868899), zoom: 16,
mapTypeId: 'satellite'

//mapTypeId: 'terrain'
});

// Create a <script> tag and set the USGS URL as the source.
var script = document.createElement('script');
// This example uses a local copy of the GeoJSON stored at
// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
document.getElementsByTagName('head')[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function (results) {
//callback from google API refernce. remove if time permitts.
var dummy_var = 5;
//for (var i = 0; i < results.features.length; i++) {
//var coords = results.features[i].geometry.coordinates;
//var latLng = new google.maps.LatLng(coords[1], coords[0]);
//var marker = new google.maps.Marker({
//position: latLng,
//map: map
//});
//}
}
function processFile() {
var fileSize = 0;
//var theFile = document.getElementById("myFile").files[0];
//file://C:\Martin\geo-location\google_maps\coords.csv
var theFile = document.getElementById("myFile").files[0];
if (theFile) {
var table = document.getElementById("myTable");
var headerLine = "myFile";
var myReader = new FileReader();
myReader.onload = function (e) {
var content = myReader.result;
var lines = content.split("\r");
//alert(rowContent[lines.length]);
for (var count = 0; count < lines.length; count++) {
var row = document.createElement("tr");
var rowContent = lines[count].split(",");
var marker = new google.maps.Marker({
position: new google.maps.LatLng(rowContent[0], rowContent[1]),
icon: 'flame_small.png', //flame image must be in the same folder as the html
map: map
});
//alert(rowContent[lines.length]);
//alert(rowContent[0].length);
//The following conditional finds the highest and lowest of the supplied coordinates
if (0 ==count){
var dummy_var = 1;//do nothing
}
else if (1 == count) {
var lowest_lat = (rowContent[0]);
var highest_lat = (rowContent[0]);
var lowest_lon = (rowContent[1]);
var highest_lon = (rowContent[1]);
//alert(rowContent[0]);
}
//else if (Number.isNaN(rowContent[0])){
else if (rowContent[0].length == 1){
//alert('empty row');

}
else {
lowest_lat = Math.min(lowest_lat, rowContent[0]);
highest_lat = Math.max(highest_lat, rowContent[0]);
lowest_lon = Math.min(lowest_lon, rowContent[1]);
highest_lon = Math.max(highest_lon, rowContent[1]);
//alert(lowest_lat);
}
//find center of displayed points
var map_center_lat = (highest_lat - lowest_lat) / 2 + lowest_lat;
var map_center_lon = (highest_lon - lowest_lon) / 2 + lowest_lon;

for (var i = 0; i < rowContent.length; i++) {
if (count == 0) {
var cellElement = document.createElement("th");
} else {
var cellElement = document.createElement("td");
//var latLng = new google.maps.LatLng(coords[1], coords[0]);
//var latLng = (rowContent[0], rowContent[1]);
//parseInt(text, 10)
if (1 == count) {
var lowest_lat = rowContent[0];
}
//var latLng = (parseInt(rowContent[0],10), parseInt(rowContent[1],10));
//alert(rowContent[0]);
new google.maps.LatLng(rowContent[0], rowContent[1])

//var marker = new google.maps.Marker({
//position: new google.maps.LatLng(rowContent[0], rowContent[1]),

//map: map
//});
}
var cellContent = document.createTextNode(rowContent[i]);
cellElement.appendChild(cellContent);
row.appendChild(cellElement);
}
//myTable.appendChild(row);
}
map.panTo(new google.maps.LatLng(map_center_lat, map_center_lon));
}
myReader.readAsText(theFile);
}
return false;
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap">
</script>

</body>

</html>
Binary file added To use Containment_Sentinel_executive.docx
View file
Open in desktop
Binary file not shown.
Loading