I have 2 openlayers maps on the same web page. Only one of them shows as importing the css and js libraries related to each map, makes the other one not visible.

I have tried commenting the ol.js and ol.css required for each map, but I have to comment the other. Is there a way I can show both maps on the same page?

<link rel="stylesheet" href="assets/css/main.css" />
<!-- <link rel="stylesheet" href="assets/css/ol.css" /> -->
<link rel="stylesheet" href="assets/css/gifplayer.css" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css"/>
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/turf.min.js"></script>
<script src="assets/js/shpwrite.js"></script>
<script src="assets/js/jquery.min.js"></script>
<!-- <script src="assets/js/ol.js"></script> -->
<script src="assets/js/shp.min.js"></script>
<script src="assets/js/jszip.min.js"></script>
<script src="assets/js/FileSaver.js"></script>
<script src="assets/js/xyz.js"></script>
<script src="assets/js/proj4.js"></script>
<script src="assets/js/jquery.gifplayer.js"></script>
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v7.1.0/ol/ol.css" /> 

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v7.1.0/ol/dist/ol.js"></script> 
<script src="https://unpkg.com/[email protected]"></script>

I cannot use the second set of ol.js and .css only, as it does not contain one of the functions needed for the first map to show - Please see the error.

I have uploaded the code at https://github.com/sharmapn/testOL You may need to put on a webserver to run - to prevent the cors error. Code is in the index.html file.

Use Firefox, Click 'Show Map', and press F12 to show map.

enter image description here

enter image description here

  • Added html code. Commented Nov 2, 2022 at 9:21
  • There is no alternative to answer from @smomapz.
    – TomazicM
    Commented Nov 2, 2022 at 12:43

1 Answer 1


The two OL versions are conflicting.

You have these options for example:

  • migrate either OL-map to the same OL-version of the other one
  • run either OL-map in an iFrame displaying a separable JS-scope
  • I was wondering if the conflict is within the css or js. Would there be any resources on how to migrate - I couldn't find any resources. Commented Jan 10, 2023 at 21:55

Your Answer

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

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