1

I am building an interactive map where my layers are displayed by zoomlevels using the min/maxResolution property. Here's the simple JS: 

function getmap(){

//BaseLayer
    function baseMap(){ 
        var baseMap= new ol.layer.Tile({
            source: new ol.source.XYZ({ 
            url:'http://{1-
            4}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',
            })
        })
        return baseMap
    };
//MainLayer
    var layerSource = new ol.source.Vector({
      loader: function(extent, resolution, projection) {
        var urlSecteur = 'JsonUrl&' 
        +'bbox='+ extent.join(',');
        $.ajax({
          url: urlSecteur,
          success: function(data) {
            var features = geoJSONFormat.readFeatures(data);
            layerSource .addFeatures(features);
          }
        }); 
      },
      strategy: ol.loadingstrategy.bbox
    });

   function createLayer(){
            var Layer = new ol.layer.Vector({
                title: 'Layer',
                source: LayerSource,
                minResolution: 0,
                maxResolution: 1
            })
     return Layer
  };


//Assembly of layers
    var layerBaseMap= baseMap(); 
    var layerLayer = createLayer();


    var map = new ol.Map({
        target: 'map',
        layers: [
        layerBaseMap,
        layerLayer
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([2.52639, 46.48361]),
            zoom: 6,
            minZoom: 6,
            minZoom: 6
        })
};

And the HTML:

<html>
    <head>
         <!-- Javascript library "openlayer" -->
             <link rel="stylesheet" href="/JsLib/openlayer/ol.css" />
             <script src="/JsLib/openlayer/ol.js"></script>
         <!-- Javascript library "JQuery" -->
             <script src="/JsLib/jquery/jquery-3.2.1.js"></script>
         <!-- Link JS -->
         <script type="text/javascript" src="/JS/mapol.js"> </script>
    </head>

 <body  onload="getmap()">

       <div id="legend">
            <div id="attribute1">
            </div>
            <div id="attribute2">
            </div>
            <div id="attribute3">
            </div>
        </div>

  <div id="map"></div>

<style>

#map { 
    height: 810px;
    width: 1380px;
    position: absolute;
    top: 106px;
    left: 300px;
}

#legend{
    display: none;
}

#attribute1{
    background-color:rgb(254, 237, 222);
    font-family: Arial;
    color: white;
    height: 40px;
    width: 240px;   
    position: relative;
}
#attribute2{
    background-color:rgb(253,208,162);
    font-family: Arial;
    color: white;
    height: 40px;
    width: 240px;
    position: relative;
    }
#attribute3{
    background-color:rgb(253,174,107);
    font-family: Arial;
    color: white;
    height: 40px;
    width: 240px;
    position: relative;
    }

</style>

  </body>

</html>

What I want to do is to display a legend when the layer gets visible (when the user reach the appropriate zoomlevel). The legend is already set in HTML so I just need to change the display property in CSS from "none" to "block". In theory this should goes like this at the end of the Js:

   if(layerLayer.isVisible == true){
            legend.style.display="block"
       }else{
        legend.style.display="none"
       };

I have already tried some solutions, noone of these has worked: 

if(layerLayer.getVisible() == true){
        legend.style.display="block"
    }else{
        legend.style.display="none"
    };

And

if(layerSource.getState() == 'ready'){
        legend.style.display="block"
    }else{
        legend.style.display="none"
    };

Both display the legend when the map gets loaded.

Any suggestions?

Improve this question
4
  • Need detailed code. where the condition code exist? on event?
    – Chase Choi
    Commented Jun 16, 2017 at 5:55
  • I've added a detailed code, I hope it becomes clearer. The condition needs to be add at the end of the JS it could be on event, I'm open to any solutions.
    – Oscar Jnn
    Commented Jun 16, 2017 at 8:29
  • by the way, you set min/maxResolution but user can move out of the resolutions?
    – Chase Choi
    Commented Jun 16, 2017 at 8:46
  • Yes, when the map gets loaded, the user start at "minZoom: 6" as defined in "var map = new ol.Map" and then he can zoom forth and back afterwards
    – Oscar Jnn
    Commented Jun 16, 2017 at 8:51

2 Answers 2

Reset to default
1

You can use change:resolution event on the view. Then, compare minResolution with currentResolution

map.getView().on('change:resolution', function() {
  var minRes = map.getLayers().getArray()[0].getMinResolution(); // map layer
  var curRes = map.getView().getResolution(); // current resolution

  if (minRes < curRes) {
    legend.style.display = "block";
  } else {
    legend.style.display = "none";
  }
});

sample codepen here

Improve this answer
0

Thank you Chase Choi, I didn't used your method, but part of it. I dispalyed the legend based on the current resolution, it work fine:

map.getView().on('change:resolution', function() {
  var curRes = map.getView().getResolution(); // current resolution

  if (curRes < 6 && curRes > 1) {
    legend.style.display = "block";
  } else {
    legend.style.display = "none";
  }
});
Improve this answer

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.