Triggering popups from external anchor tags?

Hello,

i'm trying to do the same thing... but i'm having no luck. How do you get the feature object to pass to the function Drupal.openlayers.popup.popupSelect.clickFeature ?

thanks

Hi @joeysantiago, take a look at the Popup behavior Javascript; it should help you. I think this is in includes/behaviors.

Hello... thanks, i already looked into it, but haven't found any way to do this... i tried to look for the object feature to pass to the function, but had no fortune.

can you give me a snippet? thanks

Looking for same thing, anybody got solution ?

thanks

Found a new way of doing it. Actually I was looking for something like.

---------------------- ----------------------------
---------------------- ----------------------------
-Node List here- -----Map here----------
--------------------- ----------------------------
--------------------- ----------------------------
--------------------- ----------------------------

[both are views left one is attachment with openlayer map view.]

So now if user click on any node title listed on left, it should show a respective popup on map. What I have done I am going to share.

Added following js code in my custom js fil

Drupal.settings.nid = Drupal.settings.nid || [];
Drupal.settings.getAllFeature;

function my_map() {
	Drupal.settings.getAllFeature = $('div#openlayers-map-auto-id-0').data('openlayers').openlayers.layers[1];
	var all_features = Drupal.settings.getAllFeature.features;
	for (var key in all_features) {
	      var feature = all_features[key];
	      Drupal.settings.nid[feature.attributes.nid] = key;
	}

}

function show_popup(nid) {
	if (Drupal.settings.nid) {
		var index = Drupal.settings.nid[nid];
		var feature = Drupal.settings.getAllFeature.features[index];
		Drupal.openlayers.popup.popupSelect.clickFeature(feature);
	} 
	return false;
}

$(document).ready(function(){
    my_map();
});

Now you can add a link like: <a href="#" onclick="show_popup(nid)">Example</a> or you can use Jquery to run this event.

Hope this will work for everyone.

Thanks

Kuldev

Desperately trying to get this to work with no success. Is it essential that the list of nodes is an attachment view. When I create an attachment view I'm not given the option to attach it to my openlayers display... only to the default display? I have tried with a seperate block but on click I get no popup.

I hope you took all steps described here : http://drupal.org/node/627816

no not at all attachment isn't mandatory, actually what you need is one view ( create one openlayer and listing block) having same filter and sorting.
could you check in firefox's error console what it is saying.

if error is something like : feature is undefined
then probably you need to add nid field in your openlayer view.

try this
hope this work

thanks

devtherock,

thank you so much for this. i got it to work without much hassle. i simply put the js next to a custom module, and in the custom module i have a map_alter hook. i load the js with drupal_add_js within that hook.

i had to change layers[1] to layers[2] because i have 3 layers on the page.

and that was it!

thanks again!

shiraz

Thanks,
it works , but I have a problem with feature.attributes.description !
when I click on the marker, the popup appears well (title, description, image), but when i click on the new link, description is empty !

Any idea ?

Marked #938558: Open marker popup from link? as duplicate.

Thanks,

This solution works perfectly for the popup but when you are on a layer which only has tooltip you get an error due to the following line: Drupal.openlayers.popup.popupSelect.clickFeature(feature);

Would anyone now how to trigger the tooltip instead of the popup ?

Cheers
Guillaume

I have D7 and dev OL. I've tried your code but I get: "undefined method" at this line:
Drupal.settings.getAllFeature = $('div#openlayers-map-auto-id-0').data('openlayers').openlayers.layers[1];

I read about changes in ne OL versions, but I can't make things work.

U can use Drupal.openlayers.popup.popupSelect.clickFeature(Drupal.openlayers.popup.popupSelect.layers[0].features[0]);
Drupal.openlayers.popup.popupSelect.clickoutFeature(Drupal.openlayers.popup.popupSelect.layers[0].features[0]);

Here is what i wrote based on a rewrite of #7
It works for any amount of layers (each organic group we have can use different layers combo).
Its also more memory friendly and stuff...

Drupal.settings.nid = Drupal.settings.nid || [];
Drupal.settings.getAllFeature;

function my_map() {

  var all_layers = Drupal.openlayers.popup.popupSelect.layers;
  for(var key1 in all_layers) {
    var current_layer = all_layers[key1];
	var all_features_in_layer = current_layer.features;
	for(var key2 in all_features_in_layer) {
	  var current_feature = all_features_in_layer[key2];
	  Drupal.settings.nid[current_feature.attributes.nid] = current_feature;
	}
  }
}

function show_popup(nid) {
  if (Drupal.settings.nid) {
  var feature = Drupal.settings.nid[nid];
  Drupal.openlayers.popup.popupSelect.clickFeature(feature);
  }

}

$(document).ready(function(){
    my_map();
});

Drupal.settings.nid = Drupal.settings.nid || [];
Drupal.settings.getAllFeature;

(function($) {
	Drupal.behaviors.MODULENAME = {
		attach: function(context, settings) {
			$('.MAP_CONTAINER_CLASS').each(function() {
				var ol = $(this).data('openlayers').openlayers.layers;
				// set nid, feature vector array
				var all_layers = ol;
				for (var key1 in all_layers) {
					var current_layer = all_layers[key1];
					var all_features_in_layer = current_layer.features;
					for (var key2 in all_features_in_layer) {
						var current_feature = all_features_in_layer[key2];
						Drupal.settings.nid[current_feature.attributes.nid] = current_feature;
					}
				}
			});
			// on click event to focus and show pop-up
			$('.locator-row', context).click(function() {
				var lat = $(this).attr('lat');
				var lon = $(this).attr('lon');
				var nid = $(this).attr('nid');
				$('.openlayers-map-ol_locator_proximity_search_map').each(function() {
					var map_id = $(this).attr('id');
					var map = Drupal.settings.openlayers.maps[map_id];
					var ol = $(this).data('openlayers');
					var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), ol.openlayers.getProjectionObject());
					ol.openlayers.setCenter(lonLat, 15);
					// show pop-up
					var feature = Drupal.settings.nid[nid];
					Drupal.openlayers.popup.popupSelect.clickFeature(feature);
				});
			});
		}
	};

})(jQuery);

Here is the markup for views attachment unordered list:

<div class="views-row">
    <div lon="-73.9886" lat="40.7503" nid="9539" class="locator-row">
        <div class="views-field views-field-title">        <span class="field-content"><a href="http://guessd7.local/node/9539">Macy's</a></span>  </div>    <div class="views-field views-field-distance">    <span class="views-label views-label-distance">Distance: </span>    <span class="field-content">0.60 Mi </span>  </div></div>

  </div>

Could you please explain a little more, i can't make it work !!

thanks

Regarding to #17

When you click on the link it says
Uncaught TypeError: Cannot read property 'layer' of undefined

current_feature.attributes.nid has to be available, so the trick is to abuse the ol title field to set the nid (and hide it on the display) and render the title/body/other fields in a custom field and add that as the ol body field.

This way you can use the nid for the features array and pick the correct feature, else you'll get an error like ^^.

This also works with ajax! So you can create some amazing stuff already.

I did get #17 to work by creating the object before the loop. Like so:

		$('. MAP_CONTAINER_CLASS').each(function() {
			var ol = $(this).data('openlayers').openlayers.layers;
			// set nid, feature vector array
			var all_layers = ol;
			Drupal.settings.nid = new Object();
			for (var key1 in all_layers) {
				var current_layer = all_layers[key1];
				var all_features_in_layer = current_layer.features;
				for (var key2 in all_features_in_layer) {
					var current_feature = all_features_in_layer[key2];
					Drupal.settings.nid[current_feature.attributes.nid] = current_feature;
				}
			}
		});

And for my purposes, I did not need the map to zoom in to the location, so I did the second part of the script like this:

		// on click event to focus and show pop-up
		$('.locator-row', context).click(function() {
			var nid = $(this).attr('nid');
			$('.MAP_CONTAINER_CLASS').each(function() {
				var map_id = $(this).attr('id');
				var map = Drupal.settings.openlayers.maps[map_id];
				var ol = $(this).data('openlayers');
				// show pop-up
				var feature = Drupal.settings.nid[nid];
				Drupal.openlayers.popup.popupSelect.clickFeature(feature);
			});
		});

This worked pretty well following instructions in #17 and paying attention to the right classes. A click centers the map on the appropriate marker, but for whatever reason I cannot get the popup to open.

Any live examples of this working out there?

Edit: nevermind - I forgot to update an instance of nid to pid for my use. Popups now functioning just fine

Can't get #17 to work no matter what I do.

Using latest -dev release.

What should my .container class be? Must I define a MODULENAME?

Can someone please elaborate?

I am not an expert but this is the way it worked for me:

• MODULENAME: changing it didn't do anything. You can leave it like that
• .MAP_CONTAINER_CLASS: I used .openlayers-map. I tried first using the ones that are on the container div (openlayers-container-openlayers-map) but didn't work so I went one div deeper and found this class. If using the #17 you have to change $('.openlayers-map-ol_locator_proximity_search_map') too
• Popups: You have to add the NID field to the Openlayers Data Overlay to make it work

Sorry for my non technical description

The solutions listed in above works well with the case when a node has only one location. To support the case when a node has multiple locations, below is what I did:

1. In the backend
In my case, I am using views to display the map data. Address field and geofield are used to represent the location and cooridinates separatly. A node has multiple locations/coordinates. in the node, one location correspods to one cooridinate.
1) Add the Address field and geofield to the Fields. in the "MULTIPLE FIELD SETTINGS" field setting, uncheck the "Display all values in the same row".
2) Add the Address field delta and geofield delta to the Fields
3) With the patch provided in the lastest Dev version views (https://drupal.org/node/699252), Add one more Filter, fields comparison, select the two delta fields to be equal.
4) Add the external anchor Markup which triggers the popup when clicked.
<a herf="#" class= "olmapmarkerclass" data-nid="[pid][field_teacher_coordinates]" data-geoida = "pid" data-geoidb = "field_teacher_coordinates"> show marker</a>
in above markup, the pid is the node id, and the field_teacher_coordinates is the coordinate field.
2. In the frontend
in the frontend. js codes would build up the map object when the anchor link is clicked the first time. while building up the map object, the node id and cooridinate are combined to generat an unique key to identify the features in the map. By map object, it means the Drupal.settings.nid object used below.

Drupal.settings.nid = {};
Drupal.settings.getAllFeature;

function buildmy_map(geoida, geoidb) {
	// a node/user might have multiple features/address
	if(Drupal.settings.getAllFeature) return;
	Drupal.settings.getAllFeature = jQuery('.openlayers-map').data('openlayers').openlayers.layers[1];
	var all_features = Drupal.settings.getAllFeature.features;
	for (var key in all_features) {
	      var feature = all_features[key];
	      var featureid = feature.attributes[geoida] + feature.attributes[geoidb];
	      Drupal.settings.nid[featureid] = key;
	}

}

function show_mapmarkerpopup(nid, geoida, geoidb) {
	//build the map if it's not built already
	buildmy_map(geoida, geoidb);
	if (Drupal.settings.nid) {
	var index = Drupal.settings.nid[nid];
	if(!index) return;
	var feature = Drupal.settings.getAllFeature.features[index];
	Drupal.openlayers.popup.popupSelect.clickFeature(feature);
	}
	return false;
}


jQuery(document).ready(function(){
	//register the click event for external links
   jQuery(document).delegate(".olmapmarkerclass", "click", function(evt) {
		var nid = jQuery(this).data("nid");
		var geoida = jQuery(this).data("geoida");
		var geoidb = jQuery(this).data("geoidb");
		show_mapmarkerpopup(nid, geoida, geoidb);
	});
});

OK - I had to extend it a little bit further to be able to handle situations where there are multiple maps on the page (like in different horizontal tabs). Turns out in this situation Drupal.openlayers.popup.popupSelect.clickFeature(feature) simply will not do the trick, since Drupal.openlayers.popup.popupSelect is a helper put in place by openlayers_behavior_popup.js to point to the control it added to the map for selecting markers and only points to the latest-map-rendered, rather than supporting multiple maps.

I've put together the ideas in previous code examples above and come up with the following solution:

1. Make sure you are rendering the 'nid' field for each result in the Openlayers Data views display - that makes it available as an attribute on each marker

2. Use an anchor tag like the following:

  <a href="#" class= "map-marker-popup" data-nid="<?php print $node->nid; ?>"> Show marker</a>

3. And then the following code pieces it all together:

(function($) {

  /**
   * A map of nids to an array of maps on which the node
   * is rendered. Eacn map value keeps a reference to the
   * feature which represents the node on that map.
   *
   * @type {{}}
   */
  var nids_to_features = {};

  Drupal.behaviors.mymodule_maps_popup_links = {
    attach: function(context, settings) {

      // Iterate over all maps / features and build up
      // our nids_to_features map.
      $('.openlayers-map').once().each(function() {
        var $map_container = $(this);
        if ($(this).data('openlayers')) {
          var ol = $(this).data('openlayers').openlayers.layers;
          // set nid, feature vector array
          var all_layers = ol;
          for (var key1 in all_layers) {
            var current_layer = all_layers[key1];
            var all_features_in_layer = current_layer.features;
            for (var key2 in all_features_in_layer) {
              var current_feature = all_features_in_layer[key2];
              if (current_feature.attributes.hasOwnProperty('nid')) {
                if (!nids_to_features.hasOwnProperty(current_feature.attributes.nid)) {
                  nids_to_features[current_feature.attributes.nid] = {};
                }
                if (!nids_to_features[current_feature.attributes.nid].hasOwnProperty($map_container.attr('id'))) {
                  nids_to_features[current_feature.attributes.nid][$map_container.attr('id')] = {
                    'mapContainer': $map_container,
                    'feature': null
                  };
                }
                nids_to_features[current_feature.attributes.nid][$map_container.attr('id')]['feature'] = current_feature;
              }
            }
          }
        }
      });

      // on click event to focus and show pop-up
      $('a.map-marker-popup', context).click(function() {
        var nid = $(this).data('nid');
        if (nid && nids_to_features.hasOwnProperty(nid)) {

          // Find first visible map containing the node.
          for (var map_id in nids_to_features[nid]) {
            if (nids_to_features[nid].hasOwnProperty(map_id)) {
              var map_info = nids_to_features[nid][map_id];
              if (map_info.feature && map_info.mapContainer.is(':visible')) {

                // Popup the popup.

                // We need to iterate over all controls on the map until we
                // find the one openlayers_behavior_popup added to handle popups.
                if (map_info.mapContainer.data('openlayers').openlayers.controls) {
                  var controls_length = map_info.mapContainer.data('openlayers').openlayers.controls.length;
                  for (var ci = 0; ci < controls_length; ci++) {
                    var control = map_info.mapContainer.data('openlayers').openlayers.controls[ci];
                    // Magic test to find the right one. Hopefully this is good enough.
                    if (control.active && (control.displayClass === 'olControlSelectFeature') && control.clickFeature) {
                      control.clickFeature(map_info.feature);
                      break;
                    }
                  }
                }
                // End -- Popup the popup.

                // Scroll up to the map, in case it's out of view.
                if ($.scrollTo) {
                  $.scrollTo(map_info.mapContainer, 100);
                }
                break;
              }
            }
          }
        }
        return false;
      });
    }
  };

})(jQuery);

Hope someone finds this helpful!

Perhaps it would be a nice idea to get something like this into openlayers so it's easier to get node-id-based-show-marker links onto the page?

It does not work when the marker is inside a cluster (using the Cluster Features)
Is there a way to make it work? Thanks

It's work with openlayer 7.x-2.0-beta 9 but since the update on beta 11, i have some problem with : No popup open when anchor tags are clicked.
I hope it will be corrected on next version !

Are there any errors in your browser console? They might be helpful for debugging this issue.

Cleaning up the issue queue for #2670484: Stable 7.x-2.0 release.

Please supply a patch for review if status "needs review" is applied.
If this is a bug, it should be a new issue.
Feel free to open a bug report for the issue mentioned in #28
The original post was a support request which has been answered extensively.

Re-closing.

I wonder if someone can help: How do I get the NID values from the "openlayers data overlay" data array into the features on the map?

My OpenLayers Data Overlay has the NID values, but they don't appear in the feature.attributes array.

Perhaps this is something that has changed since 3 years ago...?

Hi @fonant, let's not reopen this support request. This issue started as a D6 support request and any suggested solution might indeed have changed or no longer work.

I believe you are referring to #26. You probably have to create a field containing the mentioned anchor tag. Then, change the display format settings to vector data overlay. And configure the title of the feature to display the field you just created.

If you want more advanced external triggers for your features you can also try this module as an example: https://www.drupal.org/project/olfp (it's currently unsupported).