Archive

Posts Tagged ‘map’

Resize Control PResizeControl for Google Maps

March 20th, 2010 4 comments



This Google map control adds a dynamic resize function to Google’s map API: You can enlarge or shrink the size of your google map via the resize handle in the right lower corner of the map.

The map control PResizeControl is based on map-in-a-box from Wolfgang Pichler (which bases on Dynamically Resize Google Maps With Mouse). Compared to Wolfgang Pichler’s version it is completed as standalone Google Map control. It also embeds the resize handle image and does not need an external image file (only older IE’s below version 8 could not handle embedded data (But IMHO this is a feature – not a bug!). Further you can resize only the height or widht depending on your configuration. Minimum and maximum of height and/or width is also suppored.


<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=..."></script>
<!-- Include resize control PResizeControl -->
<script type="text/javascript" src="./presizecontrol.js"></script>
<script>
function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(52.521653, 13.41091), 14);
    // Add resize control PResizeControl with default settings.
    map.addControl(new PResizeControl());
    map.setUIToDefault();
  }
}
</script>
</head>
<body onload="initialize">
<div id="map" style="width: 450px; height: 250px;"></div>
</body>
</html>

Note: The PResizeControl is used in the open-source project phTagr – a social photo gallery for its Geo coding and map display. The javascript file ./presizecontrol.js is extracted from the source of pmap.js of the photo gallery phtagr. Updates of PResizeControl will be commited to the phtagr source.

Variables of PResizeControl

PResizeControl.mode
Resize modes. Possible values are PResizeControl.RESIZE_BOTH, PResizeControl.RESIZE_WIDTH or PResizeControl.RESIZE_HEIGHT. Default is PResizeControl.RESIZE_BOTH
PResizeControl.minWidth
Minimal width of the map. 0 disables the minimum width. Default is 150.
PResizeControl.minHeight
Minimal height of the map. 0 disables the minimum height. Default is 150.
PResizeControl.maxWidth
Maximal width of the map. 0 disables the minimum width. Default is 0 (disabled).
PResizeControl.maxHeight
Maximal height of the map. 0 disables the minimum height. Default is 0 (disabled).

More PResizeControl examples

PResizeControl: Resize Width Only


var resizeControl2 = new PResizeControl();
map2.addControl(new resizeControl2);
resizeControl2.mode = PResizeControl.RESIZE_WIDTH;

PResizeControl: Resize Height Only


var resizeControl3 = new PResizeControl();
map3.addControl(new resizeControl3);
resizeControl3.mode = PResizeControl.RESIZE_HEIGHT;

PResizeControl: Minimal Size


var resizeControl4 = new PResizeControl();
map4.addControl(resizeControl4);
resizeControl4.minWidth = 450;
resizeControl4.minHeight = 250;

PResizeControl: Maximum Size


var resizeControl5 = new PResizeControl();
map5.addControl(resizeControl5);
resizeControl5.maxWidth = 450;
resizeControl5.maxHeight = 250;
Categories: Related Links, source, tools Tags: , , ,

phTagr runs on free web hoster!

January 9th, 2010 Comments off

I was just curious if phtagr runs fine on a free web hoster. And yes – it does and does a great job! This entry shows how you can setup your own photo web gallery – totally for free!

I chose the free hoster megabyet.net which comes with

  • Spam and ads free
  • 1,6 GB free storage
  • PHP
  • MySql database

… so all I need for running the gallery.

I signup at http://megabyet.com/signup.php for the free account, entered my new domain (of cause I choose the name phtagr), entered my name, email, and address. Then a captcha – success, I am human. After a few seconds I received an confirmation email with my new web space, username, password for the cPanel, and FTP.

Signup for a free web space at megabyet.net

So login to cPanel  for creating a mysql database – called phtagr, which becomes phtagrme_phtagr.

cPanel of megabyet.net

Successfull creation of a MySQL database

Successfull creation of a MySQL database

In the meanwhile I downloaded the latest phtagr source (r505) and extracted it locally. After doing that I was uploading it via FTP (FileZilla) the provided www directory of my new webspace.

Upload phtagr via FTP with FileZilla

Upload phtagr via FTP with FileZilla

Now its time to setup the new gallery! I opend the setup page of http://phtagr.megabyet.net/setup and followed the instructions. Everything worked fine. The connection to the database and the admin user creation had no problems.

Setup welcome screen

Setup welcome screen

Setup of database connection

Setup of database connection

Setup of admin account

Setup of admin account

I skipped these optional step

I skipped these optional step

As test images I used the screenshots which I did so far. I zipped them, uploaded the zip archive and imported the files after successful upload. Now it was time for some tagging.

Successful upload and extraction of the zip archive

Successful upload and extraction of the zip archive

Some tagging within the photo explorer

Some tagging within the photo explorer

The home page of phtagr

The startup page of phtagr

I wanted also to geo tag some images so I created a new google maps key (you need a google account for it) for the gallery URL http://phtagr.megabyet.net. The key was entered in the System -> Commands and now I was able to geo tag, too!

Entering the new key for google maps

Entering the new key for google maps

Geotagging with google maps

Geotagging with google maps

And as last test I did a WebDAV connection with cadaver to http://phtagr.megabyet.net/webdav. That worked, too!

WebDAV connection to gallery

WebDAV connection to my gallery files

So all in all it made lots of fun seeing this great gallery running on a free web hoster. You can upload your photos, tag them – also with geo location, see your images in the build-in slideshow, add other users with there upload quota, etc.

When do you install your own phTagr?

You can see all screenshots at the demo page or some screenhost at megabyet.net.

PS: What does not worked well was an initial setup at byethost.com where the database connection was not working for some reasons. Also the sending of email did not work out of the box at megabyet.net.

Multiple Map Markers

December 29th, 2008 Comments off

In revision 395 a new module was added for the google map. If you open the map of an image to see the geographic position, surrounding images are shown within map. The new module queries additional images – or markers – via Ajax in the background and add the overlays to the map. Its a pretty nice feature to see a geographic relation of your image.

A screenshot might help to describe the feature or visit the demo page for a live example.

Categories: announce Tags: , , ,

New GPS input filter

December 3rd, 2008 Comments off

Recently a new input filter for GPS data was added to phTagr. Now, NMEA files from GPS logger such as Sony’s GPSCS1 can be imported directly and adds the GPS coordinates of the images. Combined with Google Maps it adds a nice feature to the gallery to locate your image inside the map.

The GPS coordinates are exported to the EXIF header as GPSLatitude, GPSLatitudeRef, GPSLongitude, GPSLongitudeRef values on the next meta data sync.

While the GPS data are saved in UCT, your timezone of your image might be a different one. The current implementation has a static time offset of two hours (UCT+2), but a special option should be implemented soon. Also an import filter for KML files would be a nice option.

Categories: announce, Related Links, user Tags: , ,

Google Maps and RSS

May 24th, 2008 Comments off

phTagr supports now Google Maps and RSS feeds! Click here for a demo of the Google Map integration. To enable Google Maps you have to set the Google Maps key in Preference/System from the admin account.

The geo meta data is extracted from new images using Exif tags GPS Latitude and Longitude. I have written a small PHP tool gpssync (available here) which extracts the GPS position of an NMEA file (e.g. from the GPS tracker Sony GPS CS1). It estimates the position by linear interpolation and saves the GPS position using exiftool. Call “./gpssync.sh -g WG20080504135002.log *.jpg” to synchronize the geo positions to your images.

The phTagr image explorer provides now a RSS feed for new (public) images where users can subscribe to it to be informed about new images automatically. You can add the RSS feed (found here) to your favorite RSS reader (e.g. Thunderbird) and wait for new published images. You never need to visit the gallery again to check for new content!

Categories: Uncategorized Tags: , ,