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

1. Télécharger la dernière version sur  

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

5. Télécharger les fonctions d'openstreetmap dans le répertoire openlayers/lib

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

i18n_strings = new Array();
i18n_strings[''] = 'Osmarender';
i18n_strings[''] = 'SansNom';
i18n_strings[''] = 'Carte cyclable';
i18n_strings[''] = 'Mapnik';
i18n_strings[''] = 'Maplint';
i18n_strings[''] = 'Vous devez zoomer pour modifier la carte';
i18n_strings[''] = '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;

			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");"click", map, setHome);
			function setHome(e) {
				var lonlat = getEventPosition(e);
				if (marker) {
				marker = addMarkerToMap(lonlat, null, "Votre emplacement");
			window.onload = init;

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