[OpenLayers-Users] jquery code execution inside a framedCloud popup

Wed Sep 11 09:14:49 PDT 2013

On 9/11/2013 7:37 AM, Giuseppe De Marco wrote:
> I need to execute code that's normally executed inside the <head> </head>.
> This code should rapresent a javascript chart inside the popup.

When you instantiate the Popup, you pass it a DOM ID. This ID is given 
po the DIV containing the content, so you can use 
document.getElementById() or $('#id') as usual.

When constructing the HTML, you can also include class= and id= 
attributes, and then refer to them with your usual techniques.

This pseudocode illustrates the point:

// step 1: create the popup and add it to the map
// note that the popup will have DOM ID "mypopup"
var html = '<p>' + point.title + '</p>';
html += '<div id="popup_text" class="popup_content">';
html += 'This is the dot!';
html += '</div>';

popup = new OL.FramedCloud('mypopup', html, latlon);
MAP.addPopup(popup);

// step 2: there now exist DOM elements
// with id "mypopup" and "popup_text"
// and we can continue manipulating them as usual

document.getElementById('popup_text').innerHTML = 'What dot?';

document.getElementById('mypopup').style.color = 'red';

$('.popup_content').css({ 'background-color':'blue' });// jQuery

Another approach, if you're big on jQuery *and* you want to attach event 
handlers and other complex behaviors, is this: first, create the entire 
jQuery structure, add actions and handlers, then use .append() to move 
that element into the popup bubble.

Example (again, fake code):

// step 1: a popup with empty content
popup = new OL.FramedCloud('mypopup', '', latlon);
MAP.addPopup(popup);

// step 2: create the stuff that we want inside the bubble
// with event handlers and all

var content = $('<div></div>');
content.click(function () {
    alert('You clicked me!' + $(this).data('secret_message') );
});
content.data('secret_message', 'this is inside a data tag');
content.appendTo( $('#mypopup') );

The biggest gotcha I have encountered with this technique, is that the 
popup DIV was created and placed onto the map back when it had no 
content, so the new content is larger than the popup's expected size.

Workarounds for this include: a) setting an explicit size when you 
create the Popup, b) using CSS on e.g. "#mypopup div", and c) using 
jQuery to assign a width and height to the content after you have 
constructed it.

I hope that helps. I use this technique for doing jQuery accordions, D3 
charts, dynamically-determined IMG tags, etc. within popups.

-- 
Greg Allensworth, Web GIS Developer
BS  A+  Network+  Security+  Linux+  Server+
GreenInfo Network - Information and Mapping in the Public Interest
564 Market Street, Suite 510  San Francisco CA 94104
PH: 415-979-0343 x302  FX: 415-979-0371    email: gregor at greeninfo.org
Web: www.GreenInfo.org     www.MapsPortal.org

Subscribe to MapLines, our e-newsletter, at www.GreenInfo.org