I have created an OpenLayers map via the following code:

var map = new ol.Map({
target: 'mapdiv', 
layers: [
new ol.layer.Tile({
  source: new ol.source.MapQuest({layer: 'sat'})
new ol.layer.Tile({
  source: new ol.source.MapQuest({layer: 'hyb'}),
view: new ol.View({
  center: ol.proj.transform([7.72,47.94], 'EPSG:4326', 'EPSG:3857'),
    zoom: 10
console.log('map created');

Now, of course, 'mapdiv' is the ID of the div I want the map to show up. This part is working according to the plan.

I nonetheless am implementing a separate JavaScript library to manipulate maps. As such, I want to access the created map (post creation) and its information. I look at the built in DOM inspector in Firefox, to see what exactly is created inside my div called 'mapdiv'.

The direct child of my 'mapdiv' is : <div style="position: relative; overflow: hidden; width: 100%; height: 100%;" class="ol-viewport">, which in turn has the child : <canvas height="696" width="1392" class="ol-unselectable" style="width: 100%; height: 100%;"></canvas>

This canvas seems to be the relevant one here. In the Firefox element inspector console, hovering my mouse over this generates a small preview of the map.

See image:

Canvas element with map as seen via mouseover

So I would like to grab the openlayer.Map object responsible for this, and call the calculateBounds method, to know the latitude and longitude boundaries of the displayed map.

Noting that the map is displayed in an element given by class, I am aware of this. But note that I am not aware of the class name beforehand. If for example, there are multiple maps, then using the linked method won't work, because they all have the same class, despite residing inside different divs.

I thus need a method to access the OpenLayers maps in a div element via JavaScript, if the div ID is known.

I am using OpenLayers 3.

  • Do you mean map.getView().calculateExtent(map.getSize())? – Jonatas Walker Jul 23 '15 at 10:35
  • is that the openlayer 3 equivalent? then yes. But the question is how do I get to map from canvas? – Sean Jul 23 '15 at 16:25
  • I'm not sure what exactly you need. You don't need to interact with canvas element. – Jonatas Walker Jul 23 '15 at 17:52
  • I know in case of using openlayer as the developers imagined, I dont need to access the canvas. But the canvas contains the map. When the page loads, it loads my JS library, loads the map, puts the map in the canvas, then waits for user input. I want, as i said, to manipulate the map - on user interaction a function in my library should be able to access the map (which is already on the canvas) attributes and change them - e.g. change the map projection. Of course I can use an explicit reference to the openlayer.map variable. But what if i do not know the openLayer.map variable name? – Sean Jul 24 '15 at 2:06
  • I can't imagine how you create the map and don't know the variable, maybe you have to rethink your logic. It looks you're trying the hardest way. – Jonatas Walker Jul 24 '15 at 9:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.