London Virtual Tours And Web Design company

I recently gave a short talk at a Panotools conference held in Plymouth about creating a dynamic geolocated panoramic content management system, using wordpress and a great plugin called Geomashup by Dylan Kuhn (aka Cyberhobo).  The system is ideal for city guide websites or anyone getting into panoramic photography who wants to geolocate there portfolio using Google maps.

Wordpress + Geomashup = Geolocated panoramic CMS (content managed system)

Wordpress requires that your domain hosting comes with a mySQL database, so check you have this first.

1. Install Wordpress – From http://wordpress.org/

Simple 5 minute install – http://codex.wordpress.org/Installing_WordPress#Famous_5-Minute_Install

Wordpress theme – Find a theme for wordpress, just search on Google for “free wordpress themes”.

Find a nice 2 column theme, with a main content area and a sidebar. The basic plan is to have one page with a global map, that shows all your geolocated posts, and 1 page that will show your panorama, with a smaller map, to show the location in more detail.

Map page	Panorama page

2. Install Geomashup plugin – Created by Dylan Kuhn from Canada.

Either install through wordpress, and download it from here – http://code.google.com/p/wordpress-geo-mashup/

Geomashup documentation – http://code.google.com/p/wordpress-geo-mashup/wiki/Documentation

Getting Started

Once you have wordpress installed and Geomashup plugin activated you will be prompted to get a Google map API key. On the Geomashup settings page, follow the link to Google maps terms and conditions and enter in your site url, and obtain your free key from Google which can then be copied and pasted into the Google API key box on the Geomashup settings page.

Geo Mashup lets you save GPS location information for your wordpress posts (panoramas). The posts can then be displayed on a global map with markers, or on a single map, or even a catergory map. Geo Mashup maps will be blank, until you’ve saved at least one location to put on the map.

Save locations for posts or pages

The below image shows a post page where you would enter in a title and the html code to display your panorama (whichever panoramic viewer you use), you could also catergorise and tag your panorama here, as well as add any descriptions.

Underneath the description box you will see the Geo Mashup Google map, where you can enter your posts location, either by typing in the name, or the lat and long coordintes, or simply by clicking and dragging the marker on the map.

Click ‘Save or publish’ and you have you first post geolocated.

Next you need to create a page that will show your global map of panoramas. You can put a map in any page, post or in a text widget for the sidebar, by typing the shortcode


into the editor. Look at the TagReference for more options. These short tags are great as they tap into complex functions already created for you.

A short tag looks like this

What’s Next ?

Now use your imagination ! Great for tourist guides…..etc as you can catergorize your panoramas into e.g Landmarks, churches, restaurants, hotels, etc. Wordpress also has tags and search functions, which can be useful, to help find panoramas easier.

In the admin section of wordpress, look for Geomashup, lots of options for how the map will look, ie. size, navigation controls, Map type (road, satellite, hybrid, terrain, and Google Earth), Google search bar, cluster markers etc. Read the short documentation and use the shortags to show many advance features, use the custom js file to add snippets of code to assign icons to catergories.

Examples

Example 1 – http://www.london-experience.co.uk/

Example 2 – http://www.london-virtual-tours.co.uk/

Example 3 – http://www.globalstories.org/wp/

Example 4 – http://toursfromabove.com/map/

I will be adding more updates to this tutorial very soon, with instructions on how to add different icons to markers, how to make catergory maps, click marker to post function, and how to make a modal window.