7f34868fe2
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11158 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
119 lines
5.0 KiB
HTML
119 lines
5.0 KiB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
|
<link rel="stylesheet" href="style.css" type="text/css" />
|
|
<style type="text/css">
|
|
.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://vmap0.tiles.osgeo.org/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}"});
|
|
|
|
// create a rule with a point symbolizer that will make the thumbnail
|
|
// larger if the title of the rss item contains "powder"
|
|
var rule = new OpenLayers.Rule({
|
|
symbolizer: {pointRadius: 30},
|
|
filter: new OpenLayers.Filter.Comparison({
|
|
type: OpenLayers.Filter.Comparison.LIKE,
|
|
property: "title",
|
|
value: "*powder*"
|
|
})
|
|
});
|
|
rule.filter.value2regex("*");
|
|
|
|
// If the above rule does not apply, use a smaller pointRadius.
|
|
var elseRule = new OpenLayers.Rule({
|
|
elseFilter: true,
|
|
symbolizer: {pointRadius: 20}
|
|
});
|
|
|
|
style.addRules([rule, elseRule]);
|
|
|
|
// Create a GML layer with GeoRSS format and a style map.
|
|
markerLayer = new OpenLayers.Layer.GML("Some images from Flickr",
|
|
"xml/georss-flickr.xml", {
|
|
format: OpenLayers.Format.GeoRSS,
|
|
formatOptions: {
|
|
// adds the thumbnail attribute to the feature
|
|
createFeatureFromItem: function(item) {
|
|
var feature = OpenLayers.Format.GeoRSS.prototype
|
|
.createFeatureFromItem.apply(this, arguments);
|
|
feature.attributes.thumbnail =
|
|
this.getElementsByTagNameNS(
|
|
item, "*", "thumbnail")[0].getAttribute("url");
|
|
return feature;
|
|
}
|
|
},
|
|
// Giving the style map keys for "default" and "select"
|
|
// rendering intent, to make the image larger when selected
|
|
styleMap: new OpenLayers.StyleMap({
|
|
"default": style,
|
|
"select": new OpenLayers.Style({pointRadius: 35})
|
|
})
|
|
});
|
|
map.addLayer(markerLayer);
|
|
|
|
// control that will show a popup when clicking on a thumbnail
|
|
var popupControl = new OpenLayers.Control.SelectFeature(markerLayer, {
|
|
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();
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="init()">
|
|
<h1 id="title">GeoRSS from Flickr in OpenLayers</h1>
|
|
<div id="tags">
|
|
georss, style, styling, marker, flickr, thumbnail, image, rule
|
|
</div>
|
|
|
|
<p id="shortdesc">
|
|
Display a flickr-feed on top of the map
|
|
</p>
|
|
|
|
<div id="map" class="smallmap"></div>
|
|
<div id="docs">
|
|
<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>
|
|
</body>
|
|
</html>
|