Geobrowser Walk-through

Geobrowser v0.1 Install Walk-Through

This walk-through was written and illustrated by Patrick Hayes, Ryan Mijker and Charles Burnett. Please leave comments and suggestions below.

We are going to start this guide assuming that you have a working installation of Drupal (v.5) on your server. Many internet hosting companies have these resources ready to go (more info http://drupal.org/node/19674). So let's proceed to install, configure and add data to a fresh install of the Drupal Geobrowser module.

The steps outlined in this walk-through are:

1. Activate the modules
2. Create a content type for mapped features
3. Configure your icon sizes
4. Create vocabularies
5. Create categories
6. Configure Geobrowser
7. Add your first point
8. Explore your map
9. Conflicts, troubleshooting, and common problems
10. Comments and suggestions

1. Activate the modules

Geobrowser has a few dependencies and a few optional modules.

Go to Administer > Site Building > Modules

Click on the radio buttons beside the following:

• Location: allows attaching ‘locations’ to any content type
• Fivestar: Geobrowser uses fivestar to determine which points to display first on a crowded map
• Voting API: needed by fivestar
• Taxonomy Image: manages icons for categories
• Geobrowser: Our mapping module!

Click 'Save'.

Return to top

2. Create a content type for mapped features (points)

Go to Administer > Content Management > Content Types

Click “Add Content Type”

Click “locative information” and a lot of extra information will be displayed.

• Set “maximum number of locations for this type” and “Default number of location forms” to 1.
• Do we want to collect addresses for our points? You can leave all these as "Do not" for now. You may want to change this in the future. If so, select the address fields you wish to collect. These addresses can be used to ‘geocode’ points so that we only need to input addresses, and have the computer figure out latitude and longitude .

You can collapse the 'Locative information' section now.

Under “Identification” let’s fill out some general information about our new node type.

• Name – What are we mapping? Businesses? Points? For this example, let's name the Content Type "Sites".
• Type – think of this as the ‘email address’ of our content type – it should generally reflect the name, but needs to conform to a strict format (no spaces or punctuation). For this example, let's use "map_sites".
• You can (and should) add some Description. This shows up in the help section and is useful for newbies.
• The Submission form information can be left alone, or change it to 'Name' and Description instead of Title/Body, if you like.
• (OPTIONAL) Click on ‘Fivestar rating’ and click ‘enable fivestar ratings’. This will allow us to sort which nodes to display first when we have a crowded map.
• Workflow... Make sure 'Published' is checked. You may want to click OFF 'Promoted to front page' and 'Disabled for Default comment setting'.
• Attachments is good to Enable, as you may want to have people add files to the map nodes. However, if you are worried about people uploading the wrong kind of content, turn this off. You can control access to uploads using roles & Access permissions, of course.

All done!

Click “Save Content Type” at the bottom of the page.

3. Configure your icon sizes

Go to Administer > Site Configuration > Taxonomy Image

Drupal will have added a location for the 'Picture image path'. Leave this alone unless you want your icons in a different place.

Find some icons. Search the web or make you own. I grabbed some from http://econym.googlepages.com/geicons.htm

Set “Constraint” to exact and pixel size to your icon size. Drupal is smart enough to use the GD graphics library to change the icon sizes on the fly, but the effects may not be as good as what you can do with your paint program (GIMP, Photoshop). Let's use 32x32 for this example. You can play with this another time. For example, you may want your taxonomy images to be larger for some taxonomy categories, and thus you would choose to have Drupla NOT fix at 32 x 32.

Click “Save Configuration”.

4. What to Map? Create vocabularies

Go to Administer > Content Management > Taxonomy

Click the “Add Vocabulary” tab

What is a vocabulary? What isn’t a vocabulary? Vocabularies can be thought of as “properties” or “attributes” that we can use to sort our content. A ‘category’ is a specific instance of a vocabulary. For example: Colour is a vocabulary. Blue is a category. Shape is a vocabulary. Round is a category. For more infomation, see http://drupal.org/node/46268

• Give our vocabulary a name. For this example, let's call the vocabulary “Map Site Types”. You might already have a vocabulary categorizing nodes on your site.
• Under “Content types” select the node-type created in the previous step (we called the node type "Sites").
• Hierarchy should be set to either be “Disabled” for only a few categories – or “Single” to organize sub-categories. Let's go with Single.
• Click “required”

Click “Submit” to save.

5. Create Categories

Once you have created vocabularies you can add categories to them.

Go to Administer > Content Management > Taxonomy

Click “add terms” to the vocabulary we wish to add (for example “Map Site Type”). Give the new category a name and – as we are building a system with sub-categories – choose a parent.

For this example add the following:

• Add a category called "Ride Share" with a parent "root". Click "Save".
• Add a category called "Social Services" with the parent "root". Click "Save".
• Add a category called "Drivers" with "Ride Share" as the parent. Click "Save".
• Add a category called "Information" with "Social Services" as the parent. Click "Save".

Voila, you have a basic hierarchical taxonomy.

Now let's add pictures to all those categories.

Go to Administrator > Content management > Taxonomy

Click "list terms".

• Click "Edit" beside the taxonomy term you want to add an image to.
• Scroll down and click “Term Image” at the bottom of the page.
• Upload an icon (see below for some demo icons).

Click "Save".

6. Configure Geobrowser

Permissions:

Go to Administer > User Management > Permissions

Under “geobrowser module” select “access geobrowser” for relevant roles – likely all of them!

Go to Administer > Site Configuration > Geobrowser

• Centre map and zoom level. Use Patrick's Google Maps Helper to fill in these default map view options.
• Select the vocabulary layer we created earlier (that is "Map Site Type")
• Leave Multiple Vocabulary logic as it is for now.
• Get a GMap key Free - point your browser at http://code.google.com/apis/maps/signup.html
• You may change “Map Title” if you wish. Let's call our "My Mapped Drupal Nodes".
• Additional HTML/PHP: If you wish to allow users to add points directly on the map add the following code: <a href="#" OnClick="new_marker('**nodetypehere**')">Add New Marker</a> ...Where **nodetypehere** is the node type created earlier (the machine readable ID!) - in this case "mapsitetype"
• Draggable icons – click this if you wish users to be able to move points Initial page – enable this for now.

Click “save”

Click the “basemaps” tab at the top.

• Enable any google maps base map types you wish to use – select your default

Click “Save Base Map Configurations”.

7. Add your first point

There are two methods you can use to add points to geobrowser:

1. The first is manually enter latitude and longitude.

• Click “Create Content” (on the lef-hand side menu) and then the node-type we created earlier. (We called the node type "Sites".)
• Enter all the relevant information - Title, Categories, and Body
• Most importantly, click “location” and enter a latitude and longitude
• Click “Submit”

2. The second method is made available if we added that extra "Additional HTML/PHP" above.

• In this case, just click “Geobrowser” (on the left-hand side menu)... Hey here’s our map!
• Click the link in the legend that says “Add New Marker
• Fill in your relevant information (note that latitude and longitude are already set)
• Click “Submit”

8. Explore your map

You can turn on or off layers by clicking the check marks in the Legend

Zoom in and out by using the + and – buttons

Pan by clicking and dragging

After adding a point, use the refresh button in Geobrowser instead of the refresh in your web browser (Firefox, Explorer, Opera, Safari, etc.). That way, the map will not reset to the default zoom and centre.

If you do not want a splash page to show (some people like to provide directions on how to use the map here), turn off "Initial Page:" by adding at bottom of: http://rideshare.geomemes.com/?q=admin/settings/geobrowser

9. Conflicts, troubleshooting, and common problems

Conflict with Google Maps Module?

If you are getting errors: Turn off "Use a Google Map to set latitude and longitude"

Go to Adminster > Site configuration > Location

• Next to Use a "Google Map to set latitude and longitude" insure this is checked off

Check to make sure the Legend glyphs are installed. During the install, Drupal should fetch a pile of images (PNGs) that make the plus, minus, lines and checkboxes of the legend.

Here is what the legend should look like:

If you don`t have these, right click and save them from here: control_files.zip

Make sure these are in your Files directory.

10. Comments and suggestions

We hope you enjoyed this Drupal Geobrowser install tutorial and that you go on to spatialize many more drupal nodes. Please send comments and suggestions to: patrick@mapswest.com

All content Copyright © 2009 Geomemes Research Inc.