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: [email protected]
Web: www.GreenInfo.org www.MapsPortal.org
Subscribe to MapLines, our e-newsletter, at www.GreenInfo.org
_______________________________________________
Users mailing list
[email protected]
http://lists.osgeo.org/mailman/listinfo/openlayers-users
