使用标记连接画布菜单

Question

我正在处理地图项目，我需要标记一些建筑物以显示该特定建筑物的一些数据。基本上，字面意思是我试图建立这样的东西

我找到了帆布项目，并且我将它用于我的地图，这是一个有效的JSFIDDLE示例。 对于我使用openlayers3，openstreetmap的地图，我没有使用google-maps而且我使用它并不感兴趣，我是只是参考这张照片，因为他们有一个漂亮的画布显示数据菜单的例子。

正如您所看到的，我在NYC周围标记了不同的区域，我想，当我点击示例时，我会触发画布菜单（不要介意画布nav-bar样式它会改变）并显示该对象的正确数据。

我的问题是： 这样做的最佳方法是什么，我想学习如何将这个非画布粘贴到我的地图上，这样标记可以在画布外触发？

我知道有一个隐藏的<input type="checkbox" id="nav-trigger" class="nav-trigger" />我显示为汉堡图标，用于触发画布菜单。但我不明白如何将所有标记连接到画布以显示每个建筑物的不同数据。

我想知道我该怎么做？使用javascript或jquery非常棒，我openlayers3不具备这种灵活性，但也许有，我有点小对此感到困惑，有人可以帮助我建立这个，谢谢。