« Customizing User Registration page | Main | Potential Registration solution »

September 17, 2010

GMap with KML overlays in Drupal

I've started messing around with the idea of converting our spatial data to KML files to allow us to display on the website. Here are some notes:

Modules Needed:
GMap
GMap Addons
Location
CCK
Views

--------------------------------------------------------------------------------------------------
To add the same overlay to every node of a given content type:

1) Create your custom content type (call it cct)
2) Add a Location field to the CCT (call it cct_location)
3) Edit the settings of cct_location (admin/content/node-type/cct/fields/field_cct_location)
- Add your macro in the GMap Macro section. My test case uses this code:

[gmap |overlay=kml:http://www.ancientforestnationalpark.org/AncientForestParkGoogleEarth.kml | zoom=3 |center=40.49709237269567,-121.7724609375 |width=100% |height=800px |control=Large |type=Physical]
Save.
4) Make sure your CCT is set to display GMaps when viewing the Full Node (admin/content/node-type/cct/display)
5) Now Create Content > cct and add a location. Be sure to put to put in a Location Name (and lat/long or address.)
6) View your node.

-------------------------------------------------------------------------------------------------
Add an overlay to a particular node of a given content type:

1) Create your custom content type (call it cct)
2) Create a GMap Macro Filter for the Body text box. I swiped the following from here.

Go to your input formats config page at admin/settings/filters
Click 'configure' next to the input format that will be used for the content where the map is to be included (typically filtered HTML)
Check 'GMap filter' and save

Now when you insert a gmap macro into a page it should automatically turn into the map with your marker.

3) Create Content > cct
4) Past your macro into the text body. Under Input Format, select GMap Macro. My test case uses this code:
[gmap |overlay=kml:http://www.ancientforestnationalpark.org/AncientForestParkGoogleEarth.kml | zoom=3 |center=40.49709237269567,-121.7724609375 |width=100% |height=800px |control=Large |type=Physical]
Save.
5) View your map.

Note: This should also work if you add a cck text field

-------------------------------------------------------------------------------------------------
Add an overlay to a View:

1. Add Node View
2. Add Page Display
3. Set Path
4. Change Style to GMap
5. Change settings for GMap style. Add a macro (or two):
[gmap |overlay=kml:http://gcrc.uga.edu/public/uploads/GCE_site_boundaries_20090724T114716.kml]
[gmap |overlay=kml:http://www.ancientforestnationalpark.org/AncientForestParkGoogleEarth.kml]
Note: I found these kml files on the web by googling "polygon filetype:kml"

6. At this point, you will need to add fields (a requirement of Views). I followed this tutorial the first time I experimented with Gmap + Views. If this part confuses you, you've got a ways to go.
7. Save and navigate to the Path URL.

Notes:
- If you get an annoying popup window that says only "gmap-auto1map-gmap0" this issue may help #341589: Browser error on overlay

Posted by kkwaiser at September 17, 2010 03:27 PM

Comments

Login to leave a comment. Create a new account.