Carte OpenStreetMap - Marqueur, Infobulle et fichier TXT


Dans cet exemple, le marqueur affiché sur la carte (OSM) est paramètré à partir du contenu d'un fichier texte. Ce fichier TXT contient les coordonnées de longitude et latitude, le nom du fichier image du marqueur ainsi que le code html pour l'infobulle(infowindow, infobubble) qui s'affichera quand on clique sur un marqueur(marker).

DEMO Carte OpenStreetMap avec Marqueur, Infobulle et fichier texte

Exemple de code javascript pour cette carte


<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
   var map;
						        
            function init(){
               
				map = new OpenLayers.Map("carte");
			    map.addLayer(new OpenLayers.Layer.OSM());
	
	            epsg4326 = new OpenLayers.Projection("EPSG:4326");
	            projectTo = map.getProjectionObject();
				
				
				//*********************** Coordonnées de la souris *****************************
	                        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=11;
                map.setCenter (lonLat, zoom);
				
				
                var wms = new OpenLayers.Layer.WMS(
                    "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0",
                    {layers: 'basic'}
                );

                var layer = new OpenLayers.Layer.Vector("La Tour Eiffel", {
                    strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1.1})],
                    protocol: new OpenLayers.Protocol.HTTP({
                       	url: "fichiertexte/textfiletoureiffelparis.txt",
                        format: new OpenLayers.Format.Text()
                    })
                });

                map.addLayers([wms, layer]);
               // map.zoomToMaxExtent();

                // Paramètres de contrôle du marqueur
                selectControl = new OpenLayers.Control.SelectFeature(layer);
                map.addControl(selectControl);
                selectControl.activate();
                layer.events.on({
                    'featureselected': onFeatureSelect,
                    'featureunselected': onFeatureUnselect
                });
            }
             

            // Paramètres pour l'infobulle
            function onPopupClose(evt) {
                var feature = this.feature;
                if (feature.layer) { 
                    selectControl.unselect(feature);
                } else { 
                        
                    this.destroy();
                }
            }
            function onFeatureSelect(evt) {
                feature = evt.feature;
                popup = new OpenLayers.Popup.FramedCloud("featurePopup",
                                         feature.geometry.getBounds().getCenterLonLat(),
                                         new OpenLayers.Size(100,100),
                                         "

"+feature.attributes.title + "

" + feature.attributes.description, null, true, onPopupClose); feature.popup = popup; popup.feature = feature; map.addPopup(popup, true); } function onFeatureUnselect(evt) { feature = evt.feature; if (feature.popup) { popup.feature = null; map.removePopup(feature.popup); feature.popup.destroy(); feature.popup = null; } } </script>

Téléchargez le fichier de cette démonstration et adaptez le à votre convenance en modifiant les coordonnées de latitude et longitude et les paramètres du marqueur et de l'infobulle contenus dans le fichier texte au format TXT.





Entrez votre adresse mail:

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





0241574