Pixelpost version 1.5 JB Google Map addon version 1.0 http://www.jonbulava.com/projects/jbgmap.php Contact: jbulava [at] gmail [dot] com Copyright © 2006 Jon Bulava License: http://www.gnu.org/copyleft/gpl.html This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or any later version. 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. See the GNU General Public License for more details. Table of Contents: 1. What is jbgMap? 2. Installation 3. Changing Administration Settings 4. Assigning a Location to an Image 5. The Viewer's Map 6. Style Information and Cascading Style Sheets 7. Uninstalling jbgMap 8. Some Known Issues 9. Future Development *********************************************** 1. What is jbgMap? *********************************************** jbgMap is a robust Google Map addon that puts a great amount of control in your hands. And most importantly: It doesn't matter if your images have embedded GPS data or not. jbgMap is short for JB Google Map or Jon Bulava's Google Map (for lack of a better title). It is a Pixelpost addon that allows the owner to give GPS locations to their images regardless if you have GPS equipment or not. The addon was created with the casual photographer in mind, who may or may not know much about GPS or even what it stands for! The administration side allows the owner to navigate a Google Map and manually place a marker where each picture was taken. The GPS data of this marker is stored in the Pixelpost database and processed without any sticky conversions or in-depth knowledge. A later version will allow the owner to automatically use EXIF GPS tag data to skip this manual step or use it to 'tweak' a picture's position. Once a photo has a location, it's ready to be shown on the main map that your viewers see. Using it is that simple. The installation is just as easy. *********************************************** 2. Installation *********************************************** There are two parts to install here: the admin side and the viewer side. A. Administration Side ---------------------- * Drop the 'admin_jbgMap.php' file into your 'addons' directory. * Place the two PNG image files in your 'includes' directory located on the root of your Pixelpost. (mm_20_transparent.png and thumb_trans.png) * Login to your Pixelpost admin site and go to the 'addons' tab. The first time viewing this page, the new PHP file will add a column to your image table for Google Map coordinates and create a 'jbgmap' table for storing settings. * Now you need to obtain Google Map API keys from Google. They are long encrypted strings that track the map data used. These are directory specific so if you try copying one from someone else, sorry it won't work. For this reason, you need one for your main Pixelpost link and one for the admin section. So basically, one for www.yourpixelpost.com and one for www.yourpixelpost.com/admin . Once you have these, place them in the appropriate text fields on the admin page and click 'Update Settings'. * At this point, all administrative settings should be functional. To make sure your admin API key works correctly, click the links to load the maps. You should see the default zoom and center displaying the entire United States. Feel free to change settings at this point, but they are described in detail later on for better understandability, as well as setting locations for individual photos. B. Viewer Side -------------- This is where things can get complex depending on how much you know about Pixelpost. Don't panic, it's not bad. If you understand how to make/edit HTML and write CSS style, you'll have no problem. Either way, I'll try to make this as simple as possible for everyone. You need to create a new template file for your main display map. The easiest way to accomplish this is to open one of the HTML files in the template you are currently using ('browse_template.html' for example), and save it as 'jbgmap_template.html'. You will notice that pages, like browse, use tags which are replaced by PHP code later on. jbgMap uses this same principle. I've created two tags for use in template files: and . Now simply replace the middle div of the page with . Use
tags if you want to center the map. Here is an example below of my situation (I use the simple template that comes with Pixelpost). Saved 'browse_template.html' as 'jbgmap_template.html' and replaced:
Browse Archive:



with: JBG Map:

If your template also has a navigation bar, use the tag to add a link to this new (and other) template page. It contains the entire tag when replaced so, for example, adding the link would work like this: Before: Home | Browse | About After: Home | Browse | | About MOST IMPORTANTLY, we want to load the map automatically when the page loads. In order to do this, two onload/onunload functions need to be added to the body tag in this template file. Replace '' with: jbgMapLoad() loads the map when going to the page and GUnload() is a Google function that cleans server memory and other behind the scenes stuff. If you already have an onload function, simply separate them with a semicolon: Once this is complete, go to your Pixelpost and take a look. Most likely, the map will be showing, but there may be some hidden style issues to deal with later (e.g. image transparency), but we won't run into this until we put some data on the map. Congratulations! The jbgMap addon is ready to go! *********************************************** 3. Changing Administration Settings *********************************************** Here is a description of all administrative settings located on the addons section. * Google Maps API Keys: These need to be acquired from Google in order to use their Google map technology. You will need to get a Google account if you do not have one already (G-Mail members obviously have an account). Go to http://www.google.com/apis/maps/ and click on 'Sign Up.' You will need one for the main Pixelpost directory and one for the admin directory (www.yourpixelpostsite.com AND www.yourpixelpostsite.com/admin). * API Version: If Google should upgrade their API version, it can easily be changed here instead of editing all the JavaScript in the add-on code. * Display Map Size: This is the size of the map your visitors will see in pixels. * Initial map type: The map type that your visitors will see when the page is loaded. The three types are MAP-Shows drawing and roads; SATELLITE-global images; HYBRID-Combination of the other two. * Icon style for Markers: Markers are the objects used to mark the location of each image in your Pixelpost. You can choose from the default Google marker, a smaller red marker, or an actual thumbnail image. It should be noted that extra files are needed if one of the last two options are selected. An additional transparent image is needed in order for clicking to be possible within info windows' shadows. These images are included in the download (mm_20_transparent.png and thumb_trans.png) and should be placed in the 'includes' folder that is in the Pixelpost root directory. * Information to display in info windows: Check what information you would like to show up in the map's info windows when a marker is clicked. Options include a linked thumbnail, headline, date, time, and categories. * Set center and zoom levels: Use this section to set the default center and zoom levels of the edit-image map, which is used to set coordinates for each image, and also for the map that your visitors will see. Simply put the maps where you want them and click 'Update Settings.' *********************************************** 4. Assigning a Location to an Image *********************************************** To give an image a location, log into the administration page and click 'Images', then '[Edit]' for any existing image. The map addon creates a submenu item in this section titled 'JBGOOGLEMAP.' From this section, you may load the edit-view map and click where the image was taken (reset and deletion instructions located on the page as well). A future version of this addon should include the usage of EXIF GPS tags if they exist to create the image's Google Map location. In the meantime, the 'Use EXIF Tags' button will not do much. This new functionality is difficult to test since I do not have the equipment personally, and therefore, no image examples either. I've recently acquired some that I believe will work, so this is my next item to add. *********************************************** 5. The Viewer's Map *********************************************** Now that you have some photo locations marked, take a look at that template page that was created earlier (Presumably at www.yourpixelpost.com/?x=jbgmap). THINGS MAY LOOK MESSY THE FIRST TIME AROUND. Don't worry, this is normally because the map inherits style from the page. Check out section 6 on style for more information. The way this map works should be self-explanatory. Clicking on a marker will pop-up an info window and display the information you specified on the admin side of the addon. If you are displaying a thumbnail, clicking it will take you to its full size page. For future development, see section 9. *********************************************** 6. Style Information and Cascading Style Sheets *********************************************** Site style is inherited by the elements within the Google Map. Therefore, if you are using some of the CSS that comes with the Pixelpost download, or your own, it is possible for some conflicts to occur right away. For example, if a style definition like the one below is being used, you will have an issue with the backgrounds of Google map markers. #page img { background:#fff; padding:5px; border:1px solid #333; } This exact issue happened in my case. Here was my initial solution, however not that necessary, so just skip to the next paragraph if you don't get what I'm talking about. Since the above style appeared to only be used for thumbnails under the browse page, I first limited its scope by changing it to "#page #browse img" in both CSS files (light & dark, the template I'm using). Then I edited the browse template file to say '
' instead of '
'. Problem solved (if you know what you are doing with style). To lessen this kind of hacking to make the addon work, I used style IDs in the code that can be used in CSS files that you are currently using. Odds are you will have to do some tweaking using these below to get exactly what you want. They will inherit from predefined divs, imgs, and spans, but simply over-ride those effects by adding these to the appropriate CSS files. div#viewMap - Entire Map div div#jbgInfoWindow - Google Map Info Window img#jbgThumb - Thumbnail in Info Window span#jbgheadline - Headline in Info Window NOTE: Width and height of the entire map div are set on admin page and do not need to be changed via style. The same goes for the width and height of the thumbnails which are defined in the admin options. Here is an example of style that may be useful; it's what I use. div#viewMap { border: 1px solid #333333; } div#jbgInfoWindow { width: 250px; height: 75px; text-align: left; color: #333333; } img#jbgThumb { border: 0; margin: 0px 5px 0px 0px; } span#jbgHeadline { font-weight: bold; } *********************************************** 7. Uninstalling jbgMap *********************************************** Currently there is no user-friendly way of deleting this addon. I spent so much time writing it, I never thought that someone may want to delete it! However, here is a checklist of things you need to manually delete. Files: 'admin_jbgMap.php' in addons folder 'jbgmap_template.html' in you template folder 'mm_20_transparent.png' image in includes folder 'thumb_trans.png' image in includes folder Database data: 'jbgMap' table which contains setting information 'jbgMap' COLUMN in 'pixelpost' table. Note: THIS IS WHERE ALL YOUR IMAGE DATA IS. MAKE SURE YOU ONLY DELETE THIS COLUMN AND NOT THE WHOLE TABLE. If you are not familiar with database administration, just leave these items floating in your database until I release another version that may do this for you. *********************************************** 8. Some Known Issues *********************************************** No transparency behind map markers See Style Information section The space for the map appears, but the map doesn't load Make sure that you have placed the onload and unload functions in the body tag of your map template file. *********************************************** 9. Future development *********************************************** * New tag: JBG_PICTOMAP This tag will be used on your image template. It will be a link to the jbgmap template file with the photo's id as a passed value. If coordinates exist for this image, the info window will pop up automatically. * New tag: JBG_LIST A possible extension to be placed under the main display map that will show either an entire list of titles or set of thumbnails of those images with coordinates. I might include this as an option on the admin side instead of a tag to simplify things. * Limiting the pictures on the map to a specified category (similar to the browse page) map also be in the works. If you have any ideas that may make this map addon more useful, please feel free to email at jbulava [at] gmail [dot] com.