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).
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>
|
|