Comment ajouter un contrôle Openlayers/Openstreetmap dans un formulaire web

1. Télécharger la dernière version sur http://www.openlayers.org/  
   (wget http://www.openlayers.org/download/OpenLayers-2.8.tar.gz)

2. Extraire l'archive
   (tar xzvf OpenLayers-2.8.tar.gz)

3. Créer un lien symbolique vers la bibliothèque OpenLayers
   (ln -s OpenLayers-2.8 openlayers)

4. Télécharger les configurations d'openstreetmap dans le répertoire openlayers/lib
   (wget http://www.openstreetmap.org/openlayers/OpenStreetMap.js)

5. Télécharger les fonctions d'openstreetmap dans le répertoire openlayers/lib
   (wget http://www.openstreetmap.org/javascripts/map.js)

6. Créer le fichiers openlayers/lib/site.js et ajouté le code suivant

i18n_strings = new Array();
i18n_strings['javascripts.map.base.osmarender'] = 'Osmarender';
i18n_strings['javascripts.map.base.noname'] = 'SansNom';
i18n_strings['javascripts.map.base.cycle_map'] = 'Carte cyclable';
i18n_strings['javascripts.map.base.mapnik'] = 'Mapnik';
i18n_strings['javascripts.map.overlays.maplint'] = 'Maplint';
i18n_strings['javascripts.site.edit_zoom_alert'] = 'Vous devez zoomer pour modifier la carte';
i18n_strings['javascripts.site.history_zoom_alert'] = 'Vous devez zoomer pour voir l’historique des modifications';


/*
 * Called to interpolate JavaScript variables in strings using a
 * similar syntax to rails I18n string interpolation - the only
 * difference is that [[foo]] is the placeholder syntax instead
 * of {{foo}} which allows the same string to be processed by both
 * rails and then later by javascript.
 */
function i18n(string, keys) {
  string = i18n_strings[string] || string

  for (var key in keys) {
    var re_key = '\\[\\[' + key + '\\]\\]';
    var re = new RegExp(re_key, "g");

    string = string.replace(re, keys[key]);
  }

  return string;
}

7. Créer un fichier HTML (test.html) avec le code HTML suivant:
   <div id="map" style="border:1px solid black; position:relative; width:500px; height:400px;"></div>

8. Dans le fichier HTML (test.html), ajouter ce code:
		<script src="/openlayers/lib/site.js" type="text/javascript"></script>
		<script src="/openlayers/lib/OpenLayers.js" type="text/javascript"></script>
		<script src="/openlayers/lib/OpenStreetMap.js" type="text/javascript"></script>
		<script src="/openlayers/lib/map.js" type="text/javascript"></script>
		<script type="text/javascript">
			var marker;

			OpenLayers.Lang.setCode("fr");
			function init() {
				var centre = new OpenLayers.LonLat(-75.499963852747, 46.555960225325);
				var zoom = 12;
				var map = createMap("map");
				setMapCenter(centre, zoom);
				marker = addMarkerToMap(new OpenLayers.LonLat(-75.499963852747, 46.555960225325), null, "Votre emplacement");
				map.events.register("click", map, setHome);
			}
			function setHome(e) {
				closeMapPopup();
				var lonlat = getEventPosition(e);
				
				alert(lonlat.lat);
				alert(lonlat.lon);
				
				if (marker) {
				  removeMarkerFromMap(marker);
				}
				marker = addMarkerToMap(lonlat, null, "Votre emplacement");
			}
			window.onload = init;
		</script>

9. (optionnel) Déplacer l'attribution
<style type="text/css"> 
  body .olControlAttribution { bottom: 0; }
</style>