Overview
This howto describes the integration of [http://openstreetmap.org OpenStreetMap] into a [http://drupal.org Drupal] website.
The following topics will be covered:
displaying dynamically generated information (represented by icons) on a [http://wiki.openstreetmap.org/index.php/Slippy_Map 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 [http://stadtgestalten.org/terminkarte StadtGestalten].
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
Generate input data
An example implementation is available via a subversion repository: https://svn.systemausfall.org/svn/codekasten/osm/dynamic_markers
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
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
view the local file index.html (in the html directory) with a javascript-enabled browser
- 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
publish the content of the above directory html via a webserver
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
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