7

I have a page that shows an OpenLayers map which is fed with data coming from an Open Layers data overlay view (user locations; the location is provided via a location cck field in the user account settings). Right underneath the map the overlay data is listed using a clone of the Open Layers data overlay.

Is there a way to filter the displayed entitites in the list based on what part of the map is currently looked at? That is, is there a way to hide entities from the list when I zoom into a different part of the map?

Example: Zoomed to full extend, showing the whole world -> display all entities. Zoomed to the US, showing only California -> display all entities with a Californian location.

2

We had the same requirement in a recent project. It was solved with javascript, there is no out of the box way to do this.

Please see https://www.transpower.co.nz/projects

Here is some code to get you started:

(function ($, Drupal, window, document, undefined) {

  // ...

  $(function(){

    if($(".not-front .openlayers-map").length && !$('.node-type-project').length) { // only run when there is actually a map on the page, but not on the home page

      if ($('body').hasClass('page-community-initiatives')) {
        is_ci = true;
      }

      mapData = $(".openlayers-map").data('openlayers').openlayers;
      pointLayers = mapData.getLayersByClass("OpenLayers.Layer.Vector");

      // cycle through all layers and points on those layers, adding the points to an array
      for (var i in pointLayers) {
        for (var j in pointLayers[i].features) {
          pointData.push(pointLayers[i].features[j]);
        }
      }

      // if we've pulled out some points, go make a list
      if (pointData.length) {
        makeList(pointData, ".pane-openlayers-map");
      } else {
        $('.pane-openlayers-map').append('<div class="no-results"><p>Your search returned no results, please try again.</p></div>')
      }

      // add event listener to the map to be fired whenever the user interacts with it.
      // calls refreshList function above
      mapData.events.on({
        "moveend": refreshList
      });

      Drupal.openlayers.popup.popupSelect.events.on({
        "featurehighlighted": popupOpen,
        "featureunhighlighted": popupClose
      });

    }

  });

})(jQuery, Drupal, this, this.document);

The entire JS file can be download (unminified) from the theme. Please alter to suit your needs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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