5

Specifically, my question is: how to assign the maps to different divs? In my page it kept placing the two maps under each other, although I defined the divs to be horizontally aligned.
So I have been searching for the answer to this question, when I discovered it by mistake, and I think it is not obvious so I thought I might share it.

2 Answers 2

7

Well, this is quite simple: the first parameter in the Map constructor is the id of the div! Thats all.
So in the javascript code:

var firstMap = new OpenLayers.Map("first_Map", { });
var secondMap = new OpenLayers.Map("second_Map", { });

and the html code:

<div id="first_Map" ></div>
<div id="second_Map" ></div>
3
  • 2
    The string parameter in the OpenLayers.Map constructor is not a "name", it's exactly "id of an element in your page that will contain the map", as explained in the documentation
    – kryger
    Jun 16, 2014 at 21:48
  • 1
    Not worked in OL3.
    – Magno C
    Jul 13, 2016 at 14:58
  • 1
    This works in OL 4 just fine. jsfiddle.net/r92b3oyt/1
    – Nathan
    Jun 5, 2019 at 17:14
0

This is for people like me who find this years later and are lead to believe this was ever the solution. In reference to the claim that OL4 works with the solution provided, it does not and it still does not in the latest versions of OL up to 6.x. It creates several viewports on the first map, so it looks like there are two map objects in play, but in fact the subsequent HTML map objects are not OL enabled. Look at the page source in the OL4 "jsfiddle" to confirm this. enter image description here re: This works in OL 4 just fine. https://jsfiddle.net/r92b3oyt/1/

This appears to be a timing issue when the application first fires up. if you add some UI to assign the map objects to the DOM DIVs at runtime, then both maps load just fine (you'll see viewports inside each map DIV).

I'll outline the fix when I find out what it is....

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.