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

The following topics will be covered:

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:

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):


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 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:

Add location information to a node

The following will lead to:

Create a node type with location information

Show an interactive map when editing a node


Show a map with a marker when viewing the node

node_template.png node_view.png


DrupalOpenStreetMap (last edited 2012-06-13 21:26:24 by anonymous)

Creative Commons Lizenzvertrag
This page is licensed under a Creative Commons Attribution-ShareAlike 2.5 License.