Comment implémenter OSM BUILDINGS dans un projet web

Pour commencer, OSM BUILDINGS est une libraire open-source javascript concue pour résoudre le probleme des cartes (maps) en 3D, beaucoup des developpeurs surement se demandent comment faire pour créer une carte en 3D d’une facon libre sans payé comme l’impose Google maps pour certaines fonctionnalités.

Voilà c’est sur base de cette question qu’OSMB a ete créée, cette bibliotheque a pour mission de faciliter la création des cartes en 3D avec une multitude de fonctionnalités.

Comment l’integrer

si vous avez deja utilisé les tiles OPENSTREEPMAP avec LEAFLET comme librairie, vous serez sans doute dans la meme facon de faire avec OMSB.

En parlant de LEAFLET, vous pouvez l’utilisé avec OSMB mais aussi vous pouvez utilisé tous les trois c’est-à-dire, OPENSTREETMAP, LEAFLET et OSMBUILDINGS à votre gise.

dans cet article nous parlerons de l’integration web (dans le HTML) cela dit, OSMB est aussi en version integrable pour mobile …etc, allez sur le github pour jeter un oeil dessus

assez bavardé, nous allons faire notre première intégration en ajoutant les premières dans notre fichier HTML:

<link href=”https://cdn.osmbuildings.org/4.1.1/OSMBuildings.css" rel=”stylesheet”>
<script src=”https://cdn.osmbuildings.org/4.1.1/OSMBuildings.js"></script>

le bout de code ci-haut permet de faire appel à OSMB donc avec toutes ses fonctionalités (attention! à l’heure actuelle la bibliotheque est à sa version 4.1.1) mais aussi son CSS. la deuxieme etape est celle de définir un conteneur de la carte et c’est qui est récommandé est un div(HTML) et un indicateur (id=”map”).

<div id=”map”></div>

le bout de code si haut nous permet de définir le conteneur, l’ID de l’element DIV doit toujours etre égal à map sinon rien ne s’affichera.

A ce stade rien ne se passe et pourtant tout est chargé quand vous regardez dans la console (navigateur->outils de developpeur->console).

Rajoutez le bout de code qui suit pour voir la carte s’afficher comme par magie.

<script>
var map = new OSMBuildings({
container: ‘map’,
position: { latitude: 52.51836, longitude: 13.40438 },
zoom: 16,
minZoom: 15,
maxZoom: 20,
attribution: ‘© Data <a href=”https://openstreetmap.org/copyright/">OpenStreetMap</a> © Map <a href=”https://mapbox.com/">Mapbox</a> © 3D <a href=”https://osmbuildings.org/copyright/">OSM Buildings</a>’
})

map.addMapTiles(‘https://{s}.tiles.mapbox.com/v3/[YOUR_MAPBOX_KEY]/{z}/{x}/{y}.png');
map.addGeoJSONTiles(‘https://{s}.data.osmbuildings.org/0.2/anonymous/tile/{z }/{x}/{y}.json');
</script>

c’est super! mais il y a un fond noir, rien de naturel! c’est logique, souvenez- vous, au début nous avons parlé de TILES! Bon! sans TILES aucun tracage de la carte, en vrai ce que vous voyez là est juste de la 3D ( des formes) sans carte (map), une carte est justement les TILES et dans notre cas, le code est correct mais avec un manquement, nous allons tiré une ligne particulière dans ce code pour vous montrez qu’est-ce qu’il faut pour que la carte affiche correctement.

map.addMapTiles(‘https://{s}.tiles.mapbox.com/v3/[YOUR_MAPBOX_KEY]/{z}/{x}/{y}.png');

déjà les TILES sont fornis par beaucoup de sources, il y a celles qui sont opensource et d’autres qui sont proprietaires c’est-a-dire payante. dans notre cas, nous essayerons d’utliser les tiles de MAPBOX malheureusement nous avons pas de clé, créons une clé sur mapbox, et remplacons [YOUR_MAPBOX_KEY] par la clé que vous avez créée, réchargez la plage et voilà, le tour est joué.

vous pouvez également utilisez les tiles de OPENSTREETMAP pour afficher votre carte, donc vous remplacerez la ligne de code c-haut par:

map.addMapTiles('https://tile-a.openstreetmap.fr/hot/{z}/{x}/{y}.png');

PS: chaque TILES a sa particularité mais si vous voulez utilisé OSM pour de fin applicative environnementale pour géolocalisation, nous vous conseillons d’utiliser les TILES de OPENSTREETMAP.

BRAVO! pour votre Première carte 3D