Overview

This howto describes the integration of OpenStreetMap into a Drupal website.

The following topics will be covered:

• displaying dynamically generated information (represented by icons) on a slippy map

  • each icon is clickable and exposes a popup window
  • the content of the popup window is formatted and may contain links
• adding a location (latitude/longitude) to a content node
  • a click on a slippy map sets the location

This howto is based on event map of the drupal site StadtGestalten.

The following description including the code is no a drop-in solution. You will need a bit of experience with drupal, python and javascript to get it running.

Integrating OSM into Drupal

Display clickable icons on a slippy map

The flow of data is:

• parse input data (events, locations, ...) and generate a CSV file containing latitude, longitude and other information
• display a map:
  • load the above CSV file via javascript
  • overlay the map with icons based on the content of the CSV file
  • add event handlers (onclick) for these icons - displaying descriptive text from the CSV file

Screenshot of example website:

Generate input data

An example implementation is available via a subversion repository: https://svn.systemausfall.org/svn/codekasten/osm/dynamic_markers

1. check out the repository and change into the html directory:

   svn checkout https://svn.systemausfall.org/svn/codekasten/osm/dynamic_markers
   cd dynamic_markers/html

2. run the script convert_raw2gml.py (below the scripts directory):

   ../scripts/convert_raw2gml.py

This should create a file events.gml (based on the event calendar of an example website) in the current directory. Check the source of the above python script to change its behaviour and the source of information.

BEWARE: you must change the input source, the input parser and the output formatter of the above python script according to your implementation.

The CSV file should be updated via a cron job if the source is dynamic.

Show a map with dynamic markers

Prerequisite: you followed the steps above and generated the file events.gml

1. view the local file index.html (in the html directory) with a javascript-enabled browser

2. click at the icons on the map

The content of the popup windoes is taken from the previously generated CSV file. Check the javascript file event_map.js (below the html directory) for the expected format of the CSV file.

Adding a map to a Drupal site

1. publish the content of the above directory html via a webserver

2. add the following PHP code to a drupal content node (with raw input filter):

   <script type="text/javascript">
    var event_map_center_longitude = <?php echo $_GET['longitude'] + 0 ?>;
    var event_map_center_latitude = <?php echo $_GET['latitude'] + 0 ?>;
    var event_map_zoom = <?php echo $_GET['zoom'] + 0 ?>;
   </script>
   <script type="text/javascript" src="/event_map/html/event_map.js"></script>
   <div id="event_map" style="width:700px;height:450px"></div>

This mixture of javascript and PHP code should be fairly self-explanatory:

• the longitude, latitude and default zoom of the map can be choosen via the query string (e.g. ?zoom=4) of this node

• take a look at the top of the event_map.js file for other customizable settings (e.g. the URL of the published html directory, the name of the CSV file, ...)

Add location information to a node

The following will lead to:

• a node type referring to a location (latitude/longitude)
• the location of the node will be visualized by a marker on a slippy map
• the location of the node can be changed by clicking on a slippy map (when editing the node)

Create a node type with location information

• add fields for longitude and latitude (e.g. field_long and field_lat)

• exclude these fields from being displayed (both in the teaser and in the full content view)

Show an interactive map when editing a node

• show the system pages: Build -> Pages -> List

• edit the node_edit page template

• restrict the selection criteria to the node type
• define the content, consisting of three blocks in one column:

  • user defined:

    <script type="text/javascript">
     var event_map_display_type = "edit";
    </script>
    <script type="text/javascript" src="/event_map/html/event_map.js"></script>
    <div class="form-item">
    <label for="event_map">Position auf der Karte setzen:</label>
       <div id="event_map" style="width:500px;height:250px"></div>
    </div>

  • node being edited -> base form

  • node being edited -> node form submit buttons

Screenshot:

Show a map with a marker when viewing the node

• enable the module Content templates

• create a template for the node type: Content -> Types -> Templates

• override the body template of the node:

  <?php print $node->body ?>
  <script type="text/javascript">
   var event_map_center_longitude = <?php print $node->field_long[0]['value'] + 0 ?>;
   var event_map_center_latitude = <?php print $node->field_lat[0]['value'] + 0 ?>;
   var event_map_display_type = 'marker';
  </script>
  <script type="text/javascript" src="/event_map/html/event_map.js"></script>
  <div id="event_map" style="width:400px;height:250px"></div>

Screenshots:

References

• Geo module for drupal: http://drupal.org/project/geo

• Location module for drupal: http://drupal.org/project/location

• Geocoding module for drupal: http://drupal.org/project/openlayers_geocoder