-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Rename the project from SmartPopups to FeaturePopups and reorganize f…
…olders.
- Loading branch information
Showing
8 changed files
with
3,536 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
Proposal for a new control: FeaturePopups for OpenLayers | ||
======================================================== | ||
|
||
This control wraps the management of popups and SelectFeature control of [OpenLayers](http://openlayers.org). | ||
|
||
Features: | ||
-------- | ||
* Prepare the contents of the popup using templates. | ||
* Templates as strings or functions. | ||
* Allows external templates renderers. | ||
* Simultaneously manage popups by selection or hover in multiple vector layers. | ||
* Allows to register listeners on the events of selection and hover (Advanced) | ||
* Multiple selection using boxes and show list of features selecteds in a popup. | ||
* Allows to register listeners on the events of selection and hover. | ||
|
||
TODO: | ||
---- | ||
* Write tests. | ||
* Documenting. | ||
* More constructor options? | ||
* Use clusters as list features | ||
* Show popups of a clustered features as a lists features | ||
|
||
The beginnings | ||
-------------- | ||
This development began with the request [olsocial](http://osgeo-org.1803224.n2.nabble.com/HTML-template-popup-manager-tc6948565.html) | ||
of Javier Carrasco, but has gone far beyond its initial request. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
<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"> | ||
<title>OpenLayers Example</title> | ||
<link rel="stylesheet" href="http://www.openlayers.org/dev/theme/default/style.css" type="text/css"> | ||
<link rel="stylesheet" href="http://www.openlayers.org/dev/examples/style.css" type="text/css"> | ||
|
||
<script src="http://www.openlayers.org/dev/OpenLayers.js"></script> | ||
<script> // In order to simulate a template translation, see: sprintersLayer. | ||
OpenLayers.Util.extend(OpenLayers.Lang.en, { | ||
// Dummy translation ;-) | ||
"Name": "Name-i18n", | ||
"Country": "Country-i18n", | ||
"City": "City-i18n" | ||
}); | ||
OpenLayers.Lang.setCode("en"); | ||
</script> | ||
<script src="../lib/FeaturePopups.js"></script> | ||
|
||
</head> | ||
<body> | ||
<h1 id="title">OpenLayers Example</h1> | ||
<div id="tags">popups, vector layers, templates</div> | ||
<p id="shortdesc"> | ||
Demonstrates how to use the "FeaturePopups" control to display popups on multiple vector layers using templates. | ||
</p> | ||
<div id="map" style="width: 500px; height: 500px;" class="smallmap"></div> | ||
<div id="docs"> | ||
<p> | ||
This control wraps the management of popups and SelectFeature control. | ||
</p> | ||
<p>Features:</p> | ||
<ul> | ||
<li>Prepare the contents of the popup using templates (as strings or functions)</li> | ||
<li>Simultaneously manage popups by selection or hover in multiple vector layers.</li> | ||
<li>Allows to register listeners on the events of selection and hover (Advanced)</li> | ||
</ul> | ||
<p>View the <a href="feature-popups.js" target="_blank">feature-popups.js</a> source to see how this is done.</p> | ||
</div> | ||
<script src="mobile-sprinters.js"></script> | ||
<script src="feature-popups.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,118 @@ | ||
// Projections | ||
// ----------- | ||
var sphericalMercatorProj = new OpenLayers.Projection("EPSG:900913"); | ||
var geographicProj = new OpenLayers.Projection("EPSG:4326"); | ||
|
||
// Vector layers | ||
// ------------- | ||
|
||
var sprintersLayer = new OpenLayers.Layer.Vector("Sprinters (translated labels)", { | ||
hoverPopupTemplate: "{{Name}}", | ||
selectPopupTemplate: "{{OpenLayers.i18n(\"Name\")}}: {{Name}}<br>" + | ||
"{{OpenLayers.i18n(\"Country\")}}: {{Country}}<br>" + | ||
"{{OpenLayers.i18n(\"City\")}}: {{City}}<br>", | ||
itemPopupTemplate: "<li>{{Name}}</li>", | ||
styleMap: new OpenLayers.StyleMap({ | ||
externalGraphic: "http://www.openlayers.org/dev/examples/img/mobile-loc.png", | ||
graphicOpacity: 1.0, | ||
graphicWith: 16, | ||
graphicHeight: 26, | ||
graphicYOffset: -26 | ||
}) | ||
}); | ||
sprintersLayer.addFeatures(getSprintersFeatures()); | ||
|
||
var getLengthRoad = function(feature){ | ||
return Math.round(feature.geometry.getLength()/10)/100 + " km"; | ||
} | ||
var tasmaniaRoadsLayer = new OpenLayers.Layer.Vector("Tasmania roads (function templates)", { | ||
// Only hover popup | ||
hoverPopupTemplate: function(feature){return "Length: " + getLengthRoad(feature);}, | ||
itemPopupTemplate: function(feature){return "<li>" + getLengthRoad(feature) + "</li>";}, | ||
projection: geographicProj, | ||
strategies: [new OpenLayers.Strategy.Fixed()], | ||
protocol: new OpenLayers.Protocol.HTTP({ | ||
url: "tasmania/TasmaniaRoads.xml", | ||
format: new OpenLayers.Format.GML.v2() | ||
}) | ||
}); | ||
|
||
var sundialsLayer = new OpenLayers.Layer.Vector("Sundials", { // TODO: use cluster | ||
// No hover popup | ||
selectPopupTemplate: "<h2>{{name}}</h2>{{description}}", | ||
itemPopupTemplate: "<li>{{name}}</li>", | ||
projection: geographicProj, | ||
strategies: [new OpenLayers.Strategy.Fixed()], | ||
protocol: new OpenLayers.Protocol.HTTP({ | ||
url: "kml/sundials.kml", | ||
format: new OpenLayers.Format.KML({ | ||
extractStyles: true, | ||
extractAttributes: true | ||
}) | ||
}) | ||
}); | ||
|
||
var poisLayer = new OpenLayers.Layer.Vector("POIs (using BBOX)", { | ||
hoverPopupTemplate: "{{title}}", | ||
selectPopupTemplate: "<h2>{{title}}</h2>{{description}}", | ||
itemPopupTemplate: "<li>{{title}}</li>", | ||
projection: geographicProj, | ||
strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1.1})], | ||
protocol: new OpenLayers.Protocol.HTTP({ | ||
url: "textfile.txt", | ||
format: new OpenLayers.Format.Text() | ||
}) | ||
}); | ||
|
||
// Create map | ||
// ---------- | ||
var map = new OpenLayers.Map({ | ||
div: "map", | ||
theme: null, | ||
projection: sphericalMercatorProj, | ||
displayProjection: geographicProj, | ||
units: "m", | ||
numZoomLevels: 18, | ||
maxResolution: 156543.0339, | ||
maxExtent: new OpenLayers.Bounds( | ||
-20037508.34, -20037508.34, 20037508.34, 20037508.34 | ||
), | ||
controls: [ | ||
new OpenLayers.Control.Attribution({position: new OpenLayers.Pixel(1,486)}), | ||
new OpenLayers.Control.Navigation(), | ||
new OpenLayers.Control.PanZoom(), | ||
new OpenLayers.Control.FeaturePopups({ | ||
closeBox: true, | ||
box: true, | ||
eventListeners: { | ||
beforefeaturehighlighted: logEvent, | ||
featurehighlighted: logEvent, | ||
featureunhighlighted: logEvent, | ||
featureselected: logEvent, | ||
featureunselected: logEvent | ||
} | ||
}), | ||
new OpenLayers.Control.LayerSwitcher() | ||
], | ||
layers: [ | ||
new OpenLayers.Layer.OSM("OpenStreetMap", null), | ||
sprintersLayer, | ||
tasmaniaRoadsLayer, | ||
sundialsLayer, | ||
poisLayer | ||
], | ||
center: new OpenLayers.LonLat(0, 0), | ||
zoom: 2 | ||
}); | ||
|
||
// Log events | ||
// ---------- | ||
function logEvent(evt) { | ||
|
||
if (!console || !console.log) { | ||
return; | ||
} | ||
var feature = evt.feature | ||
var layer = feature.layer; | ||
console.log(evt.type + ": layer=" + layer.name + ((feature.fid)?" fid=" + feature.fid:" id=" + feature.id)); | ||
} |
Oops, something went wrong.