Jump to content

Glasseye Snapper

Member Since 11 Oct 2005
Offline Last Active Yesterday, 04:35 PM

Posts I've Made

In Topic: Mirror, mirror, on the wall ...

07 April 2014 - 06:26 PM

You're welcome and apologies for not including the Sony SLT. I guess they are a bit in between, but more towards DSLR than CSC.

In Topic: mapping dive site

07 April 2014 - 04:42 PM

Yes I found that annoying too, but you can use regular google maps scrolling by either dragging the map or using the up/down arrows to see the images in full. Still it is clear that there is only a small number of thumbnails that can fit on the map so another method is needed.


In the latest version the browser window is divided into two panels: the map on the left and an info side panel on the right. At the moment it shows static text and images but I want to have the map and info panel communicate so you can select what you want to see and get a decent size image plus text in the info panel and markers in the map panel to show where to find them in the dive site. The info panel also has a scroll bar, so it can have a lot of information when needed.


Latest: http://hazeslab.med....Twin_Rocks.html



In Topic: mapping dive site

06 April 2014 - 02:31 PM

Rather than hard-coding each feature added to google maps I wanted to create a simple list, with one entry for each feature. That required a bit of reading about javascript, which seems to be an interesting programming language and not too hard to understand if you are already familiar with a language like python.


To see the results for the Twin Rocks dive site go to: http://hazeslab.med....Twin_Rocks.html

To see the results for the Anilao dive area go to: http://hazeslab.med....eMapAnilao.html

(these links are temporary. I will post a more permanent place in late June, after I get back from my trip).


Hovering over each feature gives you a label.

Clicking a dive site icon jumps to that site but currently I'm only working on the Twin Rocks (all others link to that page for now).

Clicking on a fish, gives a larger picture, common and scientific name, habitat description, and link to fishbase.


Ultimately, I want to have some buttons or pull-down menus outside the map where you can select to see just all butterflyfishes, corals, nudis, ... But that is for another weekend.




Here is how the three fish features are implemented



var fishList = [

  {family:'Pomacentridae', genus:'Amphiprion', species:'ocellaris',

   common:'False clown anemonefish', pict:'PICT0492',

   habitat:'always lives in/near an anemone',

   position:new google.maps.LatLng(13.689823, 120.889906)},

  {family:'Carangidae', genus:'Caranx', species:'sexfasciatus',

   common:'Bigeye trevally', pict:'PICT1171',

   habitat:'forms a large school near Twin Rocks pinnacles during the day. Hunts at night',

   position:new google.maps.LatLng(13.690522, 120.889039)},

  {family:'Chaetodontidae', genus:'Chaetodon', species:'baronessa',

   common:'Eastern triangular butterflyfish', pict:'PICT0458',

   habitat:'Coral-rich areas. Mostly along reef edge at Twin Rocks',

   position:new google.maps.LatLng(13.690699, 120.889243)}



Adding a new species is as easy as duplicating an existing one and updating the fields between curly braces. A bit of javascript then creates all the thumbnails with associated popup info window and even the link to fishbase. A similar list defines position, names, and URLs for dive sites.

In Topic: mapping dive site

02 April 2014 - 07:37 PM

The map now has one marker that, upon clicking, shows and infowindow with image, title and link to the corresponding page on fishbase. I also got some neat icons for the dive site and resort. Unfortunately, they work on my laptop but no longer when transferred to the server, at least not until I sort it out.


The image window is nice if you have a few images or stories to add. For larger numbers there is a "panoramio" interface, where you can add many tagged images and show subsets based on the tags. That will be the next experiment.


Here is the latest version




I also made a hierarchy starting at http://members.shaw....veMapWorld.html


Double clicking the markers hops from world to Philippines, Anilao, and then Twin Rocks.

In Topic: mapping dive site

31 March 2014 - 08:13 PM

I played around with html5 libraries and the google maps api. Really cool!


Check out http://members.shaw.ca/bhazes/example5


I can do pretty much anything I could do on the static image but now you can use all the normal tools to zoom and pan, change from satelite to map view, etc. By using the api directly you also get around the fact that you are not supposed to copy images from Google maps. There are other nice tricks. A place marker can show pop-up text when the mouse hovers over it. In this case you can also drag the marker to different places and the longitude/latitude for that spot are then displayed above the image. I used that to find the coordinates I needed to draw the polygons. A GPS tracker (Columbus V-990) is on its way which should make placing marks and polygons a lot easier and more precise. Instead of plain markers you can also use icons that depict jpeg or png images and lots more.


To take it to the next level I think it may be possible to combine google api with libraries that give a more dynamic interaction; such as menus to show/hide items, play videos etc. The only thing missing is enough time to play with all the neat tools.