问题
I'm working on a mapping project and I need to mark some building to display some data for that specific building. Basically, literally I'm trying to build something like this
I have found off canvas project and I'm using it for mine map, here is a working JSFIDDLE example.
For the map I'm using openlayers3, openstreetmap, I'm not using google-maps and I'm not interesting in using it, I'm just referencing on this picture because they have a nice example of this off canvas display data menu.
As you can see I have marked different area around NYC and I would like to, when I click on the example I trigger off canvas menu (don't mind off canvas nav-bar style it will change) and display proper data for that object.
Mine question is: What is the best way to do this, I would like to learn how to glue this off-canvas to mine map, so markers can trigger off-canvas?
I know that there is a hidden <input type="checkbox" id="nav-trigger" class="nav-trigger" /> who I displaying as hamburger icon which is used to trigger off canvas menu. But I do not understand how can I connect all markers to the canvas to display different data for each building.
I would like to learn how can I do this? It will be great to use javascript or jquery for this, I don't thing that openlayers3 have this kind of flexibility, but maybe there is, I'm little confused about this, can someone help me build this, thank you.
来源：https://stackoverflow.com/questions/35072156/connect-off-canvas-menu-with-markers