Can't figure out why popups are not working with my GeoJson data, OL+: Tooltips are working but as soon as I enable the Popups the Tooltips stop working and Popups don't appear on click, no Javascript errors either.

Also is there a place to share custom behaviors? I created a OL+: Tooltips Field behavior that uses whatever field you enter in the textfield for the tooltip, it's nice when you don't just want the title and want to display a category that matches the marker or a custom views field.

Comments

batje’s picture

@1 Have to currently pass on debugging that. Any takers?

@2 If you create a new issue and post a patch, we can add that.

chrsnlsn’s picture

It's very possible that my GeoJson data format is off and that could be causing the issue, can anyone confirm that OL+ Popups isn't working with GeoJson data?
Or is there an example of well formatted GeoJson data that OpenLayers is expecting?
My latest attempt where the ToolTips function but the PopUps break looks like this.

{

    "type": "FeatureCollection",
    "features": [
        {

    "projection": "4326",
    "geometry": {
        "type": "Point",
        "coordinates": [
            -122.679,
            45.516
        ]
    },
    "type": "Feature",
    "properties": {
        "title_rendered": "CITY CENTER PARKING",
        "title": "CITY CENTER PARKING",
        "name": "CITY CENTER PARKING",
        "coordinates_rendered": "45.516, -122.679",
        "coordinates": "45.516, -122.679",
        "body_rendered": "LABOR UNIONS AND SIMILAR LABOR ORGANIZATIONS",
        "body": "LABOR UNIONS AND SIMILAR LABOR ORGANIZATIONS",
        "latitude_rendered": "45.516",
        "latitude": "45.516",
        "longitude_rendered": "-122.679",
        "longitude": "-122.679",
        "description": "LABOR UNIONS AND SIMILAR LABOR ORGANIZATIONS",
        "code": "81393",
        "id": 2
    },
    "wkt": "POINT(-122.679 45.516)",
    "id": 2

},
......... 

Does that format look correct?
Points are placed correctly and tooltips work they just break when I turn on OL+ Popups.

Thanks for any help in tracking down the problem!

chrsnlsn’s picture

Solved it. Not sure where exactly the error was coming from, but now it works with both openlayers views and feeding it GeoJson directly.
Rewrote a bit of it to work with my use case where I am using OL+Tooltips Field to display an address on hover then OL+Popups to display on click so that the user can click through the multiple in this case businesses residing at that specific address. here is my code for the openlayers_plus_behavior_popup.js file in case anyone wants to take a look.

I had to add a conditional section in the openPopup function to check and see if the feature was combined using the cluster behavior or not.

(function ($) {
  Drupal.behaviors.openlayers_plus_behavior_popup = {
    attach: function(context, settings) {
      var data = $(context).data('openlayers');
	  var isVector = function(layer) {
	    if (layer.__proto__) {
	      return layer.__proto__.CLASS_NAME === 'OpenLayers.Layer.Vector';
	    }
	    else if (layer.CLASS_NAME) {
	      return layer.CLASS_NAME === 'OpenLayers.Layer.Vector';
	    }
	  };
      if (data && data.map.behaviors.openlayers_plus_behavior_popup) {
        // Collect vector layers
        var vector_layers_pop = [];

        for (var key in data.openlayers.layers) {
	
          var drupalID = data.openlayers.layers[key].drupalID;
          var layer = data.openlayers.layers[key];
		  if(drupalID){
			if (isVector(layer)) {
		        vector_layers_pop.push(layer);
		      }
		  }
        }

        // Add control
         var control = new OpenLayers.Control.SelectFeature(
          vector_layers_pop,
          {
            activeByDefault: true,
            highlightOnly: false,
            multiple: false,
            hover: false,
            callbacks: {
	//remove over and out callbacks using tooltip for that functionality
              //'over': Drupal.openlayers_plus_behavior_popup.over,
              //'out': Drupal.openlayers_plus_behavior_popup.out,
              'click': Drupal.behaviors.openlayers_plus_behavior_popup.openPopup
            }
          }
        );
        data.openlayers.addControl(control);
        control.activate();
      }
      else if ($(context).is('.openlayers-popupbox')) {
        // Popup close
        $('a.popup-close', context).click(function() {
          $(this).parents('.openlayers-popupbox').fadeOut('fast', function() { $(this).remove(); });
          return false;
        });

        // Set initial pager state
        Drupal.behaviors.openlayers_plus_behavior_popup.pager(context, 'set');

        // Next link
        $('ul.popup-links a.next', context).click(function() {
          var context = $(this).parents('.openlayers-popupbox');
          Drupal.behaviors.openlayers_plus_behavior_popup.pager(context, 'next');
        });

        // Prev link
        $('ul.popup-links a.prev', context).click(function() {
          var context = $(this).parents('.openlayers-popupbox');
          Drupal.behaviors.openlayers_plus_behavior_popup.pager(context, 'prev');
        });

      }
    }, //end attach

	    // Pager actions
	    'pager': function(context, op) {
		  $(".openlayers-popupbox .item-list ul li").each(function(){
			$(this).find("img").parent("p").siblings("dl").css({'width':'180px','margin-left':'0px'});
		  });
	      var active = $('li.openlayers-popupbox-active', context);
	      var index = $('div.item-list > ul > li', context).index(active);
	      var total = $('div.item-list > ul > li', context).size();

	      switch (op) {
	        case 'set':
	          if (active.size() === 0) {
	            index = 0;
	            $('div.item-list > ul > li', context).hide();
	            $('div.item-list > ul > li:first', context).addClass('openlayers-popupbox-active').show();
	            $('ul.popup-links a.prev', context).addClass('disabled');
	            if (total <= 1) {
	              $('ul.popup-links', context).hide();
	            }
	          }
	          else {
	            if (index === 0) {
	              $('ul.popup-links a.prev', context).addClass('disabled');
	              $('ul.popup-links a.next', context).removeClass('disabled');
	            }
	            else if (index == (total - 1)) {
	              $('ul.popup-links a.next', context).addClass('disabled');
	              $('ul.popup-links a.prev', context).removeClass('disabled');
	            }
	            else {
	              $('ul.popup-links a.next', context).removeClass('disabled');
	              $('ul.popup-links a.prev', context).removeClass('disabled');
	            }
	          }
	          var count = parseInt(index + 1, 10) + ' / ' + parseInt(total, 10);
	          $('span.count', context).text(count);
	          break;
	        case 'next':
	          if (index < (total - 1)) {
	            active.removeClass('openlayers-popupbox-active').hide()
	              .next('li').addClass('openlayers-popupbox-active').show();
	            Drupal.behaviors.openlayers_plus_behavior_popup.pager(context, 'set');
	          }
	          break;
	        case 'prev':
	          if (index > 0) {
	            active.removeClass('openlayers-popupbox-active').hide()
	              .prev('li').addClass('openlayers-popupbox-active').show();
	            Drupal.behaviors.openlayers_plus_behavior_popup.pager(context, 'set');
	          }
	          break;
	      }
	    },

	    // Click state
	    openPopup: function(feature) {
	
	      var context = $(feature.layer.map.div);

	      // Initialize popup
	      if (!$('.openlayers-popupbox', context).size()) {
	        context.append("<div class='openlayers-popupbox popup'></div>");
	      }
	      else {
	        $('.openlayers-popupbox:not(.popup)').addClass('popup');
	      }

	      // Hide the layer switcher if it's open.
	      for (var key in context.data('openlayers').openlayers.controls) {
	        if (context.data('openlayers').openlayers.controls[key].CLASS_NAME == "OpenLayers.Control.LayerSwitcherPlus") {
	          context.data('openlayers').openlayers.controls[key].minimizeControl();
	        }
	      }

		var point  = new OpenLayers.LonLat(
		    feature.geometry.x,
		    feature.geometry.y);
		var offset = feature.layer.getViewPortPxFromLonLat(point);
	    $(".openlayers-popupbox").css({
		    zIndex: '1500',
		    position: 'absolute',
		    left: (offset.x - 20),
		    top: (offset.y - 5)});
	      var text;
	      text = "<a href='#close' class='popup-close'>X</a>";
	 	  text +="<div class='item-list'><ul>";

	      if(feature.attributes.count>1){
		    for (var key in feature.cluster) {
			  text += "<li>";
			  text += "<h2 class='popup-title'>" + feature.cluster[key].attributes.name + "</h2>";
		      text += "<div class='popup-content'>" + feature.cluster[key].attributes.description + "</div>";
			  text += "</li>";
			}
			text += "</ul></div><div class='popup-pager'><ul class='links popup-links'><li><a class='prev' href='#prev'>Prev</a></li><li><a class='next' href='#next'>Next</a></li></ul><span class='count'>" + parseInt(feature.attributes.count, 10) + "</span></div>";
		  }
		else if(feature.attributes.count===1){
			text += "<li>";
	        text += "<h2 class='popup-title'>" + feature.cluster[0].attributes.name + "</h2>";
	        text += "<div class='popup-content'>" + feature.cluster[0].attributes.description + "</div>";
			text += "</li>";
	  	  }
		  else{
			text += "<li>";
	        text += "<h2 class='popup-title'>" + feature.attributes.name + "</h2>";
	        text += "<div class='popup-content'>" + feature.attributes.description + "</div>";
			text += "</li>";
	  	  }
				
	      $('.openlayers-popupbox', context).html(text).show();
	
	      Drupal.attachBehaviors($('.openlayers-popupbox', context));
	
	    },
	
	    // Callback for hover state
	    // Only show tooltips on hover if the story popup is not open.
	    'over': function(feature) {
	      var context = $(feature.layer.map.div);
	      if (!$('.openlayers-popupbox.popup', context).size()) {
	        if (feature.attributes.name) {
	          var text = "<div class='openlayers-popupbox'>";
	          text += "<h2 class='popup-title'>" + feature.attributes.name + "</h2>";
	          text += "<div class='popup-count'>" + parseInt(feature.attributes.count, 10) + "</div>";
	          text += "</div>";
	          context.append(text);
	        }
	      }
	    },

	    // Call back for out state.
	    'out': function(feature) {
	      var context = $(feature.layer.map.div);
	      $('.openlayers-popupbox:not(.popup)', context).fadeOut('fast', function() { $(this).remove(); });
	    }
	
  }; // end behaviours

})(jQuery);
batje’s picture

can you make a patch out of this? see http://drupal.org/node/707484

chrsnlsn’s picture

Alright, first patch so a couple questions, when I cloned the module I got

git clone --branch 7.x-1.x-dev http://git.drupal.org/project/openlayers_plus.git

warning: Remote branch 7.x-1.x-dev not found in upstream origin, using HEAD instead

So I just patched against the master branch

also in the instructions it mentioned [issue-number]-[comment-number] which I guessed were the nid of this issue and the comment number of the comment I will be attaching the patch to?

batje’s picture

looks ok.

Are you sure we should include

+		  $(".openlayers-popupbox .item-list ul li").each(function(){
+			$(this).find("img").parent("p").siblings("dl").css({'width':'180px','margin-left':'0px'});
+		  });

Not sure if everyone will have img>p>dl in their popups. (And if so, if they should be 180px)

Is there another, more generic way, to achieve what you are trying to do here?

chrsnlsn’s picture

Whoops missed that, I will roll another one and remove that.

davidserene’s picture

Category: support » bug
Status: Active » Fixed
Exploratus’s picture

I was pointed over here (https://drupal.org/node/2005996) saying this could fix clustering issues with OL popup. Nevertheless, this seems to only address the 1.x branch. Is there a patch or was this committed to the 2.x branch?

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.