d9e466f645
calculate with inherited style". Includes manual regression test. r=me, (Closes #1906). CLA on file. git-svn-id: http://svn.openlayers.org/trunk/openlayers@8906 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
114 lines
3.6 KiB
HTML
114 lines
3.6 KiB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
|
|
<head>
|
|
<title>OpenLayers: Popup Mayhem</title>
|
|
<link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
|
|
<style type="text/css">
|
|
#map {
|
|
width: 900px;
|
|
height: 500px;
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
|
|
<script src="../../lib/OpenLayers.js"></script>
|
|
<script type="text/javascript">
|
|
var map;
|
|
var layer, markers;
|
|
|
|
var currentPopup;
|
|
|
|
|
|
// different popup types
|
|
|
|
|
|
//disable the autosize for the purpose of our matrix
|
|
OpenLayers.Popup.FramedCloud.prototype.autoSize = false;
|
|
|
|
AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
|
|
'autoSize': true
|
|
});
|
|
|
|
function init(){
|
|
map = new OpenLayers.Map('map');
|
|
|
|
layer = new OpenLayers.Layer(
|
|
"popupMatrix",
|
|
{isBaseLayer: true}
|
|
);
|
|
map.addLayer(layer);
|
|
|
|
markers = new OpenLayers.Layer.Markers("zibo");
|
|
map.addLayer(markers);
|
|
|
|
addMarkers();
|
|
map.zoomToMaxExtent();
|
|
}
|
|
|
|
function addMarkers() {
|
|
|
|
var ll, popupClass, popupContentHTML;
|
|
|
|
//anchored bubble popup small contents autosize closebox
|
|
ll = new OpenLayers.LonLat(-35,-15);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = "<div>This text's line-height is affected<br/>by it's parents. Thus we have to<br/>place the content inside<br/>the correct container to get<br/>the rendered size.</div>";
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
}
|
|
|
|
/**
|
|
* Function: addMarker
|
|
* Add a new marker to the markers layer given the following lonlat,
|
|
* popupClass, and popup contents HTML. Also allow specifying
|
|
* whether or not to give the popup a close box.
|
|
*
|
|
* Parameters:
|
|
* ll - {<OpenLayers.LonLat>} Where to place the marker
|
|
* popupClass - {<OpenLayers.Class>} Which class of popup to bring up
|
|
* when the marker is clicked.
|
|
* popupContentHTML - {String} What to put in the popup
|
|
* closeBox - {Boolean} Should popup have a close box?
|
|
* overflow - {Boolean} Let the popup overflow scrollbars?
|
|
*/
|
|
function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {
|
|
|
|
var feature = new OpenLayers.Feature(markers, ll);
|
|
feature.closeBox = closeBox;
|
|
feature.popupClass = popupClass;
|
|
feature.data.popupContentHTML = popupContentHTML;
|
|
feature.data.overflow = (overflow) ? "auto" : "hidden";
|
|
|
|
var marker = feature.createMarker();
|
|
|
|
var markerClick = function (evt) {
|
|
if (this.popup == null) {
|
|
this.popup = this.createPopup(this.closeBox);
|
|
map.addPopup(this.popup);
|
|
this.popup.show();
|
|
} else {
|
|
this.popup.toggle();
|
|
}
|
|
currentPopup = this.popup;
|
|
OpenLayers.Event.stop(evt);
|
|
};
|
|
marker.events.register("mousedown", feature, markerClick);
|
|
|
|
markers.addMarker(marker);
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="init()">
|
|
<h1 id="title">Popup Matrix</h1>
|
|
|
|
<div id="tags">
|
|
</div>
|
|
<div style="line-height: 40px;">
|
|
<div id="map" class="smallmap"></div>
|
|
</div>
|
|
Click on popup, should be able to read a full sentence, not just two lines.
|
|
</div>
|
|
</body>
|
|
</html>
|