Rename the project from SmartPopups to FeaturePopups and reorganize f…

…olders.
jorix · Nov 19, 2011 · 0ab33c7 · 0ab33c7
1 parent 69fe9f1
commit 0ab33c7
Show file tree

Hide file tree

Showing 8 changed files with 3,536 additions and 59 deletions.
diff --git a/README.md b/README.md
@@ -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.
diff --git a/examples/feature-popups.html b/examples/feature-popups.html
@@ -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 &quot;FeaturePopups&quot; 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>
diff --git a/examples/feature-popups.js b/examples/feature-popups.js
@@ -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));
+}