Connecter le menu de canevas avec des marqueurs

Je travaille sur un projet de cartographie et je dois marquer un bâtiment pour afficher des données relatives à ce bâtiment spécifique. Au fond, j’essaie littéralement de construire quelque chose comme ça

entrez la description de l'image ici

J’ai trouvé le projet de canvas et je l’utilise pour la carte de mine, voici un exemple de travail de JSFIDDLE . Pour la carte j’utilise openlayers3 , openstreetmap , je n’utilise pas google-maps et je ne suis pas intéressée à l’utiliser, je fais simplement référence à cette image car ils ont un bel exemple de ce menu de données d’affichage hors canevas. .

Comme vous pouvez le constater, j’ai marqué différentes zones autour de NYC et j’aimerais bien, lorsque je clique sur l’exemple, le menu contextuel est déclenché (attention, le style de nav-bar sur canvas changera) et affiche les données appropriées pour cet object. .

La question que je me pose est la suivante: quelle est la meilleure façon de procéder, j’aimerais apprendre à coller cette carte hors-plan sur la carte des mines afin que les marqueurs puissent se déclencher hors de la zone de travail?

Je sais qu’il existe un caché qui est affiché en tant qu’icône hamburger et qui est utilisé pour déclencher le menu canevas. Mais je ne comprends pas comment puis-je connecter tous les marqueurs au canevas pour afficher des données différentes pour chaque bâtiment.

Je voudrais apprendre comment puis-je faire cela? Ce sera génial d’utiliser javascript ou jquery pour cela, je ne pense pas que les openlayers3 aient ce genre de flexibilité, mais peut-être y a-t-il, je suis un peu confus à ce sujet, quelqu’un peut-il m’aider à construire cela, merci.