Carte OpenStreetMap avec marqueurs et listes TXT
Dans cet exemple, les marqueurs affichés sur la carte (OSM) sont paramètrés à partir du contenu des fichiers texte.
Ces fichiers TXT contiennent les coordonnées de longitude et latitude, le nom du fichier image des marqueurs ainsi que le code html pour l'infobulle(infowindow, infobubble) qui s'affichera quand on clique sur un marqueur(marker).
J'ai aussi ajouté sur la droite de la carte un menu(Control Layer Switcher) permettant de choisir l'affichage de certains marqueurs plutôt que d'autres.
On peut les faire apparaître et diparaître de la carte. Cela permet d'afficher une liste de marqueur plutôt qu'une autre et de proposer un affichage sélectif sur sa carte.
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();
// Centrer la carte ----------------------------------------------------------------------
var lonLat = new OpenLayers.LonLat( 2.341303,48.855141 ).transform(epsg4326, projectTo);
var zoom=12;
map.setCenter (lonLat, zoom);
var marqueurvert = new OpenLayers.Layer.Text( "La Tour Eiffel",
{ location:"fichiertexte/textfiletoureiffelparis.txt",
});
map.addLayer(marqueurvert);
var marqueurbleu = new OpenLayers.Layer.Text( "Jardin du Luxembourg",
{ location:"fichiertexte/textfilejardinluxembourg.txt",
});
map.addLayer(marqueurbleu);
// Menu en haut à droite de la carte ---------------------------------------
var layer_switcher= new OpenLayers.Control.LayerSwitcher({});
map.addControl(layer_switcher);
</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.