Merge pull request #49 from bmcbride/demo-updates

Docs & Demos updates

demos/postgis-restful-web-service-framework/index.html

@@ -87,7 +87,7 @@ <h2>Mountain Backdrop Preservation Areas</h2>
                 <hr>
 
                 <h2>Fire Hydrants</h2>
-                <p class="docs">This demo uses the <code>unique</code> symbology type so we can view the difference between public and private fire hydrants. There's also a simple <code>popupTemplate</code> to help describe the features.</p>
+                <p class="docs">This demo uses the <code>unique</code> symbology type so we can view the difference between public and private fire hydrants. There's also a simple <code>popupTemplate</code> to help describe the features and a <code>title</code> tooltip when hovering over the marker.</p>
                 <p class="docs">We're also using the <code>scaleRange</code> parameter so that when someone zooms out beyond zoom level 15, no more feature requests are made. This helps keep the map from being too cluttered.</p>
                 <div class="row demo">
                     <div class="span6 height-controlled">
@@ -117,15 +117,17 @@ <h2>Fire Hydrants</h2>
             {
                 value: "Public",
                 vectorOptions: {
-                    icon: new customMarker()
+                    icon: new customMarker(),
+                    title: "{tagnumber} ({owner})"
                 }
             },
             {
                 value: "Private",
                 vectorOptions: {
                     icon: new customMarker({
                         iconUrl: "../../docs-demo/img/markers/hydrant-red.png"
-                    })
+                    }),
+                    title: "{tagnumber} ({owner})"
                 }
             }
         ]
@@ -355,15 +357,17 @@ <h2>Bus Stops</h2>
                             {
                                 value: "Public",
                                 vectorOptions: {
-                                    icon: new customMarker()
+                                    icon: new customMarker(),
+                                    title: "{tagnumber} ({owner})"
                                 }
                             },
                             {
                                 value: "Private",
                                 vectorOptions: {
                                     icon: new customMarker({
                                         iconUrl: "../../docs-demo/img/markers/hydrant-red.png"
-                                    })
+                                    }),
+                                    title: "{tagnumber} ({owner})"
                                 }
                             }
                         ]

documentation/index.html

@@ -62,6 +62,7 @@ <h5>Other Reference</h5>
                     <ul>
                         <li><a href="#docs-symbology">Symbology Options</a></li>
                         <li><a href="#docs-popup">Popup Template</a></li>
+                        <li><a href="#docs-clickevent">Custom clickEvent</a></li>
                         <li><a href="#docs-dynamic">Dynamic Data</a></li>
                     </ul>
                 </div>
@@ -112,6 +113,7 @@ <h3 id="docs-ags-options">Options</h3>
                         <tr><td><code>showAll</code></td><td><code>Boolean</code></td><td><code>false</code></td><td>If true, all features will be fetched and shown once, not after a map extent change. This is helpful for layers with only a handful of features.</td></tr>
                         <tr><td><code>fields</code></td><td><code>String</code></td><td><code>null</code></td><td>A list of comma separated fields to be returned with the features. For example <code>"OBJECTID,OWNER_NAME"</code> returns two fields and <code>"*"</code> returns all fields.</td></tr>
                         <tr><td><code>uniqueField</code></td><td><code>String</code></td><td><code>null</code></td><td>A field in the returned data that can be considered unique. This isn't required but is very helpful in determining which features are already on the map when the map extent changes.</td></tr>
+                        <tr><td><code>clickEvent</code></td><td><code>Function</code></td><td><code>null</code></td><td>A user defined click event. For details check the <a href="#docs-clickevent">Custom clickEvent options documentation</a>.</td></tr>
                     </tbody>
                 </table>
 
@@ -173,6 +175,7 @@ <h3 id="docs-ags-options">Options</h3>
                         <tr><td><code>fields</code></td><td><code>String</code></td><td><code>null</code></td><td>A list of comma separated fields to be returned with the features. For example <code>"OBJECTID,OWNER_NAME"</code> returns two fields and <code>"*"</code> returns all fields.</td></tr>
                         <tr><td><code>uniqueField</code></td><td><code>String</code></td><td><code>null</code></td><td>A field in the returned data that can be considered unique. This isn't required but is very helpful in determining which features are already on the map when the map extent changes.</td></tr>
                         <tr><td><code>esriOptions</code></td><td><code>Boolean</code></td><td><code>false</code></td><td>Whether or not to request <code>scaleRange</code> and <code>symbology</code> settings from the Arc2Earth Sync back-end. Layers loaded from ArcGIS Desktop into Arc2Earth Sync will retain <code>scaleRange</code> and <code>symbology</code> settings from ArcGIS Desktop.</td></tr>
+                        <tr><td><code>clickEvent</code></td><td><code>Function</code></td><td><code>null</code></td><td>A user defined click event. For details check the <a href="#docs-clickevent">Custom clickEvent options documentation</a>.</td></tr>
                     </tbody>
                 </table>
 
@@ -239,6 +242,7 @@ <h3 id="docs-geoiq-options">Options</h3>
                         <tr><td><code>symbology</code></td><td><code>Object <a href="#docs-symbology">symbology options</a></code></td><td><code>null</code></td><td>The symbology options for the layer. Features can be rendered with a single symbology or can also be symbolized based on an attribute using unique values or a value range. For details check the <a href="#docs-symbology">symbology options documentation</a>.</td></tr>
                         <tr><td><code>showAll</code></td><td><code>Boolean</code></td><td><code>false</code></td><td>If true, all features will be fetched and shown once, not after a map extent change. This is helpful for layers with only a handful of features.</td></tr>
                         <tr><td><code>uniqueField</code></td><td><code>String</code></td><td><code>null</code></td><td>A field in the returned data that can be considered unique. This isn't required but is very helpful in determining which features are already on the map when the map extent changes.</td></tr>
+                        <tr><td><code>clickEvent</code></td><td><code>Function</code></td><td><code>null</code></td><td>A user defined click event. For details check the <a href="#docs-clickevent">Custom clickEvent options documentation</a>.</td></tr>
                     </tbody>
                 </table>
 
@@ -306,6 +310,7 @@ <h3 id="docs-cartodb-options">Options</h3>
                         <tr><td><code>symbology</code></td><td><code>Object <a href="#docs-symbology">symbology options</a></code></td><td><code>null</code></td><td>The symbology options for the layer. Features can be rendered with a single symbology or can also be symbolized based on an attribute using unique values or a value range. For details check the <a href="#docs-symbology">symbology options documentation</a>.</td></tr>
                         <tr><td><code>showAll</code></td><td><code>Boolean</code></td><td><code>false</code></td><td>If true, all features will be fetched and shown once, not after a map extent change. This is helpful for layers with only a handful of features.</td></tr>
                         <tr><td><code>fields</code></td><td><code>String</code></td><td><code>"*"</code></td><td>A list of comma separated fields to be returned with the features. By default all fields are returned.</td></tr>
+                        <tr><td><code>clickEvent</code></td><td><code>Function</code></td><td><code>null</code></td><td>A user defined click event. For details check the <a href="#docs-clickevent">Custom clickEvent options documentation</a>.</td></tr>
                     </tbody>
                 </table>
 
@@ -391,6 +396,7 @@ <h3 id="docs-prwsf-options">Options</h3>
                         <tr><td><code>popupOptions</code></td><td><code>Object <a href="http://leaflet.cloudmade.com/reference.html#popup-options">Leaflet Popup options</a></code></td><td><code>null</code></td><td>Controls the width of and the presence of a close button for the Popup and whether the map should be panned when the Popup is opened.</td></tr>
                         <tr><td><code>symbology</code></td><td><code>Object <a href="#docs-symbology">symbology options</a></code></td><td><code>null</code></td><td>The symbology options for the layer. Features can be rendered with a single symbology or can also be symbolized based on an attribute using unique values or a value range. For details check the <a href="#docs-symbology">symbology options documentation</a>.</td></tr>
                         <tr><td><code>showAll</code></td><td><code>Boolean</code></td><td><code>false</code></td><td>If true, all features will be fetched and shown once, not after a map extent change. This is helpful for layers with only a handful of features.</td></tr>
+                        <tr><td><code>clickEvent</code></td><td><code>Function</code></td><td><code>null</code></td><td>A user defined click event. For details check the <a href="#docs-clickevent">Custom clickEvent options documentation</a>.</td></tr>
                     </tbody>
                 </table>
 
@@ -456,6 +462,7 @@ <h3 id="docs-giscloud-options">Options</h3>
                         <tr><td><code>popupOptions</code></td><td><code>Object <a href="http://leaflet.cloudmade.com/reference.html#popup-options">Leaflet Popup options</a></code></td><td><code>null</code></td><td>Controls the width of and the presence of a close button for the Popup and whether the map should be panned when the Popup is opened.</td></tr>
                         <tr><td><code>symbology</code></td><td><code>Object <a href="#docs-symbology">symbology options</a></code></td><td><code>null</code></td><td>The symbology options for the layer. Features can be rendered with a single symbology or can also be symbolized based on an attribute using unique values or a value range. For details check the <a href="#docs-symbology">symbology options documentation</a>.</td></tr>
                         <tr><td><code>showAll</code></td><td><code>Boolean</code></td><td><code>false</code></td><td>If true, all features will be fetched and shown once, not after a map extent change. This is helpful for layers with only a handful of features.</td></tr>
+                        <tr><td><code>clickEvent</code></td><td><code>Function</code></td><td><code>null</code></td><td>A user defined click event. For details check the <a href="#docs-clickevent">Custom clickEvent options documentation</a>.</td></tr>
                     </tbody>
                 </table>
 
@@ -481,6 +488,8 @@ <h2 class="docs" id="docs-symbology">Symbology</h2>
                 <p class="docs">Symbology for a layer can be defined a few different ways including <code>single</code>, <code>unique</code> and <code>range</code>. If no symbology is defined the default Leaflet vector styles will be used.</p>
 
                 <p class="docs">When instantiating a new layer, use one of the options below when setting the <code>symbology</code> option value.</p>
+
+                <p class="docs">Note that marker icons may also have a <code>title</code> option for defining a tooltip on mouseover.</p>
 
                 <h3>single</h3>
 
@@ -552,22 +561,24 @@ <h3>range</h3>
             vectorOptions: { // Use these Leaflet Path options for features with values in this range
                 icon: new customIcon({
                     iconUrl: "../../docs-demo/img/markers/bus-brown.png"
-                })
+                }),
+                title: "{SPEED} mph"
             }
         },{
             range: [21, 100],
             vectorOptions: {
                 icon: new customIcon({
                     iconUrl: "../../docs-demo/img/markers/bus-green.png"
-                })
+                }),
+                title: "{SPEED} mph"
             }
         }
     ]
 }</pre>
 
                 <h2 class="docs" id="docs-popup">Popup Templates</h2>
 
-                <p class="docs">To create content to show Popups when features are clicked we can use the <code>popupTemplate</code> option. a popupTemplate can be set two ways:</p>
+                <p class="docs">To create content to show Popups when features are clicked we can use the <code>popupTemplate</code> option. A popupTemplate can be set two ways:</p>
 
                 <ul class="docs">
                     <li>A string with property names wrapped in curly brackets (<code>{road_name}</code>) to act as placeholders for the values</li>
@@ -607,6 +618,33 @@ <h3>Function Based</h3>
                 <p class="docs">This function iterates through each property in properties and formats each to Proper Case for better looking output.</p>
 
                 <pre class="prettyprint docs">"&lt;h3&gt;State Road&lt;/h3&gt;Road Name: S Bemis St&lt;br /&gt;Speed Limit: 25&lt;br /&gt;"</pre>
+
+                <h2 class="docs" id="docs-clickevent">Custom clickEvent</h2>
+
+                <p class="docs">In addition to opening popups, you may want to define your own click events. This is useful for appending data to a div or opening a modal dialog. To create a custom click event, we can use the <code>clickEvent</code> option and pass a function with <code>feature</code> and <code>event</code> arguments.
+
+                <h3>Example</h3>
+
+                <p>The following example will pop up an alert box with the 'name' attribute when the marker is clicked:</p>
+
+                <pre class="prettyprint docs">prwsf_libraries = new lvector.PRWSF({
+    url: "http://maps.co.mecklenburg.nc.us/rest",
+    geotable: "libraries",
+    fields: "gid,name,address,city",
+    uniqueField: "gid",
+    srid: 2264,
+    scaleRange: [7, 20],
+    showAll: true,
+    symbology: {
+        type: "single",
+        vectorOptions: {
+            icon: new customMarker()
+        }
+    },
+    clickEvent: function (feature, event) {
+        alert(feature.properties.name);
+    }
+});</pre>
 
                 <h2 class="docs" id="docs-dynamic">Dynamic Data</h2>