Carte OpenStreetMap avec des marqueurs et infobulles


La carte est centrée sur la ville de Paris. Sur cette carte j'y ai placé quelques marqueurs pour repérer des lieux publics.

DEMO Carte OpenStreetMap avec des marqueurs et infobulles

Exemple de code javascript pour cette carte


<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("carte");
	
    map.addLayer(new OpenLayers.Layer.OSM());
	
	epsg4326 = new OpenLayers.Projection("EPSG:4326");
	projectTo = map.getProjectionObject();
	
    
	map.addControl(new OpenLayers.Control.MousePosition({'numDigits':6,
							'granularity':10,'separator':' | ', 
							'prefix': 'Coordonnées ',
							displayProjection: new OpenLayers.Projection("EPSG:4326")}));
    

   // Centrer la carte ----------------------------------------------------------------------
    var lonLat = new OpenLayers.LonLat( 2.341303,48.855141 ).transform(epsg4326, projectTo);
       
    var zoom=12;
    map.setCenter (lonLat, zoom);

    var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
    
    // Configuration des différents marqueurs et infobulles(popup):
    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( 2.294504,48.858307 ).transform(epsg4326, projectTo),
            {description:'La Tour Eiffel'} ,
            {externalGraphic: 'http://webinfotuto.free.fr/rubriques/siteweb/OpenStreetMap/images/markers/vert.png', graphicHeight: 36, graphicWidth: 36, graphicXOffset:-12, graphicYOffset:-25  }
        );    
    vectorLayer.addFeatures(feature);
    
    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( 2.326733,48.863777 ).transform(epsg4326, projectTo),
            {description:'Le jardin des Tuileries'} ,
            {externalGraphic: 'http://webinfotuto.free.fr/rubriques/siteweb/OpenStreetMap/images/markers/bleufonce.png', graphicHeight: 36, graphicWidth: 36, graphicXOffset:-12, graphicYOffset:-25  }
        );    
    vectorLayer.addFeatures(feature);

    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( 2.394497,48.861173 ).transform(epsg4326, projectTo),
            {description:'Le cimetière du père Lachaise'} ,
            {externalGraphic: 'http://webinfotuto.free.fr/rubriques/siteweb/OpenStreetMap/images/markers/marron.png', graphicHeight: 36, graphicWidth: 36, graphicXOffset:-12, graphicYOffset:-25  }
        );    
    vectorLayer.addFeatures(feature);

   
    map.addLayer(vectorLayer);
 
    
    //Paramétrage de l'ouverture et la fermeture des infobulles
    var parametres = {
      selection: new OpenLayers.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: fermeturePopup })
    };

    function createPopup(feature) {
      feature.popup = new OpenLayers.Popup.FramedCloud("pop",
          feature.geometry.getBounds().getCenterLonLat(),
          null,
          '
'+feature.attributes.description+'
', null, true, function() { parametres['selection'].unselectAll(); } ); map.addPopup(feature.popup); } function fermeturePopup(feature) { feature.popup.destroy(); feature.popup = null; } map.addControl(parametres['selection']); parametres['selection'].activate(); </script>

Téléchargez le fichier de cette démonstration et adaptez le à votre convenance en modifiant les paramètres de cette carte, les coordonnées (longitude, latitude), les marqueurs, le zoom ...





Entrez votre adresse mail:

Vous pouvez télécharger le code et le fichier HTML de cette démonstration avec le zip suivant : CarteMarqueursInfobulles01.zip





0228439