0

I have an OpenLayers map that I only want to show when I click a button. Initially it should be hidden.

The following code works but requires me to press F12, presumably to re-render the map after clicking the button. Working example here: https://plnkr.co/edit/dudbbKQF8sfCfRiD

How can I display the map o button click without having to press F12 for rendering?

<html>
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <title>Simple Map</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.css" type="text/css">
    <link rel="stylesheet" href="./style.css" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.js"> </script>

  <style>
            .map1 { width: 100%;    height: auto;   border:1px solid red;   }
        .ali{   color:red;  font-size:16px; }
          .map {    height: 500px;  width: 100%;    }
  </style>
   <script type="module">

        proj4.defs('EPSG:32640', '+proj=utm +zone=40 +datum=WGS84 +units=m+no_defs')

        let options = {};
        options.code = 'EPSG:32640';
        options.units = 'm';

        options.extent = [
            -98570.85212537996, 2468701.5790765425,
            683268.1076887846,  2874585.9453238174,
        ];

        options.worldExtent = [];
        options.axisOrientation = 'enu';
        options.global = false;

        //options.metersPerUnit = projectionOptions.metersPerUnit;
        options.getPointResolution = ()=>{};

        let projection = new ol.proj.Projection(options);
        //ol.proj.addProjection(projection);
        //let ext=ol.proj.get('EPSG:32640').getExtent();
        debugger;
        //let center= ol.extent.getCenter(ext);
        var olview = new ol.View({
            center: [312234.8270497762, 2636116.2213047906],
            extent:options.extent,
            projection: 'EPSG:32640',
            zoom: 8,
        });
        
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM(),
                }),
            ],
            target: 'mapOL',
            view: olview,
            });
            
  </script>
  
  <script>
    function myFunction() {
            document.getElementById("demo").innerHTML = "Hello World";          
            var x = document.getElementById("mapOL");
            if (x.style.display === "none") {               
                document.getElementById("demo").innerHTML = "here 1";
                x.style.display = "block";
                map.updateSize();
                map.resize();   map.updateSize();           
            } else {
                x.style.display = "none";
            }
        }
  </script>    
</head>
<body>
 <button onclick="myFunction()">Click me</button>
    <p id="demo"></p>
    <div id="mapOL" class="map1" style="display: none;"></div> 
</body>
</html>
Improve this question

1 Answer 1

Reset to default
2

As you have coded it the map variable is not in scope of the myFunction so the updateSize() call does not work. You could give the button an id then use a single script and set the click listener in the code.

<html>
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <title>Simple Map</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.css" type="text/css">
    <link rel="stylesheet" href="./style.css" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol-debug.js"> </script>

  <style>
            .map1 { width: 100%;    height: auto;   border:1px solid red;   }
        .ali{   color:red;  font-size:16px; }
          .map {    height: 500px;  width: 100%;    }
  </style>
   <script type="module">

        proj4.defs('EPSG:32640', '+proj=utm +zone=40 +datum=WGS84 +units=m+no_defs')

        let options = {};
        options.code = 'EPSG:32640';
        options.units = 'm';

        options.extent = [
            -98570.85212537996, 2468701.5790765425,
            683268.1076887846,  2874585.9453238174,
        ];

        options.worldExtent = [];
        options.axisOrientation = 'enu';
        options.global = false;

        //options.metersPerUnit = projectionOptions.metersPerUnit;
        options.getPointResolution = ()=>{};

        let projection = new ol.proj.Projection(options);
        //ol.proj.addProjection(projection);
        //let ext=ol.proj.get('EPSG:32640').getExtent();
        debugger;
        //let center= ol.extent.getCenter(ext);
        var olview = new ol.View({
            center: [312234.8270497762, 2636116.2213047906],
            extent:options.extent,
            projection: 'EPSG:32640',
            zoom: 8,
        });
        
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM(),
                }),
            ],
            target: 'mapOL',
            view: olview,
            });
            
        function myFunction() {
            document.getElementById("demo").innerHTML = "Hello World";          
            var x = document.getElementById("mapOL");
            if (x.style.display === "none") {               
                document.getElementById("demo").innerHTML = "here 1";
                x.style.display = "block";
                map.updateSize();
            } else {
                x.style.display = "none";
            }
        }
        document.getElementById("myFunction").onclick = myFunction;
  </script>    
</head>
<body>
 <button id="myFunction">Click me</button>
    <p id="demo"></p>
    <div id="mapOL" class="map1" style="display: none;"></div> 
</body>
</html>
Improve this answer
1
  • 1
    Thank you so much - It works. This is the answer.
    – Paul Butler
    Jan 13 at 12:26

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.