1

I have a slide toggle that slides from right to left. I want when getFeatureInfoUrl is activated the result will be displayed in slide toggle and slide toggle automatically open. Now i was able to get the result to show in slide toggle but it doesn't open automatically.

How to make slide toggle automatically open when getFeatureInfoUrl is activated.

This is my code:

HTML

<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v7.1.0/ol/ol.css" />
    
    <!-- map -->
    <div id="map" class="map">
       <div id="gmap" class="fill"></div>
       <div id="olmap" class="fill"></div>
    </div>
    
    <!-- slide toggle -->
    <div class="willSlide" id='content'>
        <span style="width: 100%;" id="info">&nbsp;</span>
        <span style="width: 100%;" id="info_qpk"></span>
        <span style="width: 100%;" id="span_search"></span>
    </div>
    <div class="willSlide" id='btn'>
        <span class="click">open</span>
        <span class="expandedTxt">close</span>
    </div>

<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://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer></script>
<!-- jquery api-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<!--JS for slide toggle-->
<script>
$(document).ready(function()
{
  var easing = 1 //enable or disable easing | 0 or 1
  var animation_speed = 500 //ms
      
  var slider_width = $('#content').width();//get width automaticly
  $('#btn').click(function() 
  {
    //check if slider is collapsed
    var is_collapsed = $(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated');
      
    //minus margin or positive margin
    var sign = (is_collapsed) ? '-' : '+'; 
    
      if(!$(this).is(':animated')) //prevent double margin on double click
      {
        if(easing) $('.willSlide').animate({"margin-right": sign+'='+slider_width},animation_speed);
        else $('.willSlide').animate({"margin-right": sign+'='+slider_width},animation_speed);
      }
     //if you need you can add class when expanded
      (is_collapsed) ? $('.willSlide').removeClass('expanded') : $('.willSlide').addClass('expanded');

  });
 });     
</script>

JS for getFeatureInfoUrl

function initMap() {
    var gmap = new google.maps.Map(document.getElementById('gmap'), {
      disableDefaultUI: true,
      keyboardShortcuts: false,
      draggable: false,
      disableDoubleClickZoom: true,
      scrollwheel: false,
      streetViewControl: false
    });

    var view = new ol.View({
      maxZoom: 21
    });
    
    function sync() {
      var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
      gmap.moveCamera({
        center: new google.maps.LatLng(center[1], center[0]),
        zoom: view.getZoom()
      });
    }
    
    view.on(['change:center', 'change:resolution'], sync);

    var olMapDiv = document.getElementById('olmap');
    var map = new ol.Map({
      target: olMapDiv,
      view: view
    });
    view.setCenter([0, 0]);
    view.setZoom(1);
    sync();

    olMapDiv.parentNode.removeChild(olMapDiv);
    gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olMapDiv);
    
    var neLayer = new ol.layer.Image({
            // view: new ol.View({
            // projection: 'EPSG:4326'
            // }),
            source: new ol.source.ImageWMS({
                url: 'https://ahocevar.com/geoserver/wms',
                params: {LAYERS: 'ne:ne', 'TILED': true},
                serverType: 'geoserver',
                ratio: 1,
            }),
            visible: true
        });
        map.addLayer(neLayer)
    
    var content = document.getElementById('info');
    map.on('click', function (evt) {
        content.innerHTML = '';
        var viewResolution = view.getResolution();
        var url = neLayer.getSource().getFeatureInfoUrl(
            evt.coordinate,
            viewResolution,
            'EPSG:3857',
            {
                'INFO_FORMAT': 'application/json',
                'propertyName': 'admin,type',
            },
        );
        if (url) {
            $.getJSON(url, function(data){
                var feature = data.features[0];
                var props = feature.properties;
                content.innerHTML = 
                "<h3>Admin : </h5><p>" +  props.admin + "</p>"
                +"<h3>Yype : </h5><p>" + props.type + "</p>"
                // overlayPopup.show(content.innerHTML);
                // console.log(props);
            })
        }
    });
}

window.initMap = initMap;

LINK DEMO WITH JSFIDDLE

0

1 Answer 1

1

One possible way to open slider when getFeatureInfoUrl is activated would be to define button click processing function as standalone function slideToggle(), which opens/closes slider and also sets global variable is_collapsed accordingly.

When getFeatureInfoUrl is activated, is_collapsed is then checked and slideToggle() called if necessary.

Relevant part of the code could then look something like this:

var easing = 1;
var animation_speed = 500;      
var slider_width;
var is_collapsed = true;

function slideToggle() {
  is_collapsed = $('#btn').css("margin-right") == slider_width+"px" && !$('#btn').is(':animated');
  var sign = (is_collapsed) ? '-' : '+'; 
  if (!$('#btn').is(':animated')) {
    if(easing) $('.willSlide').animate({"margin-right": sign+'='+slider_width},animation_speed);
    else $('.willSlide').animate({"margin-right": sign+'='+slider_width},animation_speed);
  }
  (is_collapsed) ? $('.willSlide').removeClass('expanded') : $('.willSlide').addClass('expanded');
}
  
$(document).ready(function() {     
  slider_width = $('#content').width();//get width automaticly
  $('#btn').click(sidenavToggle);
 });     

map.on('click', function (evt) {
    content.innerHTML = '';
    var viewResolution = view.getResolution();
    var url = neLayer.getSource().getFeatureInfoUrl(
      evt.coordinate,
      viewResolution,
      'EPSG:3857',
      {
          'INFO_FORMAT': 'application/json',
          'propertyName': 'admin,type',
      },
    );
    if (url) {
      $.getJSON(url, function(data){
        var feature = data.features[0];
        var props = feature.properties;
        content.innerHTML = 
        "<h3>Admin : </h5><p>" +  props.admin + "</p>"
        +"<h3>Yype : </h5><p>" + props.type + "</p>"
        if (is_collapsed) slideToggle();
      })
    }
});
1
  • Wonderful. It works perfectly and so clean. Thanks you a lot.
    – Jayzz
    Commented Nov 12, 2022 at 4:03

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.