 |
| My eBird Record of 2 Weeks in Europe |
You will need a computer which can run Microsoft Excel, Windows Notepad, and an internet browser (preferentially Chrome, Firefox, or IE 10).
STEP 1: Download your eBird Data. Go to My eBird, click on "Download my Data" in the bottom of the right sidebar. Save your CSV file to a new folder in a convenient location which you will use for this project.
STEP 2: Open your CSV file in Excel. Open the data ribbon, and click the filter icon.
If you cannot find the filter icon, or if you are using an older version of Excel, click on a cell and press Ctrl+A to select all data. While selected, click "Insert Table" on the main Insert ribbon. Be very careful that you do not copy the table formatting in Step 5 into the notepad--you only want the plain text.
STEP 3: You need to sort your file by both date and time, so in the column to the right of your table, click on cell U2. Enter the following formula verbatim: =CONCATENATE(K2," ",L2). You should get a 5-digit number, perhaps with some decimal places. To apply this formula to every cell in the column, drag the bottom right corner of cell U2 all the way down to the last row with data. Now sort this column from smallest to largest by clicking on the arrow in cell U1 and selecting "Sort from A to Z". Your data is now sorted from the earliest date to the latest date.
STEP 4: Now you need to start programming. Since I didn't feel up to writing an application (maybe I will), you will do it yourself, the clumsy way, in excel. In cell V2, type in the following formula verbatim: =CONCATENATE("new google.maps.LatLng(",I2,",",J2,"),"). This should give you output like the following: new google.maps.LatLng(43.123967,-85.3575963),. Once again, apply this formula to ever cell in the column by dragging the bottom right corner of the cell all the way down to the last row with data. You will probably realize with great satisfaction/impatience just exactly how many observations you have submitted to eBird :D
STEP 5:
At this point, hopefully you're on a windows computer. Fiddling around in a similar fashion on a mac with a different text editor will get you what you need as well. Open up Notepad by clicking on the Start Menu, All Programs, Accessories, Notepad. Copy and paste the following code into the file:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Birder's LifeMap</title>
<style type="text/css">
html, body {height: 100%;margin: 0;padding: 0;}
#map_canvas {height: 100%;}
@media print {html,body{height: auto;}#map_canvas {height: 650px;}}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatLng = new google.maps.LatLng(42.449428,-76.512763); // -------- You can change this latitude longitude coordinate to change the default center of your map
var mapOptions = {
zoom: 3, // ------------ you can change this number to change the default zoom level of your map
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN // ----- You can change this maptype from TERRAIN to ROADMAP, SATTELITE, or HYBRID
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var flightPlanCoordinates = [
//********************* Paste your Excel data below between these asterisks
// sample that your data should look like:
// new google.maps.LatLng(43.123967,-85.3575963),
// new google.maps.LatLng(42.93363,-85.34192),
// ****************************
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: '#dd0000', // -------- change the color of your lines. You may use hex codes, rgb(x,x,x) values, or any other accepted javascript method.
strokeOpacity: 1.0, // --------- change transparency of your lines. Anything less than 1.0 is opaque, and 0 is completely transparent.
strokeWeight: 1 // ---------- change the width of your lines. You probably won't want anything thicker than 3 or 4.
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Birder's LifeMap</title>
<style type="text/css">
html, body {height: 100%;margin: 0;padding: 0;}
#map_canvas {height: 100%;}
@media print {html,body{height: auto;}#map_canvas {height: 650px;}}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatLng = new google.maps.LatLng(42.449428,-76.512763); // -------- You can change this latitude longitude coordinate to change the default center of your map
var mapOptions = {
zoom: 3, // ------------ you can change this number to change the default zoom level of your map
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN // ----- You can change this maptype from TERRAIN to ROADMAP, SATTELITE, or HYBRID
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var flightPlanCoordinates = [
//********************* Paste your Excel data below between these asterisks
// sample that your data should look like:
// new google.maps.LatLng(43.123967,-85.3575963),
// new google.maps.LatLng(42.93363,-85.34192),
// ****************************
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: '#dd0000', // -------- change the color of your lines. You may use hex codes, rgb(x,x,x) values, or any other accepted javascript method.
strokeOpacity: 1.0, // --------- change transparency of your lines. Anything less than 1.0 is opaque, and 0 is completely transparent.
strokeWeight: 1 // ---------- change the width of your lines. You probably won't want anything thicker than 3 or 4.
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
STEP 6:
Now highlight all data in column V of your Excel spreadsheet by clicking on the letter V. Press Ctrl+C to copy the data. Navigate to your notepad file, click just below all the asterisks, then press Ctrl+V to paste all your data.
STEP 7:
Now save your notepad file WITH THE EXTENSION .html. For example, myebirdmap.html. You cannot forget the extension. If you do this correctly, your file should now appear in the location you saved it with the default opening program as your default web browser. Open it up. The moment of agonized anticipation while your browser loads the file... and hopefully it works!
You can change some settings of your map in the .html file you saved. I have put in detailed notes so you know exactly what to do.
If you have comments, or would like to share one of your maps, feel free to do so. If you need help, email support@birdventurebirding.com, and I'll get right back with you. Again, I probably will write a user-friendly application at some point, so that all you need to do is download your data and open up a webpage in the same location to view the map. Here are some ways I fiddled with my maps:
 |
| An obvious indication of where I bird most |
 |
| One of my birdchasing excursions at Whitefish Point and then straight down to Berrien County (well marked with eBird checklists) |
This is really cool!
ReplyDeleteThank you for putting this together! Very cool. And it works just fine on Mac using another text editor instead of notepad.
ReplyDeleteGlad to know it works on Mac too--there seemed to be some issues with other users, but this knowledge may settle their uncertainty!
DeleteInstead of dragging the right corner of the cell down, I just copied U2, clicked in U3, held the [SHIFT] key down and pressed [Page Down] several times until I reached the last cell and then did a paste. Did the same for the the V2 step. Worked great! Thanks for posting this. I'm on a Mac too. :-)
ReplyDeleteKevin....did you find that you had to do any different steps while working from your Mac? I havent been successful.
DeleteIf you're having persistent issues, feel free to email me at support@birdventurebirding.com with your excel file -- I'll put it together for you! All best, Zachary
DeleteIs there a version of the code that could be used to embed the map in a Blogger page? I tried selecting all of the code in myebirdmap.html and pasting it into a blogger page (I had Interpret Typed HTML selected), but the page didn't show anything. Thanks!
ReplyDeleteKevin, blogger has a difficult time with Google Maps, and the excessive length of the code makes it more complicated. I simply recommend viewing your LifeMap full-screen and then Printing to Screen, pasting your image in e.g. Power Point and saving the image as JPEG. Upload that and then put it in your blog. I personally haven't tried to make this work in Blogger because I hate all code-writing in Blogger.
DeleteThanks for the info... that's a good idea to just post a screenshot of the map!
DeleteVery cool. Interesting that you seem to have birded in (or close) to my birth place (north of france)!!!
ReplyDelete