Pour ajouter une carte OSM on va utiliser la bibliothèque OpenLayers qui permet d’afficher des fonds cartographiques tuilés ainsi que des marqueurs provenant d’une grande variété de sources de données.

OpenLayers est une bibliothèque JavaScript, alors il faut d’abord l’ajouter à partir du CDN ou la télécharger du site officiel. Pour l’ajouter du CDN on va ajouter le code suivant :

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">

Il faut noter qu’il y a un fichier Javascript et du style CSS propre à la bibliothèque pour que ça fonction bien.

Une fois fait, on va ajouter une balise div dans notre page HTML où on va afficher la carte en spécifiant un ID ;

<div id="Map" style="height:450px;"></div>

Et puis la partie la plus importante, le code qui va afficher la carte ;

<script>
    var map = new ol.Map({
        target: ‘Map’,
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
       ],
       view: new ol.View({
           center: ol.proj.fromLonLat([3.22,36.74]),
           zoom: 15
        })
    });
    var point = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([3.22228,36.74097]))
    });
    point.setStyle(new ol.style.Style({
        image: new ol.style.Icon(({
            src: ‘icon_url’,
            anchor: [0.5,1],
        }))
    }));
    var vectorSource = new ol.source.Vector({
        features: [point]
    });
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });
    map.addLayer(vectorLayer);
</script>

Dans la première étape nous avons créé un objet map, avec l’ID de notre balise html comme target, et dans la vue (ligne 10) nous avons spécifié la localisation (longitude et latitude) ainsi que le zoom que nous voulons avoir.

Et pour ajouter un marqueur, nous avons créé un point et tant que Feature, avec les coordonnées exactes de notre localisation, et puis nous avons ajouté du style avec l’Icon, et la propriété anchor est utilisé pour décaler l’icon de telle sorte que ça reste dans la localisation spécifiée quand on fait du zoom in ou out, et puis les derniers lignes pour ajouter le marqueur à la carte, et de la même façon on peut ajouter plusieurs marqueurs.