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.
Add a comment
|
2 Answers
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>
-
2The string parameter in the
OpenLayers.Mapconstructor is not a "name", it's exactly "id of an element in your page that will contain the map", as explained in the documentation– krygerCommented Jun 16, 2014 at 21:48 -
1
-
1
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.
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....
