Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

Author Topic: Simple Google-Maps button (show photos on a map)  (Read 32961 times)

0 Members and 1 Guest are viewing this topic.

baerlichkeit

  • Contributor
  • Coppermine novice
  • ***
  • Offline Offline
  • Posts: 26
    • Meine Seite - Makrograf.com
Simple Google-Maps button (show photos on a map)
« on: October 25, 2007, 04:54:36 pm »

Hi,
I'm using coppermine for some time now and I'm actually building a theme, satisfying my needs... I learned a lot by reading this forum, so thank you all out there!

But, that's not what I wanted to share with you. I bought a GPS-Data Logger and write the informations in my pictures EXIF-data... it was my goal to present visitors of my site these information, show them where a photo was taken.

There is this one huge google-maps plugin here, but this one is not using any EXIF-information afaik. I wanted a button/a link to the map, showing the pictures location... and if I'm not wrong, there is nothing like this here in this forum.

in a nutshell:
I placed a link to a new "map.php" in the image navigation bar, which opens the google-map with a marker on it in a new window. The geo-infos are passed to map.php via parameters.

For an example goto: KLICK and press the Globe-button labeled "Landkarte"

Install:
1. create a map.php in your gallery-folder.
Code: [Select]
<?php

$latitude 
$_GET["latitude"];
$longtude $_GET["longtude"];
$image $_GET["image"];

echo <<<EOT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Kartenansicht</title>
 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOUR GOOGLEMAPS KEY" type="text/javascript"></script>
<style type="text/css">
<!--
#map {
width:500px;
height:350px;
display:block;
}
-->
</style>
<script type="text/javascript">

    //<![CDATA[
window.onload = function(){
load();

}
function load() {
 
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.enableContinuousZoom();
map.enableDoubleClickZoom(); 
        map.setCenter(new GLatLng(
{$latitude},{$longtude}), 13);
         var center = map.getCenter();
var center_y = center.y
var center_x = center.x 
GEvent.addListener(map, "mouseover", function(){
map.showControls();
});
GEvent.addListener(map, "mouseout", function(){
map.hideControls(); 
});
var infoTabs = [
new GInfoWindowTab("Standort"," <div style='text-align:center;'><img style='width:60px;vertical-align:middle;' src='
{$image}'><\div>")
];
var marker = new GMarker(map.getCenter());
map.addOverlay(marker);
var windowOptions = {maxWidth: "95"}; 
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs,windowOptions);
});
      }
    }

    //]]>
    </script>


</head>

<body>
<center>
                                 <div id="map"></div>
</center>
</body>
</html>
         

EOT;

?>
IMPORTANT: you need your own Google-Api Key: http://www.google.com/apis/maps/
=> you have to replace "YOUR GOOGLEMAPS KEY" with the key, the map won't show up otherwise.

2. Read the Geo-Information
Open your theme.php
If you can't find theme_html_img_nav_menu() or $template_img_navbar in your theme.php, copy it from the theme.php inside the sample-theme folder of your cpg installation.

AFAIK the cpg is not saving any Gps-information, please correct me, if I'm wrong. I found a code-snippet in a German forum: klick and used it inside the theme.php.
IMPORTANT: I wanted a button/link placed in the image navigation bar, and I'm not very used to php, so adjust the code if you want the button to appear somewhere else...
So the following is for a link in the navigation bar:
Find:
Code: [Select]
function theme_html_img_nav_menu()
{
global $CONFIG, $CURRENT_PIC_DATA, $meta_nav, $THEME_DIR ; //$PHP_SELF,
    global $album, $cat, $pos, $pic_count, $lang_img_nav_bar, $lang_text_dir, $template_img_navbar;

And place the following code behind it:
Code: [Select]
//Read EXIF
$exif = exif_read_data(get_pic_url($CURRENT_PIC_DATA,'fullsize'), "IFD0");
  $exif = exif_read_data(get_pic_url($CURRENT_PIC_DATA,'fullsize'),"",true,false);

   $GPSLink = "";
 
    foreach ($exif as $key => $section) {
   
        foreach ($section as $name => $val) {
               
            if ("$key.$name" == "GPS.GPSLongitude" )
            {
                $temp = explode("/", $val[0]);
                $x = $temp[0] / $temp[1];
                $temp2 = explode("/", $val[1]);
                $y = $temp2[0] / $temp2[1];
                $temp3 = explode("/", $val[2]);
                $z = $temp3[0] / $temp3[1];
                $GPSLongtude = ((($z / 60) + $y) /60) +$x;
               
            }
                 
            if ("$key.$name" == "GPS.GPSLatitude" )
            {
                $temp = explode("/", $val[0]);
                $x = $temp[0] / $temp[1];
                $temp2 = explode("/", $val[1]);
                $y = $temp2[0] / $temp2[1];
                $temp3 = explode("/", $val[2]);
                $z = $temp3[0] / $temp3[1];
                $GPSLatitude = ((($z / 60) + $y) /60) +$x;

            }
       
        }
    //If GPS-informations were found, create the link   

}
if ($GPSLatitude != "" and $GPSLongtude != "") {
$imageurl=get_pic_url($CURRENT_PIC_DATA,'fullsize');

                //create the link, edit title and img src.
$GPSLink = <<<EOT
<a href="map.php?longtude=$GPSLongtude&latitude=$GPSLatitude&image={$imageurl}" onclick="openMap(this.href); return false" title="Marker auf der Karte anzeigen"><img src="{$location}images/karte.png" border="0" align="middle"/></a>
                   

EOT;
    }

Here, the EXIF is read, than searched for GPS-Information, and if some were found, a link to map.php is generated. You have to edit the link, to define your own image/text...

Find the params array inside function theme_html_img_nav_menu() (before the closing bracket) and add a param for the template:
Code: [Select]
'{GPSLINK}' => $GPSLink,Perhaps something like this is the result:
Code: [Select]
$params = array('{THUMB_TGT}' => $thumb_tgt,
        '{THUMB_TITLE}' => $lang_img_nav_bar['thumb_title'],
        '{PIC_INFO_TITLE}' => $lang_img_nav_bar['pic_info_title'],
        '{SLIDESHOW_TGT}' => $slideshow_tgt,
        '{SLIDESHOW_TITLE}' => $lang_img_nav_bar['slideshow_title'],
        '{PIC_POS}' => $pic_pos,
        '{ECARD_TGT}' => $ecard_tgt,
        '{ECARD_TITLE}' => $ecard_title,
        '{PREV_TGT}' => $prev_tgt,
        '{PREV_TITLE}' => $prev_title,
        '{NEXT_TGT}' => $next_tgt,
        '{NEXT_TITLE}' => $next_title,
        '{PREV_IMAGE}' => ($lang_text_dir=='ltr') ? 'prev' : 'next',
        '{NEXT_IMAGE}' => ($lang_text_dir=='ltr') ? 'next' : 'prev',
        '{REPORT_TGT}' => $report_tgt,
        '{REPORT_TITLE}' => $lang_img_nav_bar['report_title'],
        '{LOCATION}' => $location,
        '{GPSLINK}' => $GPSLink,
);

3. Add the Link to the navigation bar

Find
Code: [Select]
$template_img_navbar = <<<EOT and add a new table-cell. The width depends on the image/text-size in the $GPSLink defined above.
Code: [Select]
<td align="center" valign="middle" class="navmenu" width="131">
{GPSLINK}
                </td>
.
I placed it next to the slideshow-button.
Code: [Select]
$template_img_navbar = <<<EOT

        <tr>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{THUMB_TGT}" class="navmenu_pic" title="{THUMB_TITLE}"><img src="{LOCATION}images/thumbnails.png" align="middle" border="0" alt="{THUMB_TITLE}" /></a>
                </td>
               
               
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="javascript:;" class="navmenu_pic" onclick="blocking('picinfo','yes', 'block'); return false;" title="{PIC_INFO_TITLE}"><img src="{LOCATION}images/info.png" border="0" align="middle" alt="{PIC_INFO_TITLE}" /></a>
                </td>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{SLIDESHOW_TGT}" class="navmenu_pic" title="{SLIDESHOW_TITLE}"><img src="{LOCATION}images/slideshow.png" border="0" align="middle" alt="{SLIDESHOW_TITLE}" /></a>
                </td>
<td align="center" valign="middle" class="navmenu" width="131">
{GPSLINK}
                </td>
                <td align="center" valign="middle" class="navmenu" width="100%">
                        {PIC_POS}
                </td>

4. Javascript
open template.html and add the following code to the <head> of your html.
Code: [Select]
<script  type="text/javascript">
function openMap (Adresse) {
  MeinFenster = window.open(Adresse, "Kartenansicht", "scrollbars=no,toolbar=no,status=no,resizable=no,width=500,height=350,left=100,top=200");
  MeinFenster.focus();
}
</script>



That's all... and i hope it works for you  ;D This is the first time i share something like this, and i hope there are no errors in the code above. Better try this with a testserver ;) If you find anything wrong, tell me and I will correct it.

I hope someone can use it, because i love this geotagging-thing :)

Andreas
« Last Edit: November 15, 2007, 07:18:23 pm by GauGau »
Logged

baerlichkeit

  • Contributor
  • Coppermine novice
  • ***
  • Offline Offline
  • Posts: 26
    • Meine Seite - Makrograf.com
Re: Simple Google-Maps button (show photos on a map)
« Reply #1 on: October 25, 2007, 09:01:29 pm »

Ok,
here are some additional infos, I hope it's ok to answer and not to edit...

Geotagging

To get this "hack" working, you'll need pictures with location-data inside their EXIF. There are two ways to get images with these (well, perhaps there are some more):

1. You have some sort of GPS-data logger.
A device, capable of writing a tracklog. Then it's possible to "sync" your tracklog with your pictures taken during this time.
I use GPICsync, because this program can handle raw-files. GPICsync also exports your track to a google-earth file, if you wish.
IMPORTANT: make sure the clocks of your camera and your GPS-Device use the same timezone!

2. You have no GPS-device.

Than you have to assign your picture a location "by hand". That does not mean: "open your exif-editor and copy/past location variables from google"  :D
You can use different programs to place the pictures on a map. (i tried two of them until now)
...
[/list]

Robogeo isn't for free, if you try it, the written gps-data will be wrong. Locr GPS is free an works (tried it a minute ago).
I attach a sample image and the fitting google-earth kml (rename the libelle.jpg.kml.txt to libelle.jpg.kml) to this post, so you have something to play with :)

Andreas
Logged

rubenix

  • Coppermine novice
  • *
  • Offline Offline
  • Gender: Male
  • Posts: 43
    • Rubrenix Gallery
Re: Simple Google-Maps button (show photos on a map)
« Reply #2 on: October 26, 2007, 11:55:21 am »

Thank you baerlichkeit works fine for me I just neeed some kind of guide to use the locr GPS software pliz...

very nice contribution!  :P
Logged

baerlichkeit

  • Contributor
  • Coppermine novice
  • ***
  • Offline Offline
  • Posts: 26
    • Meine Seite - Makrograf.com
Re: Simple Google-Maps button (show photos on a map)
« Reply #3 on: October 30, 2007, 02:38:02 pm »

Uh,
forgot to answer :)

The Locr-Software is very easy to use.

1. Open it
2. drag and drop your photo from your computer/desktop/folder to the "Images" part of locr GPS Photo. Alternatively you can use the "add"-button
3. locate the position of the selected picture in the map and press the manual geotagging button

And, there is a  help included with this software ;)

have fun :)
Logged

baerlichkeit

  • Contributor
  • Coppermine novice
  • ***
  • Offline Offline
  • Posts: 26
    • Meine Seite - Makrograf.com
Re: Simple Google-Maps button (show photos on a map)
« Reply #4 on: November 12, 2007, 11:53:15 am »

Hello,
not really an update, but my theme works for me now (well, I'm still working on it :D), and so you can see the button "in action" there.

For an example goto: KLICK and press the Globe-button labeled "Landkarte"

mfg Andreas
Logged

BorOl

  • Coppermine newbie
  • Offline Offline
  • Posts: 4
Re: Simple Google-Maps button (show photos on a map)
« Reply #5 on: November 15, 2007, 11:29:30 am »

Hi!
Thank you, baerlichkeit, for the great mod. I've modified it to use with Google Map in Coppermine Gallery ( http://forum.coppermine-gallery.net/index.php?topic=31206.0 ) mod, and I'm very happy with this. Thanks!

For those who want the same:
In theme.php I've REPLACED everything BETWEEN:
Code: [Select]
//Read EXIF(to clear things up you can change it to "read coordinates" :) )
and
Code: [Select]
if ($GPSLatitude != "" and $GPSLongtude != "") {with the code reading coordinates from database:
Code: [Select]
$query = "SELECT *
FROM {$CONFIG['TABLE_PICTURES']}
WHERE
pid = {$CURRENT_PIC_DATA['pid']}
LIMIT 1;
";
$result = cpg_db_query($query);

if($row = mysql_fetch_array($result))
{
    $CURRENT_PIC = $row; //send a copy to get_pic_url it messes with the vars
$GPSLatitude = $row['latitude'];
$GPSLongtude = $row['longitude'];
}
(Look out! There's a letter i missing in $GPSLongtude! It is used like this in baerlichkeit's code so I haven't changed it.
Logged
Pages: [1]   Go Up
 

Page created in 0.024 seconds with 19 queries.