fb3c02354f
that Andreas has been working so hard on. I think this is the single most awesome commit I've ever had the pleasure of committing. The results of this commit are described on http://trac.openlayers.org/wiki/Styles: essentially, this makes it possible to style features in all kinds of fun ways based on rules, and will also form the underlying basis for #533. Things this patch adds: * OL.Rule classes. These classes allow you to do tests against the propertie of a feature, and set a style based on these properties -- so you can compare the 'speedlimit' property of a line, and test if it is > 60, and if it is greater than 60, render it in a different color. You can also test combinations of rules using the OL.Rule.Logical class, and test featureids with the FeatureID class. * OL.Style class: The OL.Style class lets you wrap up Rules into styles that can be used with drawFeature to draw the feature in the selected style. * OL.Layer.Vector.drawFeature will check if the given style is an OL.Style object, and if so, it will draw the feature accordingly. examples/georss-flickr.html shows usage of these classes. Many, many thanks go to Andreas for all his hard work on this: this code really is very pretty, and includes unit tests for all the classes (and we know that I am a big fan of tests.) Three cheers for Andreas: Hip hip, hooray! hip hip, hooray! hip hip, hooray! git-svn-id: http://svn.openlayers.org/trunk/openlayers@5429 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
106 lines
4.3 KiB
HTML
106 lines
4.3 KiB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<style type="text/css">
|
|
#map {
|
|
width: 800px;
|
|
height: 400px;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.olPopupContent {
|
|
font-size: smaller;
|
|
}
|
|
</style>
|
|
<script src="../lib/OpenLayers.js"></script>
|
|
<script type="text/javascript">
|
|
var map, layer, markerLayer, style, popup;
|
|
|
|
|
|
function init(){
|
|
map = new OpenLayers.Map('map', {maxResolution:'auto'});
|
|
|
|
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
|
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
|
|
map.addLayer(layer);
|
|
|
|
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
|
|
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
|
|
|
// create a property style that reads the externalGraphic url from
|
|
// the thumbail attribute of the rss item
|
|
style = new OpenLayers.Style({
|
|
externalGraphic: "${thumbnail}",
|
|
pointRadius: 20});
|
|
|
|
// create a rule with a point symbolizer that will make the thumbnail
|
|
// larger if the title of the rss item conatins "powder"
|
|
var rule = new OpenLayers.Rule.Comparison({
|
|
type: OpenLayers.Rule.Comparison.LIKE,
|
|
property: "title",
|
|
value: "*powder*",
|
|
symbolizer: {"Point": {pointRadius: 30}}});
|
|
rule.value2regex("*");
|
|
|
|
style.addRules([rule]);
|
|
|
|
markerLayer = new OpenLayers.Layer.Vector("", {style: style});
|
|
map.addLayer(markerLayer);
|
|
|
|
// control that will show a popup when clicking on a thumbnail
|
|
var popupControl = new OpenLayers.Control.SelectFeature(markerLayer, {
|
|
selectStyle: style,
|
|
onSelect: function(feature) {
|
|
var pos = feature.geometry;
|
|
if (popup) {
|
|
map.removePopup(popup);
|
|
}
|
|
popup = new OpenLayers.Popup("popup",
|
|
new OpenLayers.LonLat(pos.x, pos.y),
|
|
new OpenLayers.Size(254,320),
|
|
"<h3>" + feature.attributes.title + "</h3>" +
|
|
feature.attributes.description,
|
|
true);
|
|
map.addPopup(popup);
|
|
}
|
|
});
|
|
map.addControl(popupControl);
|
|
|
|
popupControl.activate();
|
|
|
|
OpenLayers.loadURL("xml/georss-flickr.xml", "", null, afterload);
|
|
|
|
}
|
|
|
|
function afterload(req) {
|
|
// extended version of OpenLayers.Format.GeoRSS.createFeatureFromItem;
|
|
// adds the thumbnail attribute to the feature
|
|
function createFeatureFromItem(item) {
|
|
var feature = OpenLayers.Format.GeoRSS.prototype
|
|
.createFeatureFromItem.apply(this, arguments);
|
|
feature.attributes.thumbnail =
|
|
this.getElementsByTagNameNS(
|
|
item, "*", "thumbnail")[0].getAttribute("url");
|
|
return feature;
|
|
}
|
|
|
|
var store = new OpenLayers.Format.GeoRSS({
|
|
createFeatureFromItem: createFeatureFromItem});
|
|
|
|
rss = store.read(req.responseXML);
|
|
|
|
// get the title of the RSS feed
|
|
var title = req.responseXML.getElementsByTagName("title")[0]
|
|
.firstChild.nodeValue;
|
|
|
|
markerLayer.setName(title);
|
|
markerLayer.addFeatures(rss);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="init()">
|
|
<h1>GeoRSS from Flickr in OpenLayers</h1>
|
|
<p>The displayed GeoRSS feed has a <tt><media:thumbnail/></tt> property for each item. An extended <tt>createFeatureFromItem()</tt> function is used to add this attribute to the attributes hash of each feature read in by <tt>OpenLayers.Format.GeoRSS</tt>. The example is configured with a style to render each item with its thumbnail image. Also, to show how rules work, we defined a rule that if the title of an rss item contains "powder", it will be rendered larger than the others.</p>
|
|
<div id="map"></div>
|
|
</body>
|
|
</html>
|