Récupérez la dernière version d'OpenLayers depuis http://openlayers.org/download/, et décompressez les fichiers ol.js et ol.css dans des dossiers (ici, display/javascript et display/CSS).
Créez ensuite votre page html, en plaçant, dans l'entête, les lignes suivantes :
<script type="text/javascript" charset="utf-8" src="display/javascript/ol.js"></script><style type="text/css" >@import "display/CSS/ol.css";</style>Dans le corps de la page, créez une balise qui permettra l'affichage de la carte :
<div id="map" style="height:400px;"></div>Nous allons maintenant insérer du code javascript, d'abord pour définir le style d'affichage du point :
<script>var imageStyle = new ol.style.Style({ image: new ol.style.Circle({ radius: 5, snapToPixel: false, fill: new ol.style.Fill({ color: [255 , 0 , 0 , 0.2] }), stroke: new ol.style.Stroke({ color: [255 , 0 , 0 , 1], width: 1 }) })});Le point sera affiché sous la forme d'un cercle rouge (les couleurs sont exprimées en RVB, et le dernier chiffre correspond au coefficient de transparence).
Définissez maintenant les coordonnées de votre point, sous la forme longitude, latitude :
var coordonnee = [0.5, 45.2];et le facteur de zoom de la carte :
var zoom = 9;Nous allons maintenant initialiser la carte, avec la mise en place d'un contrôle permettant le zoom et le déplacement :
var attribution = new ol.control.Attribution({ collapsible: false});var map = new ol.Map({ controls: ol.control.defaults({ attribution: false }).extend([attribution]), target: 'map', view: new ol.View({ center: ol.proj.fromLonLat(coordonnee), zoom: zoom })});La carte est centrée sur les coordonnées fournies, dans la projection WGS84 (gps).
Pour afficher le fond de carte, nous utilisons les dalles fournies par OpenStreetMap :
var layer = new ol.layer.Tile({ source: new ol.source.OSM()});que nous rajoutons à notre carte :
map.addLayer(layer);Maintenant que la carte est définie, nous avons besoin de créer une fonction qui permettra de convertir les coordonnées des points à afficher dans celle utilisée par la carte (en principe, Mercator) :
function transform_geometry(element) { var current_projection = new ol.proj.Projection({ code: "EPSG:4326" }); var new_projection = layer.getSource().getProjection(); element.getGeometry().transform(current_projection, new_projection);}Créons maintenant notre point :
var point = new ol.geom.Point(coordonnee, 'XY');puis l'objet le contenant, qui permettra de l'afficher, et appliquons-lui le style défini précédemment :
var point_feature = new ol.Feature ( point );point_feature.setStyle(imageStyle);Nous avons besoin de définir maintenant un tableau contenant l'ensemble des contenus à afficher :
var features = [ point_feature];et, pour chaque, nous appliquons la fonction de transformation des coordonnées :
features.forEach(transform_geometry);Il reste à créer la couche d'affichage :
var layer_point = new ol.layer.Vector({ source: new ol.source.Vector( { features: features })});et à la rajouter à la carte :
map.addLayer(layer_point);</script>Si vous souhaitez rajouter une étiquette au point, cela s'effectue dans le style. Comme l'étiquette, par définition, change à chaque fois, il vaut mieux utiliser une fonction qui va permettre de générer le style pour chacun :
function getStyle(libelle) {libelle = libelle.toString();
console.log("libelle : "+libelle);
var style = new ol.style.Style( {
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({
color: [255, 0, 0, 0.5]
}),
stroke: new ol.style.Stroke( {
color: [255 , 0 , 0 , 1],
width: 1
})
}),
text: new ol.style.Text( {
textAlign: 'Left',
text: libelle,
textBaseline: 'middle',
offsetX: 7,
offsetY: 0,
font: 'bold 12px Arial',
/*fill: new ol.style.Fill({ color: 'rgba(255, 0, 0, 0.1)' }),
stroke : new ol.style.Stroke({ color : 'rgba(255, 0, 0, 1)' })*/
})
});
return style;}Les variables fill et stroke de ol.style.Text permettent de définir la couleur de la police et l’empattement.
Pour l'utiliser, il suffit de modifier le code ainsi :
point_feature.setStyle(getStyle('mon libellé'));That's all, folks!