0

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

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

1 Answer 1

Reset to default
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
Improve this answer
1
  • 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.
    – Paul Butler
    Jan 10 at 21:55

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.